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

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

Takahiro Iwasa
(岩佐 孝浩)
Takahiro Iwasa (岩佐 孝浩)
2 min read
React

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

ディレクトリ構成

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

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

  • components
    • シンプルで抽象的なコンポーネント
    • 異なるプロジェクトやアプリケーション全体で共有
  • core
    • アプリケーション全体の共通パーツ を含むアプリケーションの基盤
    • featuresshared からアクセス可能ですが、 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/
Takahiro Iwasa
(岩佐 孝浩)

Takahiro Iwasa (岩佐 孝浩)

Software Developer at KAKEHASHI Inc.
処方箋データ収集基盤の設計・開発・運用に携わっています。