kouの技術的メモ

学習した内容の定着やアウトプット用に開設しました

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 ページ
    • テンプレートに対して、実データを反映させた状態。ページ全体の実態。プログラミング的に言えばページはテンプレートのインスタンスに相当する。

AtomicDesignの概念を各コンポーネント実装へ反映する

  • Atomos 原子
    • 値を受け取って描画するだけなので、SFCとして構成されることが多い。Presentialコンポーネント
  • Molecules 分子 - 実装上Atomosと大差ない。受け取ったPropsを子コンポーネントのAtomosにそのまま流す役割。Atomosが必要としているデータが不変の場合、固定データをMolecules上で定義しても良い。Presentialコンポーネント
  • Organisms 有機

    • 複数のAtomosやMoleculesを並べて、親のPropsをそのまま流し込み描画することが主な役割。必要なデータを親コンポーネントから受け取りそれを元に描画するPresentialコンポーネント。ただかなり具体性が必要なレベルの構成要素なので、Containerコンポーネントの役割を担う場合もある
  • Templates テンプレート,pages ページ

  • エントリーポイントからデータが仕込まれたりするのでContainerコンポーネントに相当する。コンポーネントファイルとして存在するのではなく、エントリーポイントがここの役割を担っている場合が多い。