React ディレクトリ構成: MVVM とコンポーネント分割の最適化

岩佐 孝浩

2023年7月2日

3 min read

React

直近の React プロジェクトで、MVVM (Model - View - ViewModel) アーキテクチャを採用し、Container/Presentational パターンを使用してコンポーネントを整理しました。この記事では、メンテナンス性と可読性を向上させるスケーラブルなディレクトリ構成を紹介します。

以下は設計したディレクトリ構造です。

プロジェクトは主に components、core、features、shared の 4 つのディレクトリで構成されています。

• components
  • 単純で抽象的な共通コンポーネント を含みます。
  • プロジェクト全体で使用され、アプリケーション全体の一部と見なされます。
• core
  • アプリケーションの基盤 を保持し、アプリケーション全体で使用されるユーティリティを含みます。
  • features や shared からアクセス可能ですが、features を参照することはできません。
• features
  • 各ディレクトリは特定の機能を表します。
  • components、core、および shared を参照できますが、それらから 参照されるべきではありません。
• shared
  • 機能固有ではあるがアプリケーション全体には属さない、共有ユーティリティおよびコンポーネントを含みます。
  • 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 アプリケーションを構築する上で不可欠です。MVVM アーキテクチャを採用し、Container/Presentational パターンを活用することで、メンテナンス性とチーム開発の効率を向上させることができます。

Happy Coding! 🚀