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

Takahiro Iwasa (岩佐 孝浩)

2021年10月29日

3 min read

Angular

最近 Angularプロジェクトで、 MVVM アーキテクチャを採用し、 Container/Presentational に基づいてコンポーネントを分割しました。備忘録として残しておきます。

en.wikipedia.org

Model–view–viewmodel - Wikipedia

Angular アプリケーションを設計する前に、 Angular coding style guide を読むことを強くお勧めします。 これはディレクトリ構成だけでなく、コーディングスタイルに関連する広範なトピックも網羅しています。

angular.io

Angular

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

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

• core
  • アプリケーション全体の共通パーツ を含むアプリケーションの基盤
  • features からアクセス可能ですが、 features への参照は持ちません。
• features
  • 各機能
  • core と shared への参照を持つことはできますが、それらからの参照はできません。
• shared
  • アプリケーション全体ではなく、機能レベルで 共有するパーツ
  • features からアクセス可能ですが、features への参照は持ちません。

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

Coding style guide はディレクトリをできるだけフラットに保つことを推奨していますが、各メインディレクトリに7つ以上のディレクトリが明らかに必要だったので、サブディレクトリを作成しました。

Consider creating sub-folders when a folder reaches seven or more files.