Angularのルーティングは、単に画面遷移を制御するだけではなく、アプリのUXやセキュリティ、パフォーマンスにも直結する重要な機能です。
本章では、実践的なアプリケーションで欠かせないルートガードによる認証・認可制御、Lazy Loadingによるモジュールの遅延読み込み、Resolverを用いた事前データの取得について詳しく解説します。
1. ガード機能（認証・認可）
ルートガード（Route Guard）は、特定のルートにアクセスできるかどうかを制御する機能です。Angularでは、以下のようなインターフェースが用意されています：
CanActivate：ルートを表示する前に認可判定CanActivateChild：子ルートの遷移制御CanDeactivate：離脱時に確認CanLoad：Lazy Load対象のモジュールを読み込む前に制御
■ 認証ガードの実装例
ng generate guard auth
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}
canActivate(): boolean {
if (this.auth.isLoggedIn()) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}ルーティング設定（例）：
{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }このようにして、ログインしていないユーザーは/adminにアクセスできないように制御できます。
2. Lazy Loading によるパフォーマンス改善
Lazy Loading（遅延読み込み）は、必要になるまでモジュールを読み込まないようにして、初回ロードを高速化する仕組みです。
特に規模の大きなアプリでは、アプリの立ち上がり速度に大きく貢献します。
■ Lazy Loadルートの定義方法
ルーティング設定（app-routing.module.ts）：
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }この設定により、/adminにアクセスされるまで、adminモジュールは読み込まれません。
■ CanLoadガードとの組み合わせ
Lazy Loadedモジュールへのアクセス前に、ガードをかけることも可能です。
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), canLoad: [AuthGuard] }3. Resolverで事前データ読み込み
Resolverは、ルート遷移前に必要なデータを取得してから画面を表示するための機能です。
これにより、コンポーネント内でngOnInit()で読み込み処理を書く必要がなくなり、コードの分離が可能になります。
■ Resolverの実装例
ng generate resolver user
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { UserService } from './user.service';
@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<Observable<User>> {
constructor(private userService: UserService) {}
resolve(): Observable<User> {
return this.userService.getCurrentUser();
}
}ルーティング設定：
{ path: 'profile', component: ProfileComponent, resolve: { user: UserResolver } }コンポーネント側では、ActivatedRouteからdataとして取得できます：
this.route.data.subscribe(data => {
this.user = data['user'];
});まとめ
ルートガード、Lazy Loading、Resolverといった高度なルーティングテクニックを活用することで、Angularアプリのパフォーマンス、セキュリティ、ユーザー体験を大幅に向上できます。
これらは中〜大規模アプリケーションには欠かせない設計要素であり、構造的なルーティング戦略を支える重要な機能です。
