【ToDoアプリを作る】React × Mantineで画面の設計に挑戦する。

Reactの開発を通してプログラミングスキルのレベルアップをしたいのですが、未経験者がゼロから開発するとなると躓くポイントがたくさんあるので、できるだけ簡単に開発できるようにしたいと思っています。

学習だけでは学んだことを実践に活かすのが難しいので、今回から数回に分けてReactとMantineを使って簡単なアプリケーション作成をしてみたいと思います。

作成するアプリケーションは、簡単なToDoアプリを予定しておりますので、ぜひ挑戦してみてください。

仕様の決定

仕様としては、タスクを登録してタスクリストを作ることができることと、完了したタスクをリストから削除することができるの２つの機能を作成します。

必要となるコンポーネントはテキストを入力するためのインプットボックスと登録・削除をするためのボタン、それから、登録したタスクを表示するリストです。

画面設計

画面設計は大まかにですがこのようなものをイメージしております。

タスクを入力して登録ボタンを押すと下にリストとして追加されます。

また、完了ボタンを押すとタスクを削除することができます。

今回はこの仕様で作成してみましょう。

コンポーネント作成

それでは、先ほど挙げたコンポーネントの作成から取り組みましょう。

ボタンについては過去の記事で紹介したDemoButtonを編集して使用します。

過去の記事はこちらです。
https://build-up.tech/mantine-usage-1/

テキスト入力用コンポーネントは公式ドキュメントからコピーして使用します。

以下のURLがテキスト入力に使用するuse-debounced-stateのページです。

https://mantine.dev/hooks/use-debounced-state/

ページ内のUsageの直下にあるコードをすべてコピーしてください。

次にcomponentsディレクトリにinput.tsxというファイルを作成して、ファイル内にコピーしたコードをすべてペーストします。

<TextInput>タグ内のlabelは自由に編集していただいて構いませんので、”タスクを入力してください。”などの文言に変更しましょう。

      <TextInput
        label="タスクを入力してください。"
        defaultValue={value}
        style={{ flex: 1 }}
        onChange={(event) => setValue(event.currentTarget.value)}
      />

function名をDemoInputと変更してexportすれば、input.tsxの修正はひとまず完了です。

以下がinput.tsxの全体になります。

import { useDebouncedState } from '@mantine/hooks';
import { TextInput, Text } from '@mantine/core';

export function DemoInput() {
  const [value, setValue] = useDebouncedState('', 200);

  return (
    <>
      <TextInput
        label="タスクを入力してください。"
        defaultValue={value}
        style={{ flex: 1 }}
        onChange={(event) => setValue(event.currentTarget.value)}
      />

      <Text>Debounced value: {value}</Text>
    </>
  );
}

export default DemoInput;

今回の作業はここまでとします。

次回はリスト用のコンポーネントを作成したいと思います。

まとめ

ToDoアプリの仕様を確定しました。
ボタンのコンポーネントとテキスト入力用コンポーネントを作成しました。
<TextInput>タグ内のラベルを編集してエクスポートしました。