React ディレクトリ構成: MVVM および Container/Presentational
Takahiro Iwasa
2 min read
React
Next.js を使用しないプロジェクトで、 React のディレクトリ構成を検討しました。 備忘録として残しておきます。
ディレクトリ構成
URL Copied!
以下のようなディレクトリ構成にしました。
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/