先生と生徒の会話形式で理解しよう

生徒

「Reactでリスト表示はできるようになったんですが、コードがどんどん長くなってきました…」

先生

「それはリストアイテムを一つのコンポーネントにまとめると、かなり整理できます。」

生徒

「コンポーネントに分けるって、難しそうなイメージがあります。」

先生

「考え方はシンプルです。部品として切り分ける感覚で見ていきましょう。」

1. リスト表示がごちゃごちゃする理由

Reactで配列をmapを使って表示すると、最初はとても分かりやすく感じます。しかし、表示内容が増えてくると、一つのコンポーネントの中に多くの処理やHTMLが書かれてしまいます。

これは、机の上に物を全部広げて作業している状態に似ています。どこに何があるか分かりにくく、修正もしづらくなります。

こうした問題を解決する方法が「コンポーネントに分割する」という考え方です。 Reactでは、画面の部品を小さく分けて整理することが基本になります。

2. コンポーネントとは何か

コンポーネントとは、画面の一部分を担当する部品のことです。ボタン、見出し、リストの一行など、再利用できる単位で作ります。

初心者の方は「新しいファイルを作るのは大変そう」と感じるかもしれませんが、実際にはコードを短くし、読みやすくするための仕組みです。

特にリスト表示では「同じ形の表示を何度も繰り返す」ため、コンポーネント分割との相性がとても良いです。

3. コンポーネントに分割しない場合の例


import React from "react";

function App() {
  const fruits = [
    { id: 1, name: "りんご" },
    { id: 2, name: "みかん" },
    { id: 3, name: "ぶどう" }
  ];

  return (
    <ul>
      {fruits.map(fruit => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

export default App;

（画面に果物の名前が縦に並んで表示されます）

このコードはシンプルですが、表示内容が増えるとmapの中がどんどん長くなります。その結果、どこを修正すればよいのか分かりにくくなります。

4. リストアイテムをコンポーネントに分割する

次に、リストの一行を専用のコンポーネントとして切り出してみます。ここでは「FruitItem」という部品を作ります。


import React from "react";

function FruitItem({ name }) {
  return <li>{name}</li>;
}

export default FruitItem;

このコンポーネントは「名前を受け取って表示する」だけの役割を持っています。役割がはっきりしているため、読みやすくなります。

5. 分割したコンポーネントを使う


import React from "react";
import FruitItem from "./FruitItem";

function App() {
  const fruits = [
    { id: 1, name: "りんご" },
    { id: 2, name: "みかん" },
    { id: 3, name: "ぶどう" }
  ];

  return (
    <ul>
      {fruits.map(fruit => (
        <FruitItem key={fruit.id} name={fruit.name} />
      ))}
    </ul>
  );
}

export default App;

（先ほどと同じように果物の名前が表示されます）

見た目の結果は同じですが、Appコンポーネントの中身はすっきりしました。表示の詳細はFruitItemに任せています。

6. keyはどこに書くのか

初心者がよく迷うポイントが、keyをどこに書くかです。 keyはmapで並べている側、つまり親のコンポーネントで指定します。

子コンポーネントの中にはkeyを書きません。「どの部品を並べているのか」をReactに伝える役割だからです。

このルールを覚えておくと、エラーや警告を避けやすくなります。

7. 少し表示を増やした別パターン


import React from "react";

function UserItem({ user }) {
  return (
    <li>
      {user.name}（年齢：{user.age}）
    </li>
  );
}

export default UserItem;

このように、オブジェクトごと渡して表示内容を増やすこともできます。表示が複雑になるほど、コンポーネント分割の効果が大きくなります。