【ITニュース解説】Angular 20 Interview Questions and Answers (2025) – Part 3: Forms, Validation & Routing

Angularでユーザーからの入力を受け付ける際、フォームは欠かせない要素である。Angularでは主に二種類のフォームが提供されている。一つはTemplate-Driven Formsで、これはHTMLテンプレート内で直接フォームの構造やバリデーションルールを記述する方法だ。シンプルなフォームや素早く作成したい場合に便利で、AngularのFormsModuleをインポートし、[(ngModel)]という構文を使ってHTML要素とデータの双方向バインディングを行う。また、#ref="ngModel"のように参照変数を使ってコントロールの状態を管理する。

もう一つはReactive Formsと呼ばれ、TypeScriptコード内でフォームの構造やバリデーションルールを定義する方法だ。ReactiveFormsModuleをインポートして利用し、より複雑で動的なフォーム、あるいはテストしやすいフォームを作成する場合に適している。このReactive Formsでは、FormGroup、FormControl、FormBuilderといった主要な要素が使われる。FormControlは、フォームの中の一つの入力フィールド、例えばユーザー名やメールアドレスの入力欄とその値、状態を管理する。FormGroupは、複数のFormControlをまとめてグループ化し、フォーム全体またはフォームの一部分を表現する。そしてFormBuilderは、これらのFormGroupやFormControlを簡単に作成するための便利なサービスである。例えば、this.fb.group({ name: [''], email: [''] })のように簡潔にフォームを定義できる。

Reactive Formsでは、FormControlやFormGroupのコンストラクタに初期値を渡すことで、フォームの初期値を設定できる。フォームをリセットしたい場合は、Reactive Formsではthis.form.reset()を、Template-Driven Formsではフォーム参照変数に対してresetForm()を使う。プログラムからフォームの値を更新したい場合、setValue()を使うとフォームのすべてのフィールドの値を一度に更新できる。一部のフィールドだけを更新したい場合はpatchValue()が便利だ。また、動的にフォームの入力欄を有効にしたり無効にしたりするには、control.disable()やcontrol.enable()といったメソッドを用いる。

フォームのバリデーションには同期と非同期の二つのタイプがある。同期バリデーションは、入力値が変更されたときに即座に実行されるもので、例えば必須入力やメールアドレス形式のチェックなど、その場で結果がわかるものだ。AngularにはValidators.requiredやValidators.emailといった組み込みのバリデーターが用意されており、new FormControl('', [Validators.required, Validators.email])のように簡単に適用できる。一方、非同期バリデーションは、サーバーサイドのデータベースに問い合わせてユーザー名が既に使われているか確認するといった、時間がかかる処理を伴うものだ。これは通常、Observable<ValidationErrors | null>を返す関数として実装される。独自のカスタムバリデーターを作成することも可能で、入力値にスペースが含まれているかをチェックするような関数を定義できる。バリデーションはデフォルトではキー入力ごとに実行されるが、updateOn: 'blur'を設定すると、フィールドからフォーカスが外れたときにのみ実行されるようになる。

フォームの特定の入力フィールドの状態を監視することは、ユーザーインターフェースの改善に役立つ。例えば、入力値が変更されたらdirty、一度でもフォーカスされて離れたらtouched、初期状態のままだとpristineといった状態があり、これらを使ってエラーメッセージの表示タイミングを制御できる。例えば、control.markAsTouched()を呼び出すことで、フィールドが操作された状態にできる。バリデーションエラーは*ngIf="control.errors?.required"のようなディレクティブを使って、条件付きで表示できる。フォーム全体が有効かどうかはform.validプロパティで確認できる。また、フォーム全体に対して複数のフィールド間の整合性をチェックするクロスフィールドバリデーションも、FormGroupにカスタムバリデーターを適用することで実現できる。例えば、パスワードと確認用パスワードが一致しているかといったチェックだ。動的に増減する入力フィールドのリストを扱いたい場合はFormArrayが役立つ。例えば、複数の住所を入力するような場合に使用し、FormArray.push()やFormArray.removeAt()でコントロールを追加したり削除したりできる。フォーム送信は、Template-Driven Formsでは(ngSubmit)イベントで、Reactive Formsではthis.form.valueでフォームの値を取得して行う。非同期データとフォームを連携させる場合には、asyncパイプとObservableを組み合わせることで、データのプリフィルや動的なバリデーションを行うことも可能である。

次に、AngularのRoutingとGuardsのセクションについて解説する。 Angularアプリケーションにおいて、異なる画面（ビュー）間を移動するナビゲーションを管理するのがAngular Routerだ。これは、ユーザーがURLを変更するとそれに応じたコンポーネントを表示するといった、シングルページアプリケーションの体験を可能にする。ルートの設定は、const routes: Routes = [...]という形式で、パスと表示するコンポーネントを対応付けることで行う。例えば、{ path: 'home', component: HomeComponent }と記述する。

