サンプルコードで身につける: @for — 配列を繰り返し表示する

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1文字列の配列を並べる

@for の最小例で、文字列配列を箇条書きにします。IDを持たない単純な値の配列では track に要素自身を指定します。「配列の要素の数だけ中身が繰り返される」という @for の基本動作がそのまま見える例です。

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

@Component({
  selector: 'app-tag-list',
  // 単純な値の配列なら track には要素自身を指定する
  template:
    '<ul>@for (tag of tags; track tag) { <li>{{ tag }}</li> }</ul>',
})
export class TagListComponent {
  tags = ['初心者歓迎', 'セール中', '送料無料'];
}

2オブジェクトの配列を track item.id で並べる

実務のデータはオブジェクトの配列がほとんどで、track には一意なIDを指定します。これにより配列が更新されたとき、Angularは変わった行だけを効率よく再描画できます。タスク一覧・商品一覧など、@for の最も標準的な使い方です。

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

type Task = { id: number; taskTitle: string };

@Component({
  selector: 'app-task-list',
  // track item.id で行の対応関係をAngularに教える
  template:
    '<ul>@for (task of tasks; track task.id) {' +
    '  <li>{{ task.taskTitle }}</li>' +
    '}</ul>',
})
export class TaskListComponent {
  tasks: Task[] = [
    { id: 1, taskTitle: '資料を作成する' },
    { id: 2, taskTitle: 'レビューを依頼する' },
  ];
}

3$index で順位を表示する

@for のブロック内では $index(何番目か)や $first・$last(先頭・末尾か)という暗黙の変数が使えます。連番を自分で配列に持たせる必要がない、ということを示す例です。ランキング表示や「最後の行だけ区切り線を消す」といった調整で重宝します。

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

@Component({
  selector: 'app-ranking',
  // $index は0始まりなので +1 して順位にする
  template:
    '@for (team of teams; track team) {' +
    '  <p>{{ $index + 1 }}位: {{ team }}' +
    '  @if ($first) { <strong>(首位)</strong> }</p>' +
    '}',
})
export class RankingComponent {
  teams = ['レッズ', 'ブルーズ', 'グリーンズ'];
}

4@empty で空のときの表示を書く

@empty ブロックは、配列が空のときだけ描画されます。「データがないときに何を見せるか」を繰り返しとセットで宣言できるのが @for の便利な点です。通知ゼロ、検索結果ゼロ、カートが空など、実務では空状態の表示が必ず求められます。

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

@Component({
  selector: 'app-notification-list',
  // 配列が空のときは @empty の中身だけが描画される
  template:
    '@for (notice of notifications; track notice) {' +
    '  <p>{{ notice }}</p>' +
    '} @empty {' +
    '  <p>新しい通知はありません</p>' +
    '}',
})
export class NotificationListComponent {
  notifications: string[] = [];
}

5絞り込んだ結果だけを一覧表示する

元の配列をそのまま並べるのではなく、メソッドで絞り込んだ結果を @for に渡す実務寄りの例です。「在庫ありだけ表示」のようなフィルタ付き一覧はこの形になります。絞り込みの結果が0件になる場合に備えて @empty も添えるのが丁寧な実装です。

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

type Item = { id: number; itemName: string; inStock: boolean };

@Component({
  selector: 'app-stock-filter-list',
  // 絞り込み済みの配列を @for に渡す
  template:
    '<ul>@for (item of inStockItems(); track item.id) {' +
    '  <li>{{ item.itemName }}</li>' +
    '} @empty {' +
    '  <li>在庫のある商品がありません</li>' +
    '}</ul>',
})
export class StockFilterListComponent {
  items: Item[] = [
    { id: 1, itemName: 'コーヒー豆', inStock: true },
    { id: 2, itemName: 'ドリッパー', inStock: false },
    { id: 3, itemName: 'マグカップ', inStock: true },
  ];

  inStockItems() {
    return this.items.filter((item) => item.inStock);
  }
}