Next.jsプロジェクトでのディレクトリ構成には大きく分けて「デコロケーション」と「コロケーション」の2つのアプローチがあります。
それぞれにはメリットとデメリットがあり、プロジェクトの規模やチームの作業スタイルによって最適な選択が変わります。
今回は、これらの違いと使いどころをわかりやすく解説します。
デコロケーション（Decolocation）
概要と特徴
デコロケーションでは、関連するリソース（コンポーネント、スタイル、テスト、APIなど）を別々のディレクトリに配置します。
これは、特に小規模なプロジェクトや、特定の種類のファイルを一箇所で一元管理したい場合に有用です。
具体的なディレクトリ構成
- src/
- components/
- pages/
- styles/
- tests/
- api/
- docs/// デコロケーション（機能別にディレクトリを配置）
src/
├─ features/
│ ├─ FeatureA.tsx # 機能A
│ ├─ FeatureB.tsx # 機能B
│ └─ SubComponent.tsx # サブコンポーネント
│
├─ components/ # 共通コンポーネント
│ ├─ SharedComponent.tsx # 共有コンポーネント
│ └─ ...
│
├─ styles/ # スタイルファイル
│ ├─ FeatureA.styles.ts
│ ├─ SubComponent.styles.ts
│ ├─ SharedComponent.styles.ts
│ └─ ...
│
└─ tests/ # テストファイル
├─ FeatureA.test.ts
├─ SubComponent.test.ts
├─ SharedComponent.test.ts
└─ ...メリットとデメリット
メリット
- 一元管理: 同じ種類のファイルが一箇所にまとまっているため、一覧性が高く管理が容易です。
- 小規模プロジェクト向け: プロジェクトが小規模であれば、この方法で十分に管理が行えます。
デメリット
- 関連性が低い: 関連するファイルが物理的に離れているため、開発時に多くのディレクトリを行き来する必要があります。
- スケーラビリティの問題: プロジェクトが大きくなると、管理が煩雑になる可能性があります。
コロケーション
概要と特徴
コロケーションでは、関連するリソースを一箇所にまとめます。これにより、プロジェクトの可読性と保守性が向上します。特に大規模なプロジェクトや複数人での開発において有用です。
具体的なディレクトリ構成
- src/
- pages/
- Home/
- components/
- Button/
- api/
- User/// コロケーション（関連するファイルを近くに配置）
src/
├─ features/
│ ├─ FeatureA.tsx # 機能A
│ ├─ FeatureB.tsx # 機能B
│ └─ SubComponent.tsx # サブコンポーネント
│
├─ components/ # 共通コンポーネント
│ ├─ SharedComponent.tsx # 共有コンポーネント
│ └─ ...
│
├─ styles/ # スタイルファイル
│ ├─ FeatureA.styles.ts
│ ├─ SubComponent.styles.ts
│ ├─ SharedComponent.styles.ts
│ └─ ...
│
└─ tests/ # テストファイル
├─ FeatureA.test.ts
├─ SubComponent.test.ts
├─ SharedComponent.test.ts
└─ ...
メリットとデメリット
メリット
- 可読性: 関連するファイルが近くにあるため、コードの流れが理解しやすい。
- 保守性: 一箇所にまとまっているため、変更やリファクタリングが容易です。
- 開発速度: ファイルの行き来が減少し、開発がスムーズに行えます。
デメリット
- 複雑性: 大規模なプロジェクトで多くの関連ファイルが一箇所に集まると、そのディレクトリ自体が複雑になる可能性があります。
- ファイル探索: 関連ファイルが多い場合、特定のファイルを見つけるのが少し難しくなるかもしれません。
結論: どちらを選ぶべきか？
- 小規模プロジェクト: デコロケーションが適しています。管理がシンプルで、必要なリソースがすぐに見つかります。
- 大規模プロジェクトや複数人での開発: コロケーションが有用です。可読性と保守性が高く、開発効率も向上します。
プロジェクトの規模、チームの作業スタイル、将来のスケーラビリティなどを考慮して、最適なディレクトリ構成を選びましょう。
おまけ：デコロケーション、コロケーションの具体的なディレクトリ構成
最後に、Todoアプリを作成する場合のディレクトリ構成を、デコロケーション、コロケーションをもちいて作成します。
// デコロケーション
src/
├─ pages/ # ページコンポーネント
│ ├─ HomePage.tsx # ホームページ
│ ├─ TodoListPage.tsx # Todoリストページ
│ └─ AboutPage.tsx # アバウトページ
│
├─ components/ # 共通コンポーネント
│ ├─ Navbar/ # ナビゲーションバー
│ │ ├─ index.tsx
│ │ ├─ index.module.css
│ │ └─ ...
│ ├─ TodoItem/ # Todo項目コンポーネント
│ │ ├─ index.tsx
│ │ ├─ index.module.css
│ │ └─ ...
│ └─ Button/ # ボタンコンポーネント
│ ├─ index.tsx
│ ├─ index.module.css
│ └─ ...
│
├─ styles/ # スタイルファイル
│ ├─ common.module.css # 共通スタイル
│ └─ ...
│
└─ types/ # 型定義ファイル
├─ commonTypes.ts # 共通型定義
└─ ...
// コロケーション
app/
├─ (root)/ # ドメインルート用ディレクトリ
│ ├─ page.tsx # ドメインルートのページ
│ ├─ _components/ # ドメインルート専用のコンポーネント
│ │ └─ Navbar/ # ナビゲーションバー用コンポーネント
│ │ ├─ index.tsx
│ │ ├─ index.module.css
│ │ └─ ...
│ └─ _types/ # ドメインルート専用の型定義
│ └─ types.ts
│
├─ TodoList/ # Todoリストページ用ディレクトリ
│ ├─ page.tsx # Todoリストのページ
│ ├─ _components/ # Todoリスト専用のコンポーネント
│ │ ├─ TodoItem/ # 各Todo項目用コンポーネント
│ │ │ ├─ index.tsx
│ │ │ ├─ index.module.css
│ │ │ └─ ...
│ │ └─ ...
│ └─ _types/ # Todoリスト専用の型定義
│ └─ types.ts
│
├─ About/ # アバウトページ用ディレクトリ
│ └─ page.tsx # アバウトページ
│
components/ # 共通コンポーネント用ディレクトリ
├─ Button/ # 汎用ボタンコンポーネント
│ ├─ page.tsx
│ ├─ index.module.css
│ └─ ...
│
types/ # 全体的な型定義用ディレクトリ
└─ globalTypes.ts # アプリ全体で使用する型定義
