React プロジェクトのディレクトリ構造最適化: MVVM と Container/Presentational アプローチ

岩佐 孝浩

2023年7月2日

4 min read

React

React 開発において、プロジェクト構造の効果的な設計は、スケーラビリティと保守性に大きく影響します。この投稿では、MVVM の原則と 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! 🚀