# 2026年のAngular制御フロー構文：@if、@for、@switch完全ガイドと面接対策

> Angular 17で導入された新しい制御フロー構文（@if、@for、@switch）の詳細解説。従来の構造ディレクティブからの移行方法、パフォーマンス最適化、技術面接で頻出する質問と回答を網羅。

- Published: 2026-09-03
- Updated: 2026-09-03
- Author: Anthony Fillion-Maillet
- Tags: angular, control-flow, template-syntax, angular-17, 面接対策
- Reading time: 12 min

---

Angularの制御フロー構文（`@if`、`@for`、`@switch`）は、長年Angularテンプレートで使用されてきた構造ディレクティブ（`*ngIf`、`*ngFor`、`*ngSwitch`）を置き換えるものです。Angular 17で導入され、Angular 18で安定版となり、Angular 22ではデフォルトの構文として採用されています。このブロックベースの構文により、テンプレートは標準的なプログラミング構文に近づき、パフォーマンスの最適化も容易になりました。

> **マイグレーションツール**
>
> `ng generate @angular/core:control-flow`を実行すると、既存のテンプレートを構造ディレクティブから新しい制御フロー構文に自動変換できます。移行期間中は両方の構文が共存可能ですが、`ngIf`、`ngFor`、`ngSwitch`はAngular 19以降非推奨となっています。

## Angularが構造ディレクティブをブロック構文に置き換えた理由

構造ディレクティブには、`CommonModule`のインポートが必要、JavaScriptとは異なるマイクロ構文の使用、複雑な条件分岐では`ng-template`でラップする必要があるなど、いくつかの課題がありました。新しい制御フロー構文はこれらの問題を解決します：

- インポート不要：`@if`、`@for`、`@switch`はフレームワークに組み込まれている
- JavaScriptライクな構文：条件式やループが標準的なコードのように読める
- ネイティブな`@else`サポート：else分岐のために`ng-template`参照が不要
- より良いツリーシェイキング：使用されない制御フローブロックはバンドルサイズに影響しない

