画面を作っていると、親コンポーネントから子コンポーネントへ渡す props が、気づけば5個、6個と増えていることがあります。原因のひとつは、まだ1回しか使っていない部分を、先回りしてコンポーネントに切り出してしまっていることです。

以前「同じボタンを繰り返しコピペしているなら、それは部品化のサイン」という話を書きましたが、あちらは分けるべきなのに分けていない人向けの話でした。今回はその逆で、サインが出る前に先回りして分けてしまう人向けに、そこで起きる副作用を書きます。

「分けすぎ」で起きること

未経験の方によくあるのが、1つの画面を作る途中で「ここも部品にしておいた方がいいかな」と、まだ1回しか使っていないJSXのかたまりを別ファイルに切り出してしまうケースです。

やってみると分かるのですが、これをやると

  • 親から子へ渡す props が増えていく
  • 少し表示を変えたいだけなのに、ファイルを2つ行き来する
  • 「このコンポーネント、どこで使われてるんだっけ」を探す時間が増える

という形で、かえって作業が重くなります。分割そのものが目的化してしまっている状態です。

分ける・分けないの判断基準

AIに実装を手伝ってもらう時代でも、「いつ分けるか」を決めるのは人間の役割です。判断に迷ったら、次の3つで考えると整理しやすいです。

① 同じ見た目を繰り返し書くようになってから分ける

1回しか使っていないなら、まだ1つのファイルの中に書いておいて構いません。大事なのは「まだ使い回していないうちから分けない」という向きで、実際に繰り返し使う場面に出会ってから分けても遅くありません。

② ファイルが長くなってきたら、まとまりで分ける

1ファイルが200〜300行を超えてきたら、機能のまとまり（フォーム部分、一覧表示部分など）で分割を検討します。行数だけを基準にせず、「別々に説明できる塊になっているか」を見るのがコツです。

③ 一度きりの見た目調整のためだけに分けない

「ここだけ余白を変えたい」程度の理由でファイルを分けると、props の受け渡しだけが増えて割に合いません。まずは同じファイル内で調整し、繰り返し使う場面が出てきてから分けても遅くありません。

Before / After

Before（1回しか使っていないのに先に分割）

// UserCard.tsx を最初から作ってしまう
function UserCard({ name, email }: { name: string; email: string }) {
  return (
    <div className="border p-4 rounded">
      <p>{name}</p>
      <p>{email}</p>
    </div>
  );
}

// ページ側
<UserCard name={user.name} email={user.email} />

まだ1箇所でしか使っていないのに、ファイルが分かれているせいで「name と email、他に何を渡せばいいんだっけ」と確認する手間が発生します。

After（実際に使い回す場面が出てから分割）

// 最初はページの中に直接書く
<div className="border p-4 rounded">
  <p>{user.name}</p>
  <p>{user.email}</p>
</div>

// 一覧画面でも同じ表示が必要になった時点で、初めてUserCardとして切り出す

同じ形が実際に繰り返し出てきた時点で切り出すと、「何を props として受け取るべきか」も実物を見比べながら決められるので、設計に迷いません。

AIに分割を頼む時も基準は同じ

Claude CodeなどのAIに「このコンポーネント分けて」と頼むと、律儀に細かく分割してくれることがあります。ここで大事なのは、AIの提案をそのまま受け入れるのではなく、「これは実際に使い回す部品か」「行数的にまとまりで区切れているか」を自分で確認することです。分割の実作業はAIに任せつつ、分割するかどうかの判断は自分で持っておく——この線引きが、AIと組んで開発する上で地味に効いてきます。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全24セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください