0-3

カンバンボードの機能と設計の概要を把握する

この教材で開発するアプリケーション、カンバンボードについて把握します。

カンバンボードの機能
カンバンボードのコンポーネント設計
カンバンボードのデータ設計

カンバンボードの機能

カンバンボードは次のような見た目です。画面はひとつだけです。

カンバンボードは次の機能を持ちます。

カンバンを進捗列ごとに表示できる
カンバンをフィルタリングできる
カンバンを並べ替えたり、カンバンの進捗列を変えたりできる
カンバンを作成または削除できる

「朝食をとる」「SNS をチェックする」などが書かれた箱が カンバン で、「TODO」「Doing」「Waiting」が 進捗列 です（画面外には「Done」の列が隠れています）。

カンバンボードのコンポーネント設計

カンバンボードは次に示す コンポーネント で構成されます。

それぞれのコンポーネントは次の役割を持ちます。

Card がカンバン、Column が進捗列に相当する
Header 内の CardFilter をカンバンのフィルタリングに使う
InputForm への入力で新たなカンバンを作成する
Overlay 上の DeleteDialog でカンバンを削除してよいか最終確認をする

コンポーネント は React においてもっとも基本的な概念です。
むしろ React が規定するのはコンポーネントだけと言っても過言ではありません。
たとえば DeleteDialog はさらに細かい Button コンポーネントを組み合わせてできていますし、すべてのコンポーネントを組み合わせた画面そのものもコンポーネントです。

React によるアプリケーションは、大小さまざまなコンポーネントをレゴブロックのように組み合わせて実装するのです。

カンバンボードのデータ設計

カンバンボードのデータは次の 3 つのテーブルで構成されます。

columns: 進捗列のデータです。

プロパティ	型	役割
`id`	string	ユニークな ID
`title`	string	進捗列の上部に表示する列の名前

cards: カンバンのデータです。

プロパティ	型	役割
`id`	string	ユニークな ID
`text`	string	カンバンの中身の文字

cardsOrder: カンバンの並びと進捗列への紐付きを表します。

プロパティ	型	役割
`id`	string	進捗列の ID かカンバンの ID
`next`	string	次に並ぶカンバンの ID。次に並ぶものがなければ進捗列の ID

cardsOrder を理解するため、次のようなカンバンの並びとそのときのデータを例にとって考えます。

| Todo  | Doing |
| ----- | ----- |
|   A   |   B   |
|   C   |       |

columns

id	title
`t`	Todo
`d`	Doing

cards

id	text
`a`	A
`b`	B
`c`	C

cardsOrder

id	next
`t`	`a`
`d`	`b`
`a`	`c`
`b`	`d`
`c`	`t`

"Todo" 列の先頭は、cardsOrder の id が t のレコードの next を見ることで "A" であるとわかります。
そして "A" の次は "C" で、"C" が最後尾であるとわかります（c の next が "Todo" 列の t を指しているため）。
"Doing" 列も同様に next を見ていくことで、"B" だけがあることがわかります。

この章は以上です。おつかれさまでした。

間違いや改善の指摘

質問ポリシー①

教材の内容に関する質問を投稿しましょう

【React/Redux】カンバンボードを実装して Web フロントエンド上級者を目指そう！

0章 : はじめに

1章 : React のプロジェクトを準備する

2章 : 静的なモック画面を作る

3章 : useState でモックにインタラクションを加える

4章 : JSON API とつないで機能を完成させる

5章 : Redux を導入してメンテナンス性を高める

カンバンボードの機能と設計の概要を把握する

カンバンボードの機能

カンバンボードのコンポーネント設計

カンバンボードのデータ設計