ディレクトリ構成と役割について

はじめに

Reactプロジェクトを始める際、ディレクトリ構成は非常に重要な要素です。この記事では、初心者から中級者まで、どのようにディレクトリを整理し、効率的にプロジェクトを運営するかについて説明します。

Create React Appのデフォルトのディレクトリ構成

Create React Appを使用して新しいプロジェクトを作成すると、以下のようなディレクトリ構成が生成されます。

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── src/
│   ├── App.js
│   ├── index.js
│   ├── App.css
│   ├── index.css
│   ├── App.test.js
│   ├── logo.svg
│   └── serviceWorker.js
├── package.json
├── README.md
└── package-lock.json (または yarn.lock)

node_modules/

このディレクトリはプロジェクトで使用するnpmパッケージが保存されます。このフォルダは通常Gitには追加しません。

public/

このフォルダには静的なリソースが格納されます。index.htmlは主に一つのHTMLファイルを持つSPA（シングルページアプリケーション）でよく使われます。

• index.html: メインのHTMLファイル。この中の<div id="root"></div>がReactアプリのマウントポイントです。
• favicon.ico: ウェブサイトのアイコンです。
• manifest.json: PWA（Progressive Web App）の設定ファイル。

src/

アプリケーションのソースコードとReactコンポーネントがこのディレクトリに保存されます。

• App.js: メインのReactコンポーネントです。
• index.js: JavaScriptのエントリーポイント。ここでReactDOM.render()メソッドを使ってReactコンポーネントをHTMLに描画します。
• App.cssとindex.css: スタイルシートです。

カスタムディレクトリ構成

コンポーネントを整理

大規模なプロジェクトでは、src/components/ディレクトリを作成し、それぞれのコンポーネントを整理します。

src/
├── components/
│   ├── Header/
│   │   ├── index.js
│   │   └── style.css
│   └── Footer/
│       ├── index.js
│       └── style.css

Reduxの場合

Reduxを使用している場合、src/redux/というディレクトリを作成して、actions/, reducers/, middlewares/などを格納するのがよく見られます。

src/
├── redux/
│   ├── actions/
│   │   └── index.js
│   ├── reducers/
│   │   └── index.js
│   └── middlewares/
│       └── index.js

設定ファイルのカスタマイズ

特定のディレクトリ構成に依存する設定があれば、それに合わせて設定ファイルを変更する必要があります。

Webpackの場合

webpack.config.jsを開き、エントリーポイントやアウトプットの設定を変更します。

module.exports = {
  entry: './src/new_entry.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  ...
};

このようにReactプロジェクトのディレクトリ構成とそのカスタマイズ方法には多くの選択肢があります。
プロジェクトの規模やチームの要件に応じて最適な構造を選ぶことが重要です。