ルーティングを設定する際、アプリケーションのルートモジュール（通常AppRoutingModule）ではRouterModule.forRoot()を使い、アプリケーション全体で利用するルートを定義する。一方、特定の機能に特化したモジュール（Feature Module）ではRouterModule.forChild()を使って、その機能モジュール内でのルートを定義する。この使い分けは、モジュールの独立性を保ち、アプリケーションの構造を整理するために重要だ。

アプリケーションのパフォーマンスを向上させるための仕組みとして、「Lazy Loading」と「Preloading」がある。Lazy Loadingは、特定の機能モジュールが必要になったときに初めてそのモジュールを読み込む手法で、アプリケーションの初期起動時間を短縮できる。loadChildrenプロパティを使って設定する。Preloadingは、Lazy Loadingと組み合わせて使われる。初期表示後にバックグラウンドでLazy Loadingされるべきモジュールを事前に読み込んでおくことで、ユーザーが実際にそのモジュールへナビゲートした際の待ち時間をなくし、よりスムーズな体験を提供する。特定のモジュールだけをプリロードするカスタム戦略を作成することも可能だ。

ルートガードは、ユーザーが特定のルートへアクセスできるか、あるいはルートから離脱できるかを制御するためのサービスだ。これは、認証が必要なページへのアクセス制限や、未保存の変更がある場合にページ遷移をブロックするといった場面で非常に役立つ。いくつかの種類のルートガードがある。 CanActivateは、あるルートがアクティブになる（つまり、コンポーネントが表示される）前に、アクセスを許可するかどうかを判断する。CanDeactivateは、現在アクティブなルートから別のルートへ移動する際に、その離脱を許可するかどうかを判断するもので、例えば、入力途中のフォームに未保存のデータがある場合にユーザーに確認を求めるために使える。Resolveは、ルートがアクティブになる前に必要なデータをあらかじめ取得しておくためのガードだ。これにより、コンポーネントが表示された時にはすでにデータが準備できているため、データの読み込みによる遅延を防げる。CanLoadは、Lazy Loadingされるモジュールが実際にロードされるべきかを判断するもので、認証されていないユーザーにはモジュール自体をロードさせないといった強力な制御が可能だ。CanMatchは、特定の条件に基づいてルートがマッチングされるべきかを制御する。

ルート間でデータを渡す方法も重要だ。URLの一部としてデータを渡す「ルートパラメータ」と、URLの末尾に?を付けてキーと値のペアでデータを渡す「クエリパラメータ」がある。例えば、/user/:idのように:idと設定したパスにユーザーIDを渡し、ActivatedRouteサービスを使ってparamsプロパティからその値を取得できる。クエリパラメータは/user?id=1のように渡し、こちらもActivatedRouteからqueryParamsプロパティで取得できる。ActivatedRouteは現在アクティブなルートの情報を提供するサービスである。これらのパラメータはObservableとして提供されるため、変更を購読して利用するのが一般的だ。

プログラムから画面遷移を行いたい場合は、Routerサービスを使ってthis.router.navigate(['/home'])のように記述する。HTMLテンプレートでリンクを生成する場合は、routerLinkディレクティブを使う。これはAngular Routerによる内部的なナビゲーションであり、href属性のようにページ全体をリロードしないため、より高速な画面遷移が可能だ。routerLinkActiveディレクティブは、現在のURLが指定したルートと一致する場合に、リンク要素にCSSクラスを自動的に追加する機能で、ナビゲーションメニューで現在アクティブなページを強調表示する際などに利用される。

アプリケーションで存在しないURLにアクセスされた場合（404エラー）、{ path: '**', component: PageNotFoundComponent }のようにワイルドカードパスを設定することで、専用のページを表示できる。また、特定のパスから別のパスへユーザーを自動的に転送する「ルートリダイレクト」も設定可能だ。例えば、トップページへのアクセスを/homeにリダイレクトしたい場合は、{ path: '', redirectTo: '/home', pathMatch: 'full' }のように設定する。ルート再利用戦略は、すでに訪問したルートのコンポーネントをキャッシュし、再訪時にコンポーネントの再生成をせずに再利用することで、パフォーマンスを向上させる。複雑なルーティングのシナリオでは、親ルートの下に子ルートを配置することで、入れ子になったビュー構造を作成できる。アニメーションAPIをrouter-outletと組み合わせることで、画面遷移時に視覚的なエフェクトを追加することも可能である。

Angularにおけるフォームとルーティングは、ユーザーとのインタラクションとアプリケーションの構造化において、どちらも非常に重要な基盤技術である。これらの概念を理解し使いこなすことは、モダンなウェブアプリケーションを効率的かつ堅牢に開発するために不可欠なスキルとなるだろう。