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

岩佐孝浩

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/