Angular 19 面接質問集: Signals、SSR、必修概念

2026年の Angular 面接は、コンポーネントとサービスの枠をはるかに超えています。2024年11月にリリースされた Angular 19 は、安定版 Signals、インクリメンタル ハイドレーション付きの SSR、zoneless change detection という根本的なアーキテクチャの転換をもたらしました。これらの概念を習得していることが、ミドルレベルとシニアレベルの候補者を分ける指標となります。

Angular 19 Signals: 新しいリアクティビティモデル

Signals は、change detection の導入以来、Angular における最も根本的な変化を象徴します。Signal とは、値が変化したときにコンシューマーへ自動的に通知を行う同期的なリアクティブ値です。

よくある質問: 「Signal と RxJS Observable の違いは何ですか?」

期待される回答は、両モデルの違いを明確に区別します。

import { signal, computed, effect } from '@angular/core';

// Signal: synchronous, value always available
const count = signal(0);
const doubled = computed(() => count() * 2); // Recomputed only when count changes

// Effect: reacts to signal changes
effect(() => {
  console.log(`Count: ${count()}, Doubled: ${doubled()}`);
});

count.set(5); // Immediate, synchronous notification

Signals は粒度の細かい依存関係グラフを利用します。retry、debounce、merge などの複雑な非同期ワークフローを扱う RxJS とは異なり、Signals は同期的な UI のリアクティビティを最適化します。Angular 19 では、コンポーネントの状態には Signals を、非同期ストリーム (HTTP リクエスト、WebSocket) には RxJS を使うことを推奨しています。

Signal Inputs と Queries: @Input() からの移行

Angular 19 では、input、output、query 用の signal ベース API が安定化されました。この質問は面接で繰り返し登場します。

よくある質問: 「従来の @Input() を Signal Input にどう移行しますか?」

import { Component, input, computed } from '@angular/core';

@Component({
  selector: 'app-user-card',
  template: `
    <div class="card">
      <h3>{{ fullName() }}</h3>
      <span>{{ role() }}</span>
    </div>
  `
})
export class UserCardComponent {
  // Signal inputs: strict typing, optional default value
  firstName = input.required<string>();
  lastName = input.required<string>();
  role = input<string>('developer'); // Default value

  // Computed derived from inputs: automatically recomputed
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
}

大きな利点として、Signal Inputs は computed() 値を直接作成でき、ライフサイクルフックを必要としません。input の変更に反応するために ngOnChanges を使う必要がなくなります。Angular は移行を自動化するための signal-input-migration schematic を提供しています。

linkedSignal: 依存する状態を同期する

linkedSignal は Angular 19 の試験的 API で、ソースに連動する書き込み可能な signal を作成します。この概念はシニアレベルの面接で頻繁に登場します。

よくある質問: 「linkedSignal で派生したミュータブルな状態をどう扱いますか?」

import { signal, linkedSignal } from '@angular/core';

// Category list that can change
const categories = signal(['frontend', 'backend', 'devops']);

// Linked selection: resets when categories change
const selectedCategory = linkedSignal({
  source: categories,
  computation: (cats) => cats[0] // Reset to first element
});

// Manual modification still possible
selectedCategory.set('backend');

// When categories changes, selectedCategory resets automatically
categories.set(['mobile', 'data', 'cloud']);
// selectedCategory() === 'mobile'

具体的なユースケース: ソースリストが変化したときに選択状態がリセットされるフィルタードロップダウンです。linkedSignal がない場合、このパターンは effect() 内で set() を呼び出す必要があり、更新ループを生む典型的なアンチパターンでした。

Resource API: Signals で非同期データを読み込む

Angular 19 は、非同期データの読み込みに対応する試験的 API である resource を導入しました。この API は、コンポーネント内の従来の service + subscribe パターンを置き換えます。

import { resource, signal } from '@angular/core';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const userId = signal(42);
const http = inject(HttpClient);

// Resource: links a source signal to an async loader
const userResource = resource({
  request: () => ({ id: userId() }),  // Recomputed when userId changes
  loader: async ({ request }) => {
    const response = await fetch(`/api/users/${request.id}`);
    return response.json();
  }
});

// Access in template
// userResource.value()   -> data (or undefined)
// userResource.isLoading() -> boolean
// userResource.error()    -> error if any

面接で resource と rxResource (RxJS 版) の知識を示すことは、技術トレンドへの能動的なキャッチアップを証明します。rxResource は Observable をローダーとして利用するため、既存の RxJS コードベースを持つチームに有用です。

Angular 19 における SSR とインクリメンタル ハイドレーション

Angular 19 は、developer preview のインクリメンタル ハイドレーションによって SSR を次の段階へ進化させます。この機能は Google Search 規模 で検証されており、面接でも頻出のテーマになっています。

よくある質問: 「Angular 19 のインクリメンタル ハイドレーションはどのように動作しますか?」

従来のハイドレーションでは、サーバーレンダリングの後にコンポーネントツリー全体をクライアント側で再構築します。インクリメンタル ハイドレーションでは、可視化または操作対象になった時点で必要なコンポーネントだけをハイドレートします。

import { Component } from '@angular/core';

