React ディレクトリ構成: MVVM および Container/Presentational

Takahiro Iwasa (岩佐 孝浩)

2023年7月2日

2 min read

React

Next.js を使用しないプロジェクトで、 React のディレクトリ構成を検討しました。備忘録として残しておきます。

以下のようなディレクトリ構成にしました。

4つの主要ディレクトリ components, core, features, shared に分割しています。

• components
  • シンプルで抽象的なコンポーネント
  • 異なるプロジェクトやアプリケーション全体で共有
• core
  • アプリケーション全体の共通パーツ を含むアプリケーションの基盤
  • features と shared からアクセス可能ですが、 features への参照は持ちません。
• features
  • 各機能
  • components, core, shared への参照を持つことはできますが、それらからの参照はできません。
• shared
  • アプリケーション全体ではなく、機能レベルで 共有するパーツ
  • 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/