ReactでToDoアプリに挑戦①〜要件定義・コンポーネント分割〜
こんにちは、イシカワです。
普段はPythonでコード書いてるのですが(最近は管理業務がメインでそもそもあまりコーディングできてないですが)、個人開発したいな〜ってことでReact勉強中です。
HTML/CSS/JavaScriptはProgateやって模写コーディングをいくつかやったことある程度です。
独学でReact勉強している方の参考になればと思います。
今回は個人開発の中で、TypeScriptにもチャレンジします。
どんなアプリを作るか？
まずは、要件定義をしましょう。
といっても、世界に一つだけのオレオレアプリを最初から作ろうとすると挫折するのは目に見えているので、まずはよくあるアプリのマネから始めます。
タイトルにもある通り、今回はToDoアプリを作ることにしました。
ToDoアプリといってもいろいろと機能が考えられるので、今回は以下の機能のみに絞って作ります（後からいくらでも機能追加できるのがWebアプリのいいところですよね！）。
- タスクの新規追加・既存タスクの編集ができる
- タスクのステータスは「新規」「進行中」「完了」の3つ
- タスクのステータスをドラッグ&ドロップで変更できる（いわゆるカンバン）
画面設計
画面設計もシンプルにいきます。
まずはトップページはこんな感じです。
ヘッダー部分はまずは何も置きませんが、のちのちのためにいったんエリアだけ作成しています。
新規のタスク追加or既存タスクの編集はモーダルで行いたいと思います。
画像はDraw.ioというツールを使いました。
余談ですが、遅ればせながら最近ハマっているツールです。
コンポーネント設計
コンポーネント設計はChatGPTにお任せしてみました。
先ほどの画面設計にコンポーネント分割を書き加えてみます。
ステータスごとのブロックはKanbanColumn、ひとつひとつのタスクはTaskCardというコンポーネントに分割します。
コンポーネント分割の粒度って難しいと思いますが、少なくともこういった繰り返し要素をコンポーネント化すればいいのは間違いないと思います。
タスクの追加・編集モーダルは、AddTaskModalというひとつのコンポーネントで実装予定です。
ツリー構造にするとこんな感じ。
KanbanBoardPage（ページ全体）
├── Header（共通ヘッダー）
├── KanbanBoard（ボード全体）
│ ├── KanbanColumn（カラム：未着手/進行中/完了）
│ │ ├── TaskCard（タスクカード）
│ │ ├── TaskCard（タスクカード）
│ │ └── ...（複数タスク）
│ ├── KanbanColumn（別のカラム）
│ └── ...（カラム複数）
└── AddTaskModal（タスク追加/編集用モーダル）
まとめ
とりあえず要件定義と画面設計、コンポーネント分割ができました。
次回は、実際にReactのプロジェクトを立ち上げて実装を進めていこうと思います。
Discussion