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

> Angular 19 でよく出る面接質問: Signals、インクリメンタル ハイドレーション、zoneless change detection、新しいリアクティブ API。コード例と期待される回答付きで解説します。

- Published: 2026-03-28
- Updated: 2026-05-04
- Author: Anthony Fillion-Maillet
- Tags: angular, interview, signals, ssr, angular-19
- Reading time: 9 min

---

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

> **2026年に面接官が評価するポイント**
>
> Angular 19 に関する質問は3つの領域を狙います。Signals による粒度の細かいリアクティビティ、インクリメンタル ハイドレーションによる SSR パフォーマンス、Zone.js なしでアプリケーションを設計する能力です。期待される回答は、構文知識だけでなく、アーキテクチャの理解を示すものです。

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

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

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

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

```typescript
// signals-vs-observables.ts
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 にどう移行しますか?」**

```typescript
// user-card.component.ts
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 で派生したミュータブルな状態をどう扱いますか?」**

```typescript
// product-filter.component.ts
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()` を呼び出す必要があり、更新ループを生む典型的なアンチパターンでした。

> **面接の落とし穴: effect() の中で set()**
>
> `effect()` の内部で `signal.set()` を呼び出すのは Angular が検出するアンチパターンです。フレームワークは開発モードで警告を発します。正しい解決策は、派生した値が書き込み可能である必要があるかに応じて、`linkedSignal` または `computed()` を利用することです。

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

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

```typescript
// user-profile.component.ts
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 規模](https://blog.angular.dev/meet-angular-v19-7b29dfd05b84) で検証されており、面接でも頻出のテーマになっています。

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

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

```typescript
// product-page.component.ts
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 を共存させられるようにしました。

```typescript
// app.routes.server.ts
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 はどのように機能しますか?」**

```typescript
// main.ts
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 の影響を受けるコンポーネントのみが再描画される

> **Angular 20.2: zoneless が安定化**
>
> Angular 20.2 から zoneless モードは `provideZonelessChangeDetection()` (Experimental プレフィックスなし) で安定版となりました。面接でこの進化に触れることは、エコシステムへの能動的なキャッチアップを示します。

## 既定で standalone: NgModules の終焉

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

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

```typescript
// dashboard.component.ts
@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 ドキュメント](https://angular.dev) を暗唱しないことです。各回答は、複雑なフォーム、SSR を伴う EC ページ、リアルタイムダッシュボードなど、実際のプロジェクトに基づく具体的なユースケースで裏付けるべきです。

面接前に Angular の基本概念を整理したい場合は、[Angular 面接質問25選の完全ガイド](/blog/angular/top-25-angular-interview-questions) を参照してください。

## まとめ

- 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) が重視されます

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ja/blog/angular/angular-19-interview-questions-signals-ssr-must-know