Reactの流儀からUI設計を学ぶ

公式ドキュメントに書かれている「Reactの流儀」について書かれている5のステップをまとめます。

• UI構築時の5つのステップ
  • 前提: デザイナーから画面のモックアップをもらっている。APIが返すJSONが決まっている
  • ステップ 1: UI をコンポーネントの階層に分割する
    • 単一責任の原則 (single responsibility principle)にならって、1つのコンポーネントは1つのことを行うようにする
    • 例:アプリ全体のコンテナ、 ユーザー入力を受け取る、ユーザー入力に従ってリストのデータをフィルタリングして表示する、フィルタリングのカテゴリを表示する、カテゴライズされた行を表示する。
    • 役割を明確化したら、それらを階層構造にする。1層目:アプリ全体のコンテナ、2層目:ユーザー入力を受け取る,ユーザー入力に従ってリストのデータをフィルタリングして表示する、3層目:フィルタリングのカテゴリを表示する、カテゴライズされた行を表示する
  • ステップ 2: React で静的なバージョンを作成する
    • インタラクティブな要素(活性、非活性など)はここでは実装しない
    • インタラクティブな要素を付け加えるのは後からの方が簡単。静的なバージョンは考えることが少なくタイプすることが多いのに対して、インタラクティブな要素は考えることが多くタイプすることが少ない。
    • props経由でデータを渡す。ここではstateを使わない。(まずは静的なバージョンを作成するので)
  • ステップ 3: UI の状態を最小限かつ完全に表現する方法を見つける
    • DRYの原則を用いてstateの構造を決める
    • 必要最小限の状態を見極めて、stateを定義し、他に必要な状態は計算する(例えば、商品のリストを配列型として格納したら、商品数はlengthを用いて計算すれば良い)
    • Stateではない基準は以下の通り
      • 時間が経っても変わらないもの
      • propsで渡されるもの
      • 既存のstateやpropsで再計算されるもの
  • ステップ 4: state を保持すべき場所を特定する
    • stateを変更する責任を持つコンポーネントを特定する。つまりstateを保持するコンポーネントを特定
    • どのコンポーネントがどの状態を所有するかを判断する基準
      • そのstateに基づいてレンダーするコンポーネントを全て特定する
      • stateを共通のさらに上にあるコンポーネントにもおける
      • 所有するコンポーネントが見つからない場合は、新たにそのstateを所有するためだけのコンポーネントを作り、共通の親コンポーネントの階層のどこかにおく
  • ステップ 5: 逆方向のデータフローを追加する
    • イベントハンドラを追加して、データを更新できるフローを追加する(イベントハンドラを通じて、stateを更新するフローのため、値をpropsなどでjsxに渡すデータフローとは逆のフロートいうこと。)

参照

React の流儀