コンポーネント分割の設計

なぜ学ぶか： AIに画面を作らせると、1ファイル500行の巨大コンポーネントが生まれることがあります。動くけれど、読めない・直せない。「どう割るか」の基準を持つと、AIに的確な分割を指示できます。まずは良い分割の例から。

まずはこの例を見てみましょう

// 部品①: 「1行の表示」だけを担当
function PostItem({ post }: { post: Post }) {
  return <li>{post.title}</li>;
}

// 部品②: 「一覧」を担当（0件の場合も含めて）
function PostList({ posts }: { posts: Post[] }) {
  if (posts.length === 0) return <p>まだ投稿がありません</p>;
  return (
    <ul>
      {posts.map((p) => <PostItem key={p.id} post={p} />)}
    </ul>
  );
}

PostList（一覧の係）→ PostItem（1行の係）。名前がそのまま役割の説明になっています。