モジュール性と再利用性を高めるReactプロジェクト構成

Reactプロジェクトをcomponents、core、features、sharedの各ディレクトリに分割し、それぞれに明確な依存方向を持たせる。

Takahiro Iwasa

2023-07-02

3 min read

ディレクトリ構成

components
- シンプルで抽象的な共通コンポーネントを格納します。
- これらのコンポーネントはプロジェクト全体で使用され、アプリケーション全体で使うパーツとみなせます。
core
- アプリケーション全体で使うユーティリティを含む、アプリケーションのコア機能を保持します。
- featuresとsharedからアクセス可能ですが、featuresを参照してはいけません。
features
- 各機能モジュールがここに置かれます。
- これらのモジュールはcomponents、core、sharedを参照できますが、モジュール性を保つためアプリケーションの他の部分からは切り離されている必要があります。
shared
- 共有ユーティリティとコンポーネントを含みます。
- featuresからアクセス可能ですが、それらを参照してはいけません。

src/
├── assets/
├── components/
│   ├── Elements/
│   ├── Forms/
│   ├── Layouts/
│   ├── Modals/
│   ├── Pages/
│   │   ├── Errors/
│   │   │   ├── AccessDeniedPage.tsx
│   │   │   ├── NotAuthenticatedPage.tsx
│   │   │   ├── SystemErrorPage.tsx
│   │   │   ├── ...
│   │   ├── ErrorBoundary.tsx
├── core/
│   ├── api/
│   │   ├── interceptors/
│   ├── config/
│   ├── hooks/
│   ├── loaders/
│   ├── models/
│   │   ├── api/
│   ├── stores/
│   ├── utils/
├── features/
│   ├── auth/
│   ├── .../
├── shared/

まとめ

Reactプロジェクトをcomponents、core、features、sharedの各ディレクトリに分割し、それぞれに明確な依存方向を持たせることで、UIプリミティブ、アプリケーション全体のロジック、機能ごとのコードが互いに混じり合うのを防げます。この構成を一般的なcore/features/sharedの分割と分けているのが、追加されたcomponents層です。これはボタンやレイアウト、モーダルといったアプリケーション全体のUIプリミティブを、再利用可能な非visualなユーティリティやロジックを意図したsharedから切り離す役割を果たします。この区別は実務上重要です。プロジェクトが成長するにつれ、「このボタンのバリエーションはcomponentsとsharedのどちらに置くべきか」という問いがあいまいになるのを防いでくれます。答えは常に、それがUI要素かどうかによって決まり、いくつの機能が使っているかによって決まるわけではないからです。