✈️

AIコーディング時代のReactコンポーネント設計について考えてみた

に公開
zennfes2025ai
tech

はじめに

最近は ChatGPT などの AI を使ってコーディング補助を行う機会が増えていることは言うまでもないが、AI にコンポーネントを書かせるとき、「どこまでをコンポーネント化し、どこを呼び出し側で書くか」 が大きなポイントになってくると思った。

本記事では、AI と相性の良い React コンポーネントの設計手法として、children や ReactNode を活用したシンプルな設計について考えてみたので書いてみようと思う。

結論：childrenで受け取れるように柔軟に作る

通常、コンポーネントを作る際は「柔軟かつ共通化したコード」が正義だと思われている。childrenを使って過度に柔軟な設計してしまうと、使用する側で実装がぶれてしまい、結果読みづらいコードになってしまうからだ。
しかし、今はAIコーディング時代。人間が認識することよりも AIが認識すること のほうが重要視される。
例えば以下のように「props に全部詰め込む」スタイルだと、細かい UI 変更をしたいときに AI に追加指示が必要になる

// 例: props に寄せすぎた設計
type ButtonProps = {
  label: string;
  onClick: () => void;
};
export const Button = ({ label, onClick }: ButtonProps) => (
  <button onClick={onClick}>{label}</button>
);

children を受け取る設計

代わりに、中身は呼び出し側に任せるようにすると柔軟性が上がる
これならラベルにアイコンを入れることも容易。

import { ReactNode } from "react";

type ButtonProps = {
  children: ReactNode;
  onClick?: () => void;
};

export const Button = ({ children, onClick }: ButtonProps) => (
  <button
    className="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600"
    onClick={onClick}
  >
    {children}
  </button>
);

props で渡すもの・children に渡すもの

  • children に渡すべきもの: UI の中身（テキスト、アイコン、複合要素）
  • props に渡すべきもの: 見た目や挙動を制御するフラグやコールバック

例: カードコンポーネント

type CardProps = {
  title: string;
  children: ReactNode;
};

export const Card = ({ title, children }: CardProps) => (
  <div className="border rounded p-4">
    <h2 className="text-lg font-bold mb-2">{title}</h2>
    <div>{children}</div>
  </div>
);

使い方：

<Card title="プロフィール">
  <p>名前: Hibiki</p>
  <p>職業: エンジニア</p>
</Card>

AIコーディングとの相性

  • AI に「Card の中にユーザー情報を書いて」と指示すれば済む
  • 細かい DOM 構造は呼び出し側で書けるため、修正依頼も簡単
  • props が肥大化しにくく、自然に再利用可能

まとめ

  • コンポーネントは シンプルに
  • 中身は children（型は ReactNode）で受け取り、呼び出し側に任せる
  • props は見た目や挙動のみに絞る
  • この設計により、AI に依頼する際も「コンポーネントの枠だけ用意して」と伝えれば十分

結果として、AIコーディングでも人間コーディングでも扱いやすい柔軟な設計になる

Discussion