初心者でもわかるReactのディレクトリ構成

フロントエンド開発•2025/1/26

はじめに

Reactを使ってWebアプリケーションを開発する際、どうやってフォルダやファイルを整理すればよいか迷うことはありませんか。初心者の方ほど、好きな場所にファイルを置いてしまいがちですが、実務でコードを共同開発する場合や規模が大きくなる場合には慎重な構成が求められます。とはいえ、何も難しく考えすぎる必要はありません。 Reactにおけるディレクトリ構成は、基本的に「可読性が高く」「複数人で管理しやすい」ことを意識すれば大きく外すことはないでしょう。この記事では、Reactのディレクトリ構成にフォーカスして、具体的なフォルダ分けの例や、それぞれの役割について解説していきます。

この記事を読むとわかること

Reactディレクトリ構成の基本的な考え方
小規模・大規模で変わる構成の違い
実務でよく使われるフォルダ分けの一例
テストや設定ファイルの扱い方

ここから先を読むことで、皆さんがReactでアプリを作る際に迷わずフォルダを整理できるようになるでしょう。では、さっそくReactディレクトリ構成の要点を見ていきましょう。

Reactディレクトリ構成の基本

初めてReactを使うとき、多くの方がCreate React AppやViteなどのツールを使用して環境をセットアップするのではないでしょうか。これらのツールを利用すると、基本的な構成や最低限必要なフォルダが自動生成されます。しかし実務で運用しやすい形にするには、さらにコンポーネントやページごとにフォルダを整備していく必要があります。

Reactのディレクトリ構成は、あらかじめ決まった「絶対の正解」があるわけではありません。プロジェクトの規模や開発チームの方針によって、フォルダやファイルの配置は変わってきます。それでも、一定の考え方やベストプラクティスは存在しますので、ここでは「最もよくある基本形」として押さえておきたいポイントを紹介します。

ディレクトリ分割のメリット

フォルダを細かく分けると、コードを見たときに役割がひと目でわかるようになります。コンポーネント単位や機能単位でまとめることで、ファイルを探す時間を短縮しやすくなるでしょう。特に複数人での開発では、誰が見ても即座に「このフォルダには何が入っているか」を把握できるのが重要です。

また、将来的にコンポーネントが増えた場合でも、ディレクトリがしっかり整理されていれば迷子になる確率は下がります。それにより、リファクタリングのしやすさにもつながるのがメリットといえそうです。

ディレクトリ構成の実務における活用

ここからは、Reactのディレクトリ構成を実務で活かすにはどのように考えるとよいのかを、もう少し具体的に解説していきます。小規模プロジェクトから大規模プロジェクトまで、規模に応じた一例を見ていきましょう。

フォルダ分割を複雑にしすぎると、かえって管理が難しくなることがあります。はじめはなるべくシンプルにしておき、必要に応じて柔軟に作り変えていくのが無理のない方法ではないでしょうか。

小規模プロジェクトの場合

小規模なプロジェクトは、まずは最小限の構成からスタートしがちです。以下のように、フォルダを大きく分けず「components」「pages」などをひとまとめにしておくやり方がよくあります。

src
- index.js (エントリーポイント)
- App.js (メインコンポーネント)
- components
- pages
- assets

この程度の分割であれば、数人のチームで動かす案件でもそこまで苦労しないはずです。コンポーネントが少ないうちは、ひとつのコンポーネントファイルが肥大化するリスクは低いかもしれません。しかし、少しずつ機能が増えてコンポーネントが増大してきた段階で、適度なタイミングでフォルダ構成をアップデートしていくことが重要です。

中規模・大規模プロジェクトの場合

大規模になると、ディレクトリ構成が一気に複雑化します。コンポーネント数が増えるので、「共通コンポーネント」「特定のページ専用コンポーネント」「UIに関する設定」などをフォルダ単位で分割して管理するのが一般的です。

たとえば、大規模プロジェクトだと以下のようにフォルダを分ける場合があります。 APIの呼び出しに関するロジックをまとめたり、ルーティングの設定を専用フォルダに切り分けたりするケースも多いです。


src
├── api
│   └── fetchUsers.js
├── components
│   ├── common
│   │   └── Button.js
│   └── layout
│       └── Header.js
├── hooks
│   └── useWindowSize.js
├── pages
│   ├── Home.js
│   └── Users.js
├── routes
│   └── index.js
├── utils
│   └── formatDate.js
├── App.js
└── index.js

このようにディレクトリを分割しておけば、機能ごとに管理がしやすくなるだけでなく、チームメンバー同士で「どこに何を書けばいいのか」を共有しやすくなります。さらに、コンポーネントの数が増えてきたら「共通化できるもの」「ページ専用」「UI専用」など、粒度を変更しながら整理していくのもよいでしょう。

