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

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

Takahiro Iwasa
(岩佐 孝浩)
Takahiro Iwasa (岩佐 孝浩)
3 min read
Angular

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

前提条件

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

ディレクトリ構成

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

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

  • core
    • アプリケーション全体の共通パーツ を含むアプリケーションの基盤
    • features からアクセス可能ですが、 features への参照は持ちません
  • features
    • 各機能
    • coreshared への参照を持つことはできますが、それらからの参照はできません
  • 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.

Takahiro Iwasa
(岩佐 孝浩)

Takahiro Iwasa (岩佐 孝浩)

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