Reactのディレクトリ構成がわからない人へ｜フォルダ整理の基本から実践まで

こんにちは、とまだです。

みなさん、Reactでアプリを作り始めたとき、どこに何のファイルを置けばいいか悩んだことはありませんか？

今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、Reactのディレクトリ構成について解説します。

この記事を読めば、フォルダ整理の基本的な考え方から、実務で使える具体的な構成まで理解できるようになります。

Reactのディレクトリ構成とは？

簡単に言うと、Reactアプリのファイルやフォルダを整理する方法のことです。

家の本棚を想像してみてください。

小説、漫画、専門書などジャンルごとに分けて置きますよね。

同じように、Reactでもコンポーネントやページ、設定ファイルなどを種類ごとに分けて管理します。

なぜフォルダ整理が大切なのか

適当にファイルを置いてしまうと、後で探すのが大変になります。

特にチームで開発するときは要注意です。

「あのコンポーネントどこだっけ？」 「このファイルはどのフォルダに入れればいいの？」

こんな状況では開発スピードが落ちてしまいます。

だからこそ、最初からきちんと整理しておくことが重要なんです。

基本的なディレクトリ構成

Create React AppやViteを使うと、基本的なフォルダが自動で作られます。

でも、それだけでは実務では足りません。

以下が最もシンプルな構成の例です。

src/
  ├── index.js      // アプリの起点
  ├── App.js        // メインコンポーネント
  ├── components/   // 部品を入れる
  ├── pages/        // ページを入れる
  └── assets/       // 画像などを入れる

各フォルダの役割を見ていきましょう。

componentsには、ボタンやヘッダーなどの部品を入れます。

pagesには、ホーム画面や詳細画面などを入れます。

assetsには、画像やフォントファイルなどを入れます。

小規模プロジェクトの構成例

個人開発や小さなチームなら、シンプルな構成で十分です。

引き出しの整理に例えると、大きく3つに分けるイメージです。

「よく使うもの」「たまに使うもの」「保管しておくもの」

Reactでも同じように考えます。

以下のような構成から始めてみましょう。

my-app/
├── public/
│   └── index.html
└── src/
    ├── App.jsx
    ├── index.jsx
    ├── components/
    │   ├── Header.jsx
    │   └── Button.jsx
    └── pages/
        ├── Home.jsx
        └── About.jsx

この構成なら、どこに何があるか一目瞭然です。

新しいコンポーネントを追加するときも迷いません。

中〜大規模プロジェクトの構成例

プロジェクトが大きくなると、もっと細かく分ける必要があります。

図書館のように、大分類・中分類・小分類で整理するイメージです。

実務でよく使われる構成を紹介します。

src/
├── api/              // API通信関連
│   └── fetchUsers.js
├── components/       // 共通コンポーネント
│   ├── common/
│   │   └── Button.jsx
│   └── layout/
│       └── Header.jsx
├── hooks/           // カスタムフック
│   └── useAuth.js
├── pages/           // ページコンポーネント
│   ├── Home/
│   │   ├── index.jsx
│   │   └── Home.module.css
│   └── Users/
│       └── index.jsx
├── utils/           // 便利関数
│   └── formatDate.js
└── styles/          // 全体のスタイル
    └── global.css

それぞれのフォルダの意味を説明します。

apiフォルダには、サーバーとの通信処理をまとめます。

hooksフォルダには、複数のコンポーネントで使い回すロジックを入れます。

utilsフォルダには、日付の整形など汎用的な関数を入れます。

機能別に分ける方法もある

大規模になると、機能ごとにフォルダを作る方法もあります。

例えば、ECサイトなら以下のような構成です。

src/
├── features/
│   ├── auth/        // 認証機能
│   │   ├── components/
│   │   ├── hooks/
│   │   └── api/
│   ├── products/    // 商品機能
│   │   ├── components/
│   │   ├── hooks/
│   │   └── api/
│   └── cart/        // カート機能
│       ├── components/
│       ├── hooks/
│       └── api/
└── shared/          // 共通部分
    ├── components/
    └── utils/

この方法なら、機能ごとに担当を分けやすくなります。

新機能を追加するときも、既存のコードに影響を与えにくいです。

テストファイルの配置

テストコードをどこに置くかも重要です。

主に2つのパターンがあります。

パターン1: コンポーネントと同じ場所に置く

components/
├── Button.jsx
├── Button.test.jsx
├── Header.jsx
└── Header.test.jsx

この方法なら、テストとコンポーネントの対応が分かりやすいです。

パターン2: 別フォルダにまとめる

src/
├── components/
│   ├── Button.jsx
│   └── Header.jsx
└── __tests__/
    ├── Button.test.jsx
    └── Header.test.jsx

こちらは、テストだけを一箇所で管理したい場合に便利です。

どちらを選ぶかは、チームの好みで決めて構いません。

フォルダ整理の3つのコツ

1. 最初はシンプルに始める

いきなり複雑な構成にする必要はありません。

必要に応じて少しずつフォルダを追加していきましょう。

過度に分割すると、かえって管理が大変になります。

2. 再利用できるものは共通化する

同じボタンを何度も作っていませんか？

共通で使えるコンポーネントは、commonフォルダにまとめましょう。

components/
└── common/
    ├── Button.jsx
    ├── Modal.jsx
    └── Loading.jsx

こうすることで、コードの重複を防げます。

修正も一箇所で済むので、メンテナンスが楽になります。

3. チームでルールを決める

「新しいコンポーネントはどこに置く？」 「ファイル名は大文字？小文字？」

こういったルールを最初に決めておきましょう。

README.mdに書いておくと、新しいメンバーも迷いません。

よくある質問と回答

Q: どの構成が正解なの？

A: 絶対的な正解はありません。

プロジェクトの規模やチームの好みで変わります。

大切なのは、みんなが理解しやすい構成にすることです。

Q: フォルダが多すぎて迷子になる

A: その場合は構成を見直すタイミングかもしれません。

似た役割のフォルダをまとめたり、使わないフォルダは削除しましょう。

VSCodeの検索機能も活用すると便利です。

Q: 既存プロジェクトの構成を変更したい

A: 少しずつ変更することをおすすめします。

一気に変えると、動かなくなるリスクがあります。

まずは新機能から新しい構成を試してみましょう。

まとめ

Reactのディレクトリ構成は、本棚の整理と同じです。

使いやすく、探しやすい配置を心がけましょう。

最初はシンプルに始めて、必要に応じて調整していけば大丈夫です。

今回紹介した構成例を参考に、プロジェクトに合った形を見つけてください。

きっと開発がもっとスムーズになるはずです。