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

生徒

「Reactのコンポーネントって、どうやって分ければいいんですか？」

先生

「いい質問ですね。Reactでは、コンポーネントを分割して再利用するのが大事なんです。」

生徒

「どういう基準で分けたり、ファイルやフォルダに整理すればいいんですか？」

先生

「それじゃあ、Reactのコンポーネントをどう分割して、再利用しやすく整理するかを丁寧に説明していきますね。」

1. コンポーネントを分割する理由とは？

React（リアクト）では、アプリの画面を「部品（コンポーネント）」という小さな単位で作ります。コンポーネントを分割することで、次のようなメリットがあります。

同じデザインや機能を何度も使いまわせる（再利用性）
1つのファイルが長くなりすぎず、管理がしやすい（可読性）
バグが出たとき、原因の箇所を見つけやすくなる（保守性）

たとえば、ボタンやヘッダー、メニューなどの共通部分を別ファイルにしておくと、複数のページで簡単に使えます。

2. 実際にコンポーネントを分けてみよう

まずは、ボタンだけを別のコンポーネントに分けてみましょう。


// Button.js
import React from "react";

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;


// App.js
import React from "react";
import Button from "./Button";

function App() {
  return (
    <div>
      <h1>ようこそReactへ！</h1>
      <Button onClick={() => alert("クリックされました！")}>
        クリック
      </Button>
    </div>
  );
}

export default App;

（画面に「ようこそReactへ！」と表示され、ボタンを押すと「クリックされました！」というアラートが出ます）

このように、ボタンを「Button.js」として分けておくと、他の画面でも簡単に再利用できます。

3. フォルダ構成のベストプラクティス

Reactでプロジェクトを作るとき、コンポーネントを分けて整理するフォルダ構成がとても大事です。以下は初心者にもおすすめの構成例です。


my-app/
├── src/
│   ├── components/     // コンポーネントを入れる場所
│   │   ├── Button.js
│   │   └── Header.js
│   ├── pages/          // 各画面ごとのファイル
│   │   └── Home.js
│   ├── App.js
│   └── index.js

このようにcomponentsというフォルダを作って、よく使う部品をまとめておくと、後から整理しやすくなります。ページごとの画面はpagesに入れておくと、役割がはっきりして管理しやすくなります。

4. 小さなコンポーネントは1ファイルに、複雑なものはフォルダに

コンポーネントが小さいときは、1つのファイルで十分ですが、大きくなってきた場合は1つのフォルダに分けると良いです。


components/
└── Header/
    ├── Header.js
    ├── Header.css
    └── Header.test.js

このように、CSSやテストファイルも一緒にまとめることで、「Headerコンポーネントはここ！」とすぐに分かります。

5. ファイル名とコンポーネント名を一致させよう

Reactでは、コンポーネント名とファイル名を一致させるのが一般的です。たとえば、Button.jsというファイルにはButtonというコンポーネントを定義します。

これにより、複数人で開発する場合でも誰が見てもすぐに理解できますし、検索もしやすくなります。

6. コンポーネントの再利用を意識しよう

同じUI（見た目）や動作を複数の画面で使いたいときは、まずそれをコンポーネントにすることを意識しましょう。例としては以下のようなものがあります。

ナビゲーションバー
フッター
カード（商品情報やプロフィールなど）
モーダル（ポップアップの画面）

これらは、アプリ全体でよく使うパーツなので、components/commonのように共通フォルダにしておくのもおすすめです。

7. まとめて読み込みたいときはindex.jsを使う

複数のコンポーネントをまとめて管理したいときは、index.jsを使って読み込みを簡単にできます。


// components/index.js
export { default as Button } from "./Button";
export { default as Header } from "./Header";

こうすると、他のファイルでは次のようにまとめて読み込めます。


import { Button, Header } from "../components";

この方法は、コードがスッキリしてメンテナンスがしやすくなる便利なテクニックです。

8. 命名ルールを統一するとミスが減る

Reactプロジェクトでは、以下のように命名ルールを統一すると良いです。

コンポーネント名は大文字ではじめる（例：Button）
ファイル名もコンポーネント名と同じ（例：Button.js）
CSSは同じ名前にしてButton.cssにする

こうすることで、どこに何があるかすぐにわかり、作業ミスも減らせます。

まとめ

