81. 賢い親と表示に徹する子 — 役割で層を分ける

コンポーネントは「ページコンポーネント」と「表示コンポーネント」の2種類に役割分担させると設計が安定します。ページコンポーネントはデータの取得と状態の保持を担当する賢い親です。表示コンポーネントは input() で受け取った値を表示し、操作を output() で通知するだけの、表示に徹する子です。

この分担の御利益は、表示部品の再利用とテストのしやすさです。サービスにも通信にも依存しない表示部品は、値を渡せばどこでも同じように動き、テストも「この値を渡したらこう表示される」を確認するだけで済みます。データ取得の都合が変わっても、修正はページ側だけで完結します。

初学者の落とし穴は、子コンポーネントの中で inject() してサービスを直接触りたくなることです。一見手軽ですが、その部品はサービスに縛られて他の画面で使い回せなくなります。迷ったら「子は Input と Output だけ」を守り、通信や状態は親に寄せましょう。

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

// ── 役割分担のイメージ ──
//
// ProductListPage(ページコンポーネント = 賢い親)
//   ・サービスを inject() してデータを取得する
//   ・画面の状態(選択中の商品など)を signal で持つ
//   ・子から届いた Output を受けて次の処理を決める
//        │  [product]="..."      (addToCart)="..."
//        ▼                        ▲
// ProductCard(表示コンポーネント = 表示に徹する子)
//   ・input() で受け取った商品を表示するだけ
//   ・ボタンが押されたら output() で親に知らせるだけ
//   ・サービスも通信も知らない → どの画面でも使い回せる

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

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

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