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.
Involved in the requirements definition, design, and development of cloud-native applications using AWS. Now, building a new prescription data collection platform at KAKEHASHI Inc. Japan AWS Top Engineers 2020-2023.