モジュール性と再利用性を高める Angular のプロジェクト構成

core、features、shared の各モジュールに依存の方向を定め、機能を独立させつつ再利用可能なコードを一箇所に集約する Angular のフォルダ構成。

Takahiro Iwasa

2021-10-29

4 min read

ディレクトリ構成

core
- 定数、ガード、インターセプター、モデル、サービスなど、アプリケーションのコアとなる機能を含みます。
- これらは features ディレクトリから参照できますが、features や shared のコンポーネントを参照してはいけません。
features
- 各機能モジュールはここに配置されます。
- これらのモジュールは core や shared を参照できますが、モジュール性を保つために、アプリケーションの他の部分から独立している必要があります。
shared
- ディレクティブ、フォーム、パイプ、サービスなど、再利用可能な部品を含みます。
- これらは features から利用可能ですが、features を参照してはいけません。

Directory Structure

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

Angular のコーディングスタイルガイドではフラットなディレクトリ構成を推奨していますが、フォルダ内のファイル数が 7 を超えたらサブディレクトリの導入を検討すべきです。

Consider creating sub-folders when a folder reaches seven or more files. – Angular coding style guide

参考

Angular コーディングスタイルガイド

まとめ

Angular アプリを core、features、shared のディレクトリに整理し、それぞれに依存の方向を定めれば、機能モジュールを独立させつつ、再利用可能なコードを一箇所に集約できます。この構成を支えているのは、依存の方向を一方通行に保つというルールです。core は決して features や shared を参照してはならず、features は core と shared に依存できますが、機能同士で直接依存し合うことはできません。この一方通行の流れこそが、各機能モジュールの境界を予測可能にしています。つまり、ある機能に固有でないものは、機能間で直接インポートするのではなく core か shared に置くべきということです。スタイルガイドが挙げている「7 ファイル」という閾値は、shared/services や core/guards フォルダがさらに分割すべきほど混み合ってきたかどうかを判断する目安として妥当なものです。