React でのアプリの作り方の流れを、React の流儀 – Reactの検索可能な商品データ表を例に学んだ。
- モックを作る
- UI をコンポーネントの階層構造に落とし込む
- React で静的なバージョンを作成する
- UI 状態を表現する必要十分な state を決定する
- state をどこに配置すべきかを明確にする
- 逆方向のデータフローを追加する
モックを作る
まずはモックを作る（ゴールをみてどんなものが必要になるかを考えられる状態にする）
UI をコンポーネントの階層構造に落とし込む
どんな役割なのかを整理する。
| No. | コンポーネント名 | 解説 |
|---|---|---|
| 1 | FilterableProductTable（オレンジ色） | このサンプル全体を含む |
| 2 | SearchBar（青色） | すべてのユーザ入力を受け付ける |
| 3 | ProductTable（緑色） | ユーザ入力に基づくデータの集合を表示・フィルタする |
| 4 | ProductCategoryRow（水色） | カテゴリを見出しとして表示する |
| 5 | ProductRow（赤色） | 各商品を 1 行で表示する |
上記ができたら、階層構造を確認する。
- FilterableProductTable
- SearchBar
- ProductTable
- ProductCategoryRow
- ProductRow
React で静的なバージョンを作成する
実装にとりかかる。まずは静的なデータのみを対象にして進める。つまり、データモデルを描画するだけの機能を持ったアプリを実装する。
次の点を意識しながら実装する。
- 他コンポーネントを再利用する
propsを通じてデータを渡す（静的なバージョンではstateは不要。stateは動的に変化するデータを扱うために確保された機能。）
UI 状態を表現する必要十分な state を決定する
UI をインタラクティブにするためにデータモデルを更新できるようにする。その際、state を利用できる。何でもかんでも state で管理するのではなく、『DRYの原則』を適用する。
そのために次の質問をデータに対して行うことで state ではない ことを判断できる：
- 親から
propsを通じて与えられたデータ？ - 時間変化しないままでいるデータ？
- コンポーネント内にある他の
propsやstateから算出可能なデータ？
サンプルアプリのデータを例に state かどうかを考える。サンプルアプリのデータは次のもの：
| データ名 | state判定 |
理由 |
|---|---|---|
| 元となる商品リスト | ❌ | props から渡されるから |
| 検索文字列 | ⭕️ | 時間変化し、他から算出できない |
| チェックボックス | ⭕️ | 時間変化し、他から算出できない |
| フィルタ済み商品リスト | ❌ | 元商品リストと検索文字列、チェックリストから算出可能 |
state をどこに配置すべきかを明確にする
どのコンポーネントが state を所有するのかを明確にする。そのために次の項目を確認する。
stateを使って表示する全てのコンポーネントを確認する- 共通の親コンポーネントを見つける
stateを持つにふさわしいコンポーネントを見つけられなかったら、stateを保持するだけの新しいコンポーネントを作り、階層構造の中で見つけておいた共通の親コンポーネントの上に配置する
逆方向のデータフローを追加する
階層構造のフォームコンポーネントからの入力を受付、state を更新するようにする。
