Angularではアプリケーションの機能をモジュール単位で分割・管理することで、可読性・保守性・パフォーマンスの向上を図ることができます。
本章では、フィーチャーモジュールとLazy Loading、グローバルモジュール・共有モジュールの違い、そしてモジュール分割のベストプラクティスを解説します。
1. フィーチャーモジュールとLazy Loading
フィーチャーモジュール（Feature Module）とは、アプリの機能ごとに分けられた独立したモジュールです。
ルーティングやコンポーネント、サービスを含めてカプセル化することで、大規模開発でも管理しやすくなります。
Angularでは、フィーチャーモジュールを必要なときに読み込む遅延読み込み（Lazy Loading）が可能です。
アプリの初期読み込みを軽量化し、UXの向上に繋がります。
遅延読み込みのルート定義例（app-routing.module.ts）:
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
このように定義することで、/adminにアクセスしたときのみ該当モジュールがロードされます。
2. グローバルモジュールと共有モジュール
■ グローバルモジュール
アプリケーション全体で1回だけインポートし、使いまわすモジュールです。AppModuleなどが該当し、HttpClientModuleやBrowserModuleなどのAngular標準モジュールを含みます。
■ 共有モジュール（SharedModule）
複数のフィーチャーモジュール間で共通利用するコンポーネント・ディレクティブ・パイプなどをまとめるモジュールです。
SharedModuleの例：
@NgModule({
declarations: [CommonButtonComponent, FormatPipe],
imports: [CommonModule],
exports: [CommonButtonComponent, FormatPipe]
})
export class SharedModule {}
必要なフィーチャーモジュールでこのSharedModuleをインポートすれば、定義された機能を再利用できます。
3. モジュール分割のベストプラクティス
- 機能単位（ドメインごと）にモジュールを分ける（例：UserModule、AdminModule）
- 共有部品はSharedModuleにまとめて
exportsで提供 - サービスはルートインジェクション（
providedIn: 'root'）でアプリ全体に提供 - Lazy Loadingを使ってパフォーマンス最適化
- AppModuleは最小限にし、役割を持ちすぎない
以下は構成イメージ例です：
src/
├── app/
│ ├── app.module.ts
│ ├── shared/
│ │ └── shared.module.ts
│ ├── user/
│ │ └── user.module.ts
│ └── admin/
│ └── admin.module.ts
まとめ
Angularでは、モジュールを適切に構成することで、開発効率とアプリのパフォーマンスが大幅に向上します。
フィーチャーモジュールによる機能の分離、SharedModuleによる共通機能の再利用、Lazy Loadingによる読み込み最適化などを活用して、メンテナンス性の高いアーキテクチャを構築しましょう。
