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

Angular アプリケーションを core、features、shared に分け、依存関係の境界を明確にするフォルダ構成を紹介します。

Takahiro Iwasa

2021-10-29

3 min read

ディレクトリ構成

core
- 定数、ガード、インターセプター、モデル、サービスなど、アプリケーション全体で使用する機能を含みます。
- features から参照できますが、core から features や shared のコードを参照してはいけません。
features
- 機能モジュールごとにディレクトリを作成します。
- 各機能モジュールは core や shared を参照できますが、機能モジュール同士は独立させます。
shared
- ディレクティブ、フォーム、パイプ、サービスなど、再利用可能なコードを含みます。
- features から利用できますが、shared から 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 を参照せず、各機能モジュールは core と shared を利用できますが、別の機能モジュールには直接依存しません。特定の機能だけに属さないコードは、別の機能からインポートせず、core または shared に配置します。

スタイルガイドが示す 7 ファイルという基準は、shared/services や core/guards などを小さなサブディレクトリへ分割する目安になります。

記事一覧に戻る