@Component({
  template: `
    <app-header />
    <app-product-details [id]="productId" />

    <!-- Hydrated only when visible in viewport -->
    @defer (on viewport) {
      <app-reviews [productId]="productId" />
    }

    <!-- Hydrated only on user interaction -->
    @defer (on interaction) {
      <app-comment-form />
    }
  `
})
export class ProductPageComponent {
  productId = 'angular-19-guide';
}

@defer ディレクティブはハイドレーションのタイミングを精密に制御します。利用可能なトリガー: on viewport (可視)、on interaction (クリック、フォーカス)、on idle (ブラウザがアイドル)、on timer(5s) (遅延) です。コンテンツはハイドレーション前も静的な HTML として表示され続け、コンテンツの瞬間的な切り替わりは発生しません。

ルートレベルの render mode: ルートごとの粒度の細かい SSR

Angular 19 はルートレベルの render mode を導入し、同一アプリケーション内で SSR、SSG、CSR を共存させられるようにしました。

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  // Marketing pages: pre-rendered at build time (SSG)
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'pricing', renderMode: RenderMode.Prerender },

  // Dashboard: server-rendered on each request (SSR)
  { path: 'dashboard/**', renderMode: RenderMode.Server },

  // Interactive editor: client-side only (CSR)
  { path: 'editor/**', renderMode: RenderMode.Client },
];

面接では、ルートごとの render mode の選択を正当化できる能力が、パフォーマンス、SEO、インタラクティビティのトレードオフへの理解を示します。静的なページ (ランディング、ブログ) はプリレンダリングの恩恵を受けます。ユーザーデータを伴う動的なページは SSR を使います。インタラクティブ性が高いアプリケーションは CSR のままにします。

Zoneless change detection: Zone.js のないアーキテクチャ

Zoneless change detection は、Angular 19 で最も重要なアーキテクチャ的進化です。シニア面接ではこの質問が必須となっています。

よくある質問: 「Zone.js なしで change detection はどのように機能しますか?」

import { bootstrapApplication } from '@angular/platform-browser';
import {
  provideExperimentalZonelessChangeDetection
} from '@angular/core';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

Zone.js を使わない場合、Angular はブラウザの非同期 API (setTimeout、Promise、addEventListener) にもうパッチを当てません。change detection は Signals 経由でのみ起動します。測定可能なメリット:

• バンドルサイズが 10-15 KB 削減 (zone.js が削除)
• Zone.js のフレームを含まないクリーンなスタックトレース
• ターゲットを絞った change detection: 変更された Signal の影響を受けるコンポーネントのみが再描画される

既定で standalone: NgModules の終焉

Angular 19 は standalone コンポーネントを既定の振る舞いに変更しました。standalone: true フラグはもう必要ありません。この決定はアーキテクチャを単純化し、ボイラープレートを減らします。

よくある質問: 「standalone-by-default は Angular アプリのアーキテクチャにどう影響しますか?」

@Component({
  selector: 'app-dashboard',
  imports: [CommonModule, RouterModule, UserCardComponent],
  template: `
    <nav>
      <a routerLink="/home">Home</a>
    </nav>
    @for (user of users(); track user.id) {
      <app-user-card [firstName]="user.firstName" [lastName]="user.lastName" />
    }
  `
})
export class DashboardComponent {
  users = signal<User[]>([]);
}

各コンポーネントは imports を介して依存関係を明示的に宣言します。NgModules は後方互換性のために利用できますが、新しい Angular 19+ アプリケーションには不要です。面接では、ビッグバン方式ではなくコンポーネント単位の段階的な移行を説明できることが評価されます。

Angular 19 面接のための回答戦略

技術面接官は Angular 19 について3つの観点を評価します。

• アーキテクチャの理解: Signals が Zone.js を段階的に置き換える理由を、使い方だけでなく説明できること
• トレードオフ: computed()、linkedSignal、effect() をどう使い分け、いつ RxJS を残すべきかを把握していること
• 移行: 従来の Angular アプリケーションから Signals と zoneless モードへの段階的な移行戦略を語れること

重要なのは、公式 Angular ドキュメント を暗唱しないことです。各回答は、複雑なフォーム、SSR を伴う EC ページ、リアルタイムダッシュボードなど、実際のプロジェクトに基づく具体的なユースケースで裏付けるべきです。

面接前に Angular の基本概念を整理したい場合は、Angular 面接質問25選の完全ガイド を参照してください。

まとめ

• Angular 19 の Signals は @Input() + ngOnChanges のパターンを、粒度の細かい同期的なリアクティブモデルに置き換えます。signal()、computed()、input() でユースケースの 90% をカバーします
• linkedSignal は、effect() + set() のアンチパターンを使わずにミュータブルな派生状態を解決します
• @defer を介したインクリメンタル ハイドレーションは SEO を犠牲にせず Time to Interactive を短縮します。各コンポーネントはトリガーに従ってハイドレートされます
• zoneless モードはバンドルから Zone.js を取り除き、Signal の影響を受けるコンポーネントだけに change detection を集中させます
• ルートレベルの render mode により、ページごとの要件に応じて同一アプリケーション内で SSG、SSR、CSR を組み合わせられます
• standalone-by-default のコンポーネントは新規アプリケーションで NgModules を不要にします
• 面接では構文よりもトレードオフの説明 (Signals 対 RxJS、SSR 対 CSR、zoneless 対 Zone.js) が重視されます