80. 部品を切る基準 — いつコンポーネントに分けるか

コンポーネントを分けるか迷ったら、3つの基準で考えます。①2箇所以上で使う(使いそうな見込みも含む)、②「商品カード」「評価スター」のように単体で名前が付けられる、③Input で受け取り Output で通知するだけで完結し、親の事情を知らなくても動く。この3つのうち2つ以上に当てはまるなら、切り出す価値が高い部品です。

実務でこの基準が効くのは、レビューや修正のときです。名前が付いた小さな部品はテンプレートが読みやすく、「スターの見た目を変えたい」という修正が1ファイルで済みます。逆に1つの巨大コンポーネントは、どの行がどの表示に対応するか探すだけで時間を取られます。

落とし穴は切りすぎです。1回しか使わない数行のHTMLまで部品化すると、1画面を追うのに5ファイルも6ファイルも行き来する羽目になります。基準に当てはまらないうちは切らず、まず1つのコンポーネント内で育てて、必要になった時点で切り出すくらいがちょうどよいです。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// ── 部品を切る3つの基準 ──
//
// ① 2箇所以上で使う(見込み含む)
//    例: 商品カードは一覧ページとおすすめ欄の両方に出る
//
// ② 単体で名前が付けられる
//    例: 「評価スター」「ページ送り」→ 名前が付く = 部品になる
//    例: 「一覧の上のほうのdiv」→ 名前が付かない = まだ切らない
//
// ③ Input/Output だけで完結し、親の事情を知らない
//    例: 評価スターは「数値を受け取り、変更を通知する」だけ。
//        それが商品の評価か店の評価かは知らなくてよい
//
// 2つ以上当てはまる → 切り出す価値が高い
// 当てはまらない   → 無理に切らない(切りすぎは追跡コストになる)

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