サンプルのディレクトリ構成を紹介します
では、Webフロントエンドではどのようなディレクトリ構成が一般的なのでしょうか。実はフロントエンドのディレクトリ構成は自由度が高く、これといった決まりや一般的な答えはありません。新規開発のプロダクトではFeature-Sliced Designというディレクトリ構成を取り入れるケースも増えているものの、ずっと前から存在するサービスではこの限りではありません。よって「現場による」としか言えないのが現状です。しかし、慣習や傾向はあります。よく使われるディレクトリ名をいくつか覚えていれば、「ここにはこれがあるんだな」と当たりがつくようになります。
そこで本記事では、できるだけ頻出する構成を採用した以下のような仮想のReactアプリケーションのディレクトリ構成を使って解説していきます。
my-app/ ├── dist/ # JS,CSSのビルド成果物 ├── public/ # 静的ファイル（画像、faviconなど） ├── src/ │ ├── components/ # 再利用可能なUIコンポーネント │ │ ├── common/ # 共通コンポーネント（例: ボタン、入力フィールド） │ │ └── layout/ # レイアウト関連のコンポーネント（例: ヘッダー、フッター） │ ├── features/ # 機能ごとのディレクトリ │ │ └── featureName/ │ │ └── (後述) # このディレクトリは後述します │ ├── pages/ # ページコンポーネント（ルーティングに対応） │ ├── hooks/ # グローバルに使用するカスタムフック │ ├── libs/ # 外部ライブラリを呼び出すコード（DBやUAの判定処理など） │ ├── routes/ # ルーティング設定 │ ├── services/ # APIクライアントなど │ ├── store/ # （もしあれば）状態管理（ReduxやRecoilなど） │ ├── styles/ # グローバルスタイルやテーマ │ ├── types/ # グローバルな型定義 │ └── utils/ # グローバルなユーティリティ関数。commonと名付けられることも ├── .env # 環境変数 ├── package.json # プロジェクトの依存関係とスクリプト ├── tsconfig.json # TypeScriptの設定 └── README.md # プロジェクトの概要
ただし、現場のアプリケーションはこのディレクトリと全く同じ構成ではないため、適宜読みかえてください。
では、各ディレクトリの詳細を順番に見ていきましょう。
ルートディレクトリ（プロジェクトルート）
まずはプロジェクトルートです。先ほどの例から該当の箇所を抜き出して、上から順番に解説します。
my-app/ ├── dist/ # JS,CSSなどのビルド成果物 ├── public/ # 静的ファイル（画像、faviconなど） ├── src/ ├── .env # 環境変数 ├── package.json # プロジェクトの依存関係とスクリプト ├── tsconfig.json # TypeScriptの設定 └── README.md # プロジェクトの概要
ビルドの成果物を配置するためのdistディレクトリ
distはdistributionの略語であり、配布という意味です。ここにはJS, CSS, SVGといったアセットをビルドした成果物が格納されます。TypeScriptのコードをJavaScriptコードに変換するコンパイラであるtscや、モジュールバンドラであるViteをデフォルトの設定で実行するとdistディレクトリが生成されます。ただし、Next.jsであれば.next、Remix[1]であればbuildのようにフレームワークに応じてdistではない名前のディレクトリが出力先となることもあります。
このdistディレクトリの成果物がサーバーやCDNに配置されて、クライアントに配信されます。その後ブラウザでJavaScriptが実行されてフロントエンドのアプリケーションが起動するため、distは重要な役割を果たします。なお、Next.jsやRemixといったSSR（サーバーサイドレンダリング）が可能なフレームワークを使うと、サーバーで実行されるコードもここに出力されます。
静的ファイルを置くためのpublicディレクトリ
サーバーから配信するための画像やfaviconといった静的ファイルを配置するディレクトリです。中・大規模なアプリケーションの場合、静的ファイルはS3などに配置するためpublicディレクトリは採用されず、どちらかというと小規模のアプリケーションにある印象があります。
package.jsonやツールの設定ファイルを置くルートディレクトリ
package.jsonはプロジェクト名や外部モジュールの依存関係、実行できるスクリプトなどを記述した設定ファイルです。これはルートディレクトリに一つだけ配置されます。
その他には、TypeScriptの設定ファイルであるtsconfig.jsonや、LinterであるESLintやFormatterであるPrettier（または両方の機能を併せ持つBiome）の設定ファイル、モジュールバンドラであるViteやWebpackの設定ファイルなど、プロジェクト全体に関わるツールの設定ファイルが配置されます。.envといった環境変数を書き込むファイルもここに置かれます。
ただし、コンポーネントやロジックのコードを少し書き換える程度であれば、これらのファイルはあまり気にしなくても問題ありません。
次にsrcディレクトリの内容を解説します。
[1]RemixはReact Routerに統合されました（React Router v7から）。ただし、本稿では一定のディレクトリ構成を持ったフレームワークだった面を強調したいためあえてRemixと記述しています。