具体的なフォルダ構成例

ここでは、もう少しコード寄りのサンプルを示しながら、フォルダ構成を眺めてみましょう。あくまで例ですが、小規模から中規模程度のReactアプリであれば、以下のようなレイアウトが考えられます。


my-react-app
├── package.json
├── public
│   └── index.html
└── src
    ├── App.jsx
    ├── index.jsx
    ├── components
    │   ├── Header.jsx
    │   ├── Footer.jsx
    │   └── Button.jsx
    ├── pages
    │   ├── Home.jsx
    │   └── About.jsx
    ├── hooks
    │   └── useCounter.jsx
    ├── contexts
    │   └── ThemeContext.jsx
    ├── utils
    │   └── mathUtils.js
    └── styles
        └── global.css

この構成例を見れば、それぞれのファイルの役割を一目で判断しやすくなるのではないでしょうか。 components フォルダには画面の一部を構成するパーツが集まり、pages にはルーティング単位のページが入ります。共通処理は utils にまとめる、React特有の「状態を共有するコンテキスト」は contexts に置く、というのがよくあるパターンです。

Reactの場合、App.jsx が実際の画面レンダリングを行うメインコンポーネントとして働き、index.jsx がアプリ全体をブラウザに描画するエントリーポイントを担います。これらを分けておくことで、アプリの全体構成を把握しやすくなります。

テストコードや設定ファイルの配置

実務では、テストコードをどう配置するかも大きなポイントです。テストを別フォルダにまとめる人もいれば、コンポーネントと同じフォルダに配置して、近い場所で管理するケースもあるでしょう。一般的には、コンポーネント単位でテストを書きたいときは同じ階層に配置する方が管理が楽だと言われることが多いです。

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

このように、ファイル名に .test をつけるだけでテスト実行ツールが自動的に拾う設定がされている場合もあります。一方で、テストファイルを tests フォルダにまとめて配置するやり方も見られます。開発体制やツールの設定、チームの好みによって変わりますが、管理がしやすいならどちらでも問題ありません。

また、設定ファイルとしては .eslintrc.js や .prettierrc、jsconfig.json などが追加されることがあります。これらを根本ディレクトリ（プロジェクトのルート階層）に置いておくと、プロジェクト全体で使用するルールを明確に共有できます。

フォルダを整理するポイント

Reactディレクトリ構成を考えるときは、アプリケーションがどのくらい拡張される予定か、チーム開発なのか個人開発なのかなど、いくつかの観点を整理してから着手するとスムーズです。ここでは、代表的なポイントをいくつか紹介します。

目的や機能単位で分ける

たとえば、認証やユーザー管理といった大きな機能ごとにフォルダを作り、その中でページやコンポーネントをさらに小分けにしていくアプローチがあります。大規模アプリケーションでは、ドメインごとに分割することでソースコードの見通しがよくなることが多いです。一方、小さなプロジェクトでこの方法を採用しすぎると、フォルダ構成が複雑化する可能性もあるため、バランスを見極める必要があるかもしれません。

再利用性を高める分割

コンポーネントは意外と色々な場面で使い回す機会が出てくるものです。初めに分割を考えなかった結果、「共通化できるはずのボタンが複数ファイルで重複定義されている」という問題が起こりがちです。ですから、共通コンポーネント は components/common のようにひとまとめにしておき、分割できそうな部分は早めに分けておくと管理が楽になります。

コンポーネントの種類別に分類

コンポーネントを容器（Container）と見た目（Presentational）に分ける、あるいはUIライブラリ的な部品を shared フォルダにまとめるなど、種類ごとに分類する方法もよく使われます。見た目とロジックが混ざりすぎると読みにくくなるため、フォルダ階層で分けておくと自然とファイルごとの役割も明確になっていくでしょう。

まとめ

Reactでディレクトリ構成を整えるコツは、「管理のしやすさ」を最優先に考えることです。小規模なら最小限の構成で十分かもしれませんが、成長やチーム開発を見据えるなら、コンポーネントや機能ごとにフォルダを分割しておくと安心感が増します。

また、フォルダやファイルが多くなりすぎると、今度は逆に迷路のようになってしまうこともあるでしょう。そのため、アプリケーションの規模や、各開発者がどこに何を書くかといったルールをはっきりさせながら、段階的に構成を整えるのが実務ではよくある流れです。

結局のところ、Reactディレクトリ構成に「これが絶対に正解」というものは存在しません。チームの人数や開発スピード、扱う機能の範囲などに合わせて、柔軟にフォルダを設計するのがポイントではないでしょうか。この記事を参考に、皆さんの環境に合ったやり方でReactのディレクトリ構成を組み立ててみてください。