Angular ディレクトリ構成: MVVM とコンポーネント分割の最適化
はじめに
直近の Angular プロジェクトで、MVVM (Model - View - ViewModel) アーキテクチャを採用し、コンテナ / プレゼンテーショナル パターンを使用してコンポーネントを整理しました。この記事では、メンテナンス性と可読性を向上させるスケーラブルなディレクトリ構成を紹介します。
前提条件
ディレクトリ構成について深く掘り下げる前に、Angular coding style guide を確認してください。この投稿では、ディレクトリ構成やコーディングのベストプラクティスを含む、さまざまな Angular 開発トピックについて包括的なアドバイスを提供しています。
ディレクトリ構成
以下は、Angular プロジェクトに実装したディレクトリ構成です。core、features、shared の 3 つの主要なディレクトリに分割されています。
src/
|-- app/
| |-- core/
| | |-- constants/
| | |-- decorators/
| | |-- guards/
| | |-- interceptors/
| | |-- interfaces/
| | | `-- api/
| | |-- models/
| | |-- resolvers/
| | |-- services/
| | | `-- api/
| | `-- validators/
| |-- features/
| | |-- auth/
| | | |-- password-reset/
| | | |-- sign-in/
| | | |-- sign-up/
| | | |-- verify/
| | | |-- auth.module.ts
| | | |-- auth.service.ts
| | | `-- auth-routing.module.ts
| | `-- .../
| |-- shared/
| | |-- components/
| | |-- directives/
| | | |-- attribute/
| | | `-- structural/
| | |-- forms/
| | | |-- input/
| | | |-- select/
| | | `-- .../
| | |-- pipes/
| | `-- services/
| |-- app.component.ts
| |-- app.module.ts
| `-- app-routing.module.ts
|-- assets/
|-- environments/
|-- styles/
|-- tests/
|-- theme/
`-- global.scss
ディレクトリの詳細
-
core
アプリケーション全体で使用される機能を含みます。たとえば、定数、ガード、インターセプター、モデル、サービスなどです。これらはfeaturesディレクトリからアクセス可能ですが、featuresやsharedコンポーネントを参照してはなりません。 -
features
各 機能モジュール がここに格納されます。これらのモジュールはcoreまたはsharedを参照することができますが、アプリケーションの他の部分とは分離してモジュール性を維持する必要があります。 -
shared
再利用可能なパーツ (例: directives, forms, pipes, services) を格納します。これらはfeatures内で利用可能ですが、featuresを参照してはいけません。
サブディレクトリの使用理由
Angular coding style guide は、ディレクトリをフラットに保つことを推奨していますが、7 つ以上のファイルを超える場合にはサブディレクトリを検討すべきです。これにより、大規模なプロジェクトでの可読性と構造化が向上します。
Consider creating sub-folders when a folder reaches seven or more files. – Angular coding style guide
まとめ
適切に設計されたディレクトリ構成は、スケーラブルな Angular アプリケーションを構築する上で不可欠です。MVVM アーキテクチャを採用し、コンテナ / プレゼンテーショナルパターンを活用することで、メンテナンス性とチーム開発の効率を向上させることができます。
Happy Coding! 🚀
