Reactのベストプラクティス - PresentialコンポーネントとContainerコンポーネントとAtomic Design
コンポーネント設計
役割によるコンポーネントの分離
Presentialコンポーネント
見た目の部分を担当するコンポーネント。どのようにUIを描画するかの部分に責務を持ち、Propsを受け取りそれをどのように表示するかを担当する。 state(状態)は持たないことが推奨され、単に値(props)を受け取りそれをどう表示するかだけの役割のため、SFC(Stateless Functional Component)が適しています。 またpropsに渡す値として関数を渡すことも可能。
データの流れとして、Containeコンポーネントの子コンポーネントとして実装される。
Containerコンポーネント
データや状態、挙動を子コンポーネントであるPresentialへ提供するコントローラ的な役割。 Containerコンポーネント自身は具体的なDOM表現は持たない。 データに関して集中管理する存在。
Atomic Design
- Atomos 原子
- UIの最小単位。例えば、検索フォームなら、見出し、入力エリア、送信ボタンで分割されるがこれらのパーツがAtomosに相当する。
- Molecules 分子
- 複数のAtomosから構成される。見出し、入力エリア、送信ボタンのAtomosで構成された検索フォームがMoleculesに相当する。
- Organisms 有機物
- AtomosやMoleculesから構成される。直接Atomosを参照することもある。例えばヘッダーはロゴ(Atomos)、検索フォーム(Molecules)、グローバルナビゲーション(Molecules)から成り立ち、これがOrgasmsに相当する。
- Templates テンプレート
- ワイヤーフレームのように、ページに表示するための実データが反映される前のページ全体のレイアウトの構造や骨格を表現する。
- pages ページ
- テンプレートに対して、実データを反映させた状態。ページ全体の実態。プログラミング的に言えばページはテンプレートのインスタンスに相当する。