[Angular公式ドキュメント](https://angular.dev/guide/templates/control-flow)では、すべての新規プロジェクトでブロック構文を完全に採用し、既存のコードベースは段階的に移行することを推奨しています。

## @if：ng-template不要の条件付きレンダリング

`@if`ブロックは、真偽値の式に基づいてコンテンツを条件付きでレンダリングします。`*ngIf`とは異なり、`@else if`と`@else`分岐を直接サポートします：

```typescript
// user-status.component.ts
import { Component, input } from '@angular/core';

@Component({
  selector: 'app-user-status',
  template: `
    @if (user().role === 'admin') {
      <app-admin-panel />
    } @else if (user().role === 'editor') {
      <app-editor-panel />
    } @else {
      <app-viewer-panel />
    }
  `
})
export class UserStatusComponent {
  user = input.required<{ role: string }>();
}
```

`@if`ブロックは`as`キーワードによる変数エイリアスもサポートしており、ネストされた式から値を抽出できます：

```html
<!-- プロパティへの繰り返しアクセスを回避 -->
@if (user().profile?.settings?.theme; as theme) {
  <p>現在のテーマ: {{ theme }}</p>
}
```

このパターンは、非同期データや深くネストされたオブジェクトを扱う際に特に有用です。エイリアスされた変数は条件が真の場合にのみ定義されるためです。

## @for：必須のtrack式を伴う反復処理

`@for`ブロックは、任意のJavaScriptイテラブルを反復処理し、配列に対する最適化も提供します。`*ngFor`とは異なり、`track`式が必須です：

```typescript
// product-list.component.ts
import { Component, input } from '@angular/core';

interface Product {
  id: string;
  name: string;
  price: number;
}

@Component({
  selector: 'app-product-list',
  template: `
    @for (product of products(); track product.id) {
      <app-product-card [product]="product" />
    } @empty {
      <p>商品がありません</p>
    }
  `
})
export class ProductListComponent {
  products = input.required<Product[]>();
}
```

`track`式は、再レンダリング時に各アイテムを識別する方法をAngularに伝えます。適切なトラッキングプロパティの選択はパフォーマンスに直接影響します：

| Track式 | ユースケース | パフォーマンスへの影響 |
|---------|------------|--------------------|
| `track item.id` | 一意の識別子を持つアイテム | 最適：最小限のDOM更新 |
| `track $index` | 並べ替えが発生しない静的リスト | 許容範囲：並べ替え時は完全な再レンダリング |
| `track item` | 参照トラッキング | 低パフォーマンス：新しい参照 = 新しいDOMノード |

### @forブロック内のコンテキスト変数

Angularは`@for`ブロック内で反復メタデータを公開する暗黙的な変数を提供します：

```html
@for (item of items(); track item.id; let i = $index, isLast = $last) {
  <li class="item" [class.last]="isLast">
    {{ i + 1 }}. {{ item.name }}
  </li>
}
```

利用可能なコンテキスト変数：
- `$index`：ゼロベースの位置
- `$count`：アイテムの総数
- `$first`、`$last`：最初/最後のアイテムを示すブールフラグ
- `$even`、`$odd`：インデックスの偶奇に基づくブールフラグ

## @switch：型安全な条件分岐

`@switch`ブロックは、厳密等価（`===`）比較による網羅的なパターンマッチングを提供します：

```typescript
// status-badge.component.ts
import { Component, input } from '@angular/core';

type OrderStatus = 'pending' | 'processing' | 'shipped' | 'delivered';

@Component({
  selector: 'app-status-badge',
  template: `
    @switch (status()) {
      @case ('pending') {
        <span class="badge badge-gray">保留中</span>
      }
      @case ('processing') {
        <span class="badge badge-blue">処理中</span>
      }
      @case ('shipped') {
        <span class="badge badge-yellow">発送済み</span>
      }
      @case ('delivered') {
        <span class="badge badge-green">配達完了</span>
      }
    }
  `
})
export class StatusBadgeComponent {
  status = input.required<OrderStatus>();
}
```

JavaScriptの`switch`とは異なり、Angularの`@switch`にはフォールスルー動作がありません。同じブロックをターゲットにする複数の条件には、連続した`@case`文が必要です：

```html
@switch (userRole()) {
  @case ('admin')
  @case ('superadmin') {
    <app-admin-dashboard />
  }
  @case ('editor')
  @case ('reviewer') {
    <app-editor-dashboard />
  }
  @default {
    <app-viewer-dashboard />
  }
}
```

### @default neverによる網羅的な型チェック

Angular 22はコンパイル時の網羅性チェックをサポートしています。`@default never;`を使用すると、残りのケースが存在しないことを宣言できます：

```typescript
type Theme = 'light' | 'dark' | 'system';

// @caseブロックにTheme値が不足している場合、コンパイルエラーが発生
@switch (theme()) {
  @case ('light') { /* ... */ }
  @case ('dark') { /* ... */ }
  @case ('system') { /* ... */ }
  @default never;
}
```

`Theme`ユニオンに新しい値を追加すると、コンパイルエラーが発生し、開発者にすべてのケースの処理を強制します。

## 制御フロー構文とAngular Signalsの統合

制御フローブロックは[Angular Signals](/technologies/angular/interview-questions/angular-signals)とシームレスに統合され、きめ細かいリアクティビティを実現します：

```typescript
// dashboard.component.ts
import { Component, computed, signal } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  template: `
    @if (isLoading()) {
      <app-skeleton />
    } @else if (hasError()) {
      <app-error [message]="errorMessage()" />
    } @else {
      @for (item of filteredItems(); track item.id) {
        <app-item-card [item]="item" />
      } @empty {
        <p>フィルター条件に一致するアイテムがありません</p>
      }
    }
  `
})
export class DashboardComponent {
  items = signal<Item[]>([]);
  filter = signal('');
  isLoading = signal(true);
  hasError = signal(false);
  errorMessage = signal('');

  // computed signalは依存関係が変更されたときのみ再計算
  filteredItems = computed(() =>
    this.items().filter(item =>
      item.name.toLowerCase().includes(this.filter().toLowerCase())
    )
  );
}
```

シグナルが更新されると、Angularは影響を受ける制御フローブロックのみを再評価します。[Angularのゾーンレス変更検出](/blog/angular/angular-19-zoneless-change-detection-performance)と組み合わせることで、高度に最適化されたレンダリングが可能になります。

## Angular制御フローに関する頻出面接質問

技術面接では、制御フロー構文の理解、特に構造ディレクティブとの違いがよくテストされます。

### 質問1：なぜ@forでtrackが必須なのか？

`track`式は、各アイテムの安定したアイデンティティをAngularに提供します。これがないと、コレクションが変更されたときにどのDOMノードを作成、更新、または削除するかをAngularが効率的に判断できません。`track`を必須にすることで、開発者はアイデンティティについて明示的な決定を行い、暗黙的な参照トラッキングのパフォーマンス上の落とし穴を回避できます。

### 質問2：@ifはasyncパイプを使った*ngIfとどう違うのか？

両方ともObservableを処理できますが、シグナルを使用した`@if`は値への同期的なアクセスを提供します：

```typescript
// *ngIfとasyncパイプの場合（レガシー）
<div *ngIf="user$ | async as user">{{ user.name }}</div>

// @ifとシグナルの場合（モダン）
@if (user(); as user) {
  <div>{{ user.name }}</div>
}
```

シグナルアプローチはサブスクリプション管理を回避し、Angularの変更検出とより良く統合されます。

### 質問3：@switchは複雑な@if/@else ifチェーンを置き換えられるか？

`@switch`は、単一の式を複数の離散値と比較する場合に使用すべきです。異なる式を含む複雑なブール条件には、`@if/@else if`がより適切です：

```html
<!-- 単一の式、複数の値には@switchを使用 -->
@switch (status()) {
  @case ('active') { ... }
  @case ('inactive') { ... }
}

<!-- 複数の式には@ifを使用 -->
@if (isAdmin() && hasPermission('write')) {
  ...
} @else if (isEditor()) {
  ...
}
```

### 質問4：コレクションが空のとき@forはどうなるか？

イテラブルにアイテムが含まれていない場合、Angularは`@for`のコンテンツを完全にスキップします。オプションの`@empty`ブロックがこの場合にフォールバックコンテンツをレンダリングします。`@empty`がない場合は何もレンダリングされず、空のコンテナをレンダリングする他のフレームワークとは異なります。

## 構造ディレクティブから制御フローへの移行

Angular CLIは自動化された移行スケマティックを提供しています：

```bash
# プロジェクト全体を移行
ng generate @angular/core:control-flow

# 特定のディレクトリを移行
ng generate @angular/core:control-flow --path=src/app/features
```

スケマティックはほとんどの変換を自動的に処理しますが、エッジケースについては出力を確認してください：

| 構造ディレクティブ | 制御フローの対応 |
|------------------|----------------|
| `*ngIf="condition"` | `@if (condition) { }` |
| `*ngIf="condition; else elseBlock"` | `@if (condition) { } @else { }` |
| `*ngFor="let item of items"` | `@for (item of items; track item) { }` |
| `*ngFor="let item of items; index as i"` | `@for (item of items; track item; let i = $index) { }` |
| `[ngSwitch]` + `*ngSwitchCase` | `@switch` + `@case` |

移行後、構造ディレクティブを使用しなくなったスタンドアロンコンポーネントから`CommonModule`のインポートを削除してください。

## Angular制御フロー構文のまとめ

- Angularの制御フロー構文（`@if`、`@for`、`@switch`）はAngular 19以降の推奨アプローチであり、構造ディレクティブを置き換える
- `@for`の`track`式は必須：最適なパフォーマンスには`item.id`のような一意の識別子を使用し、参照ベースの再レンダリングを引き起こす`track item`は避ける
- `@if`は`ng-template`なしでネイティブな`@else if`と`@else`分岐をサポートし、`as`キーワードは真の値を再利用のためにエイリアス化する
- `@switch`は厳密等価を使用しフォールスルーがない：連続した`@case`文が同じブロックをターゲットにし、`@default never;`で網羅的な型チェックが可能
- 制御フローブロックは[Signals](/technologies/angular/interview-questions/angular-signals)と統合してきめ細かいリアクティビティを実現：シグナルが更新されると影響を受けるブロックのみが再レンダリング
- `ng generate @angular/core:control-flow`を実行して既存のテンプレートを自動的に移行

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ja/blog/angular/angular-control-flow-syntax-if-for-switch-guide