Reactのコンポーネント分割と再利用の考え方をふりかえると、アプリケーション全体をひとつの大きな部品として扱うのではなく、画面を小さな単位に分けて積み上げていくことが、効率のよい開発につながるということがあらためて実感できます。コンポーネントを役割ごとに整理してフォルダに配置することで、どの部分がどの機能を持っているのかが視覚的に整理され、後から見返したときに迷うことがありません。とくに、複数ページで繰り返し使うボタンやヘッダー、カード、ナビゲーションバーなどは、共通化しておくことで変更に強くなり、機能追加のたびに同じ部分を何度も書き直す必要がなくなります。こうした再利用可能な構造は、Reactの持つコンポーネント指向の魅力そのものであり、シンプルなコードを保ちながら大規模な開発にも対応できる柔軟性を生み出します。

また、フォルダ構成を整理することの重要性も大きなポイントです。componentsフォルダに共通部品を集め、pagesフォルダに画面単位のファイルをまとめると、役割が明確になって見通しがよくなります。小さなコンポーネントは単一のファイルに収め、大きな機能を持つコンポーネントは専用フォルダにまとめることで、CSS・テストファイル・サブコンポーネントを含めた管理もしやすくなります。さらに、index.jsでまとめてエクスポートしておけば、import文を短く整えられるため、開発効率も大きく向上します。こうした細かな工夫は一見すると小さな違いに思えますが、チーム開発や長期間の保守においては大きな差を生む部分です。

コンポーネント分割を行う際には、単にファイルを増やすのではなく、「ひとつの責任をひとつのコンポーネントに」という意識が重要です。画面の一部分だけを担当し、特定の目的のために存在するコンポーネントは、他の場面でも使いやすくシンプルになります。小さな部品ほど再利用されやすく、組み合わせることで複雑な画面を短いコードで作れるようになります。この性質を活かすためには、命名ルールをそろえることや、他の人が見てすぐに理解できる構成を心がけることが大切です。とくにコンポーネント名とファイル名を一致させるという基本的なルールは、迷いやミスを防ぎ、検索もしやすくなるという実用的なメリットがあります。

実際のReact開発では、アプリの規模やチームの状況にあわせて、構成を少しずつ調整する必要があります。共通化しすぎると逆に複雑になることもありますし、コンポーネントを細かく分けすぎると構造が追いにくくなることもあります。だからこそ、今回学んだような基本の考え方を土台にしながら、自分たちのプロジェクトに適したスタイルを見つけていくことが大切です。小さく始めて少しずつ改善していくことで、Reactのコンポーネント分割は自然と身につき、より柔軟で見通しのよい画面づくりができるようになります。

コンポーネント分割のふりかえりサンプル

最後に、学んだ内容を活かして「カードコンポーネント」を作り、再利用しやすい構造を確認してみましょう。フォルダ内での分割やpropsによるデータ受け渡しの基本が自然に身につくサンプルです。


// components/Card/Card.js
import React from "react";

function Card({ title, description }) {
  return (
    <div className="card p-3" style={{ margin: "10px" }}>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

export default Card;


// pages/Home.js
import React from "react";
import Card from "../components/Card/Card";

function Home() {
  return (
    <div>
      <Card title="プロフィール" description="自己紹介を表示するカードです。" />
      <Card title="商品情報" description="商品の概要を表示するためのカードです。" />
    </div>
  );
}

export default Home;

このように、カードを独立したコンポーネントとして作成しておくと、画面ごとに異なる内容を渡すだけで柔軟にレイアウトを組み立てることができます。propsという仕組みを通して、コンポーネントがひとつの役割を持った部品として機能し、アプリ全体の読みやすさや保守性が大きく向上します。Reactの魅力は、このようなシンプルな仕組みを組み合わせることで、大規模なアプリも効率よく構築できる点にあります。

先生と生徒の振り返り会話

生徒

「コンポーネントを小さく分ける理由がよく分かりました！ひとつの画面を小さな部品の組み合わせで作るって、とても効率的ですね。」

先生

「そうですね。小さく分けておけば、別の画面でもそのまま使えて、修正したいときも一箇所を変えるだけで済むようになります。」

生徒

「フォルダを整理することで、どこに何があるかすぐ分かるのも便利だと思いました。index.jsでまとめる方法も使ってみたいです！」

先生

「まとめてエクスポートしておくとimport文が短くなり、見やすいプロジェクトになります。実践でもよく使うやり方ですよ。」

生徒

「これからは、コンポーネント名やファイル名も意識しながら作ります。名前がそろっていると読みやすさが全然違いますね。」

先生