「モデル知識」と「データの表示のしかた」に着目する
GUI を構築していると、以下の両方の面を取り扱うのは不可避。
1. モデル知識
「データそのものが、どのようであるか」の知識
2. データの表示のしかた
「データをどのように表示するか」の知識
これらの関心事を、以下のように分離して実装すると良いのでは？
1. 深いコンポーネントには、モデル知識を含まないようにする
2. 比較的浅いコンポーネントがモデル知識を持ち、データを翻訳して深いコンポーネントにPropsとして渡す
具体例: 深いコンポーネントにおいて、モデルの型の情報を import せず、Props はプリミティブに近い型を使う
背景: コンポーネント依存ツリーの深いところにあるコンポーネント(A)がモデル知識を持ってしまうと、知識が離散していて読みづらい。
→ A を読むときには「データの表示のしかた」に集中できたほうが良いのでは？
Q. データ・画面が複雑するので、一つの親コンポーネントでは扱いきれない場合
A.モデル知識を持てるコンポーネントを 一階層だけ増やす
Before:
A(ルート: モデル有) → B (モデル無)
After:
A(ルート: モデル有) → B (モデル有) → C (モデル無)
モデル知識としては異なっているが同じような見た目のパーツがある場合も、「共通の C」 と 「モデル知識を持つ B」に分けることで、「DRY/再利用性」と「関心事の分離」が両立できる