コンポーネントをどう分けるか — 見た目が同じでも、変わる理由が違えば別の部品

What — 何を共通にして、何を分けるか

凝集度と結合度で見たとおり、まとめてよいかの基準は同じ理由で同時に変わるかです。画面の部品では、これが特に見誤りやすくなります。見た目が似ていると、変わる理由も同じに見えるからです。

部品には、変わる理由の違う 2 つの層があります。

冒頭の ProductCard は、業務の部品を 1 つにまとめたものでした。一覧は「比べて選ぶ」、セールは「急いで買わせる」、お気に入りは「あとで買う物を見直す」。目的が違うので、足したい表示も画面ごとに違い、そのたびに引数が増えました。

ProductCard（引数 23 個）
├ 一覧
├ セール
└ お気に入り

変更 1 つ → 3 画面すべてに影響

引数で切り替えるより、中身を差し込む

共通の部品が必要なとき、違いを引数（フラグ）で切り替えると、組み合わせが掛け算で増えます。代わりに、違う部分を外から差し込める形にする方法があります。

// 引数で切り替える: 足したい表示のたびに引数が増える
<Card showPrice showBadge isSale saleEndsAt={end} />

// 中身を差し込む: カードは枠だけを持ち、中身は使う側が決める
<Card>
  <ProductImage src={p.image} />
  <Price value={p.price} was={p.listPrice} />
  <SaleCountdown endsAt={end} />
</Card>

これを合成（composition）と呼びます。カードは「枠と余白」だけを知り、何を入れるかは使う側が決めます。セール画面が残り時間を足しても、カードにもほかの画面にも触れません。

状態と取得を持つ部品、持たない部品

もう 1 つの分け方は、状態やデータの取得を持つかどうかです。

• 持たない部品: 受け取った値を描くだけ。同じ値なら同じ見た目になる。どの画面でも使え、見本の画面やテストで扱いやすい
• 持つ部品: データを取り、状態を管理し、持たない部品に値を渡す。画面ごとに 1 つずつ

見た目の部品は、ほとんどが「持たない部品」です。データをどこで取るかで見た「取ることと描くことを分ける」は、この分け方と同じ形です。そして状態を持つ部品を小さく、使う場所の近くに置くと、描き直される範囲も狭くなります。

Why — なぜ業務の部品をまとめてしまうのか

見た目の一致は、今だけの偶然

立ち上げのとき、3 画面のカードは本当に同じ見た目でした。まとめるのは自然な判断です。ただ、同じだったのはデザインの初期値であって、画面の目的ではありませんでした。目的が違うものは、時間とともに違う方向へ変わります。

判断するときは、見た目ではなく、誰がどんな理由で変更を頼んでくるかを見ます。一覧の改善を頼むのは検索の担当、セールを頼むのは販促の担当。頼む人が違えば、変わる理由も違います。

引数を足すのが、いちばん楽に見える

共通の部品に新しい表示が要るとき、選択肢は「引数を 1 つ足す」か「部品を分ける」かです。引数を足すほうが、その場の変更は小さく済みます。1 回ずつは正しい小さな判断が、23 回積み重なって 400 行の分岐になります。

分け直すのは、まとめるより難しい

まとめた部品を分けるには、どの画面がどの引数の組み合わせを使っているかを全部調べる必要があります。まとめるのは 1 日でも、分けるのは数週間かかります。だから、まとめる判断は遅めにします。3 回同じものが出てきて、変わる理由も同じだと確かめてからで間に合います。

演習 — まず自分で判断する

解説を読む前に、まず自分で判断してみてください。ここで一度詰まっておくと、 次の節の判断軸が「なるほど」ではなく「そう来たか」に変わります。