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

React プロジェクトを components、core、features、shared に分割し、明確な依存境界を設けます。

Takahiro Iwasa

2023-07-02

3 min read

ディレクトリ構成

• components
  • 要素、フォーム、レイアウト、モーダルなどの汎用 UI コンポーネント を格納します。
  • アプリケーション全体から利用でき、特定の機能には依存しません。
• core
  • API クライアント、ストア、モデル、ローダーなど、アプリケーション全体の基盤と設定を格納します。
  • features と shared から参照できますが、features を参照してはいけません。
• features
  • アプリケーションの機能ごとのモジュールを格納します。
  • components、core、shared を参照できますが、機能モジュール同士を直接依存させないようにします。
• shared
  • 複数の機能で使う、再利用可能な非 UI のユーティリティやロジック を格納します。
  • features から参照できますが、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 プリミティブ、アプリケーション基盤、機能ごとのコード、再利用可能な非 UI ロジックを分離できます。

独立した components 層により、ボタン、レイアウト、モーダルなどのアプリケーション共通 UI を、shared に置く非 UI のユーティリティから分離できます。

配置先は利用数ではなく責務で決めます。再利用可能な UI は components、非 UI の共通ロジックは shared、機能固有のコードは各機能モジュールに配置します。

About the author

Takahiro Iwasa

LinkedIn

GitHub

Software Developer

This blog shares technical notes from hands-on projects—architecture, implementation, and AWS service integrations.