関数型ルートガード
関数型ガードでルートを保護します
「関数型ルートガード」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
ルートガードとは
ガードはナビゲーションを進めてよいかどうかを判断します。認証が必要なルートを保護したり、フォームから離れる前に確認したり、ロールによってアクセスを制限したりできます。現在のAngularでは関数形式のガードを使用します。クラスではなく、単純な関数です。
CanActivateFn
CanActivateFnは、許可する場合はtrue、ブロックする場合はfalse、リダイレクトする場合はUrlTree、またはこれらを返すobservableやpromiseを返します。
import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';
export const authGuard: CanActivateFn = () => {
const auth = inject(AuthService);
return auth.isLoggedIn();
};guardをルートに接続する
canActivate（配列なので、複数のguardを連結できます）を使ってguardを設定します。
export const routes = [
{ path: 'dashboard', component: DashboardComponent,
canActivate: [authGuard] }
];UrlTreeでリダイレクトする
UrlTree（router.createUrlTreeまたはparseUrlから返されるもの）を返すと、ブロックとリダイレクトを1つの手順で行えます。
export const authGuard: CanActivateFn = () => {
const auth = inject(AuthService);
const router = inject(Router);
return auth.isLoggedIn() ? true : router.parseUrl('/login');
};非同期guard
guardはobservableを返せます。routerは最初の値を待ってから完了します。
export const authGuard: CanActivateFn = () => {
const auth = inject(AuthService);
return auth.checkSession$().pipe(
map(ok => ok ? true : inject(Router).parseUrl('/login'))
);
};guardでルート情報にアクセスする
CanActivateFnはActivatedRouteSnapshotとRouterStateSnapshotを受け取るため、params、data、試行されたURLを読み取れます。
export const roleGuard: CanActivateFn = (route, state) => {
const needed = route.data['role'];
const auth = inject(AuthService);
return auth.hasRole(needed);
};canMatch guard
CanMatchFnは、ルート定義がそもそも一致するかどうかを判断します。feature flagによるルートの切り替えや、許可された場合だけlazy loadする処理に便利です。
import { CanMatchFn } from '@angular/router';
export const featureGuard: CanMatchFn = () =>
inject(FeatureService).enabled('beta');canDeactivate guard
CanDeactivateFnはルートを離れるときに実行されます。未保存の変更の確認に最適です。コンポーネントのインスタンスを受け取ります。
import { CanDeactivateFn } from '@angular/router';
export const unsavedGuard: CanDeactivateFn<FormComponent> =
(component) => component.isPristine() || confirm('Discard changes?');複数のguardを連結する
配列内のすべてのguardがナビゲーションを許可する必要があります。guardはまとめて実行され、いずれかがfalseまたはUrlTreeを返すと、ナビゲーションはブロックまたはリダイレクトされます。
canActivate: [authGuard, roleGuard]
// both must passclass guardよりfunctional guardを使う理由
functional guardはよりシンプルです。@Injectableの定型コードが不要で、inject()を簡単に使え、組み合わせやすく、tree-shakingにも対応しています。classベースのCanActivateインターフェースは非推奨です。
guardと子ルート
canActivateChildを使うと、親のすべての子ルートを1か所で保護でき、各子ルートにguardを繰り返し設定する必要がありません。
{ path: 'admin', canActivateChild: [authGuard],
children: [ /* all protected */ ] }クイックチェック
functional guardについての理解度を確認しましょう。
まとめ：Functional Route Guard
functional guardは、通常の関数でナビゲーションを制御します。
CanActivateFn：許可、ブロック、リダイレクト（UrlTree）を行います。CanMatchFn：ルートがそもそも一致するかを判断します。CanDeactivateFn：離脱を確認します。- サービスには
inject()を使い、guardは配列で連結します。
次はrouterイベントとナビゲーションです。
よくある質問
「関数型ルートガード」レッスンは無料ですか？
はい。「関数型ルートガード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「関数型ルートガード」で何を学びますか？
関数型ガードでルートを保護します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「関数型ルートガード」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。