[Angular マスター] Day 5 - 条件分岐と繰り返し

制御フローとは

制御フローは、条件によって表示を切り替えたり、配列のデータを繰り返し表示したりするための仕組みです。

Angular 17以降では、@if、@for、@switchのような新しい構文を使えます。

@ifで条件表示する

ログイン状態やエラーの有無など、条件によって表示を変えたい場面では@ifを使います。

@if (isLoggedIn) {
  <p>{{ username }}さん、こんにちは。</p>
} @else {
  <p>ログインしてください。</p>
}

テンプレートの中で条件が読みやすくなるため、画面の状態を整理しやすくなります。

@forで一覧を表示する

配列のデータを一覧表示するときは@forを使います。

<ul>
  @for (todo of todos; track todo.id) {
    <li>{{ todo.title }}</li>
  }
</ul>

trackには、各項目を識別できる値を指定します。IDがあるデータならtodo.idを使うのが自然です。

@switchで分岐を整理する

状態が複数ある場合は@switchを使うと読みやすくなります。

@switch (status) {
  @case ('loading') {
    <p>読み込み中...</p>
  }
  @case ('error') {
    <p>エラーが発生しました。</p>
  }
  @default {
    <p>完了しました。</p>
  }
}

使い分け

構文	使う場面
@if	表示するかどうかを決める
@else	条件に合わない場合の表示
@for	配列を繰り返し表示する
@switch	複数の状態を分岐する

Day 5のゴール

今日のゴールは、条件と繰り返しを使って、静的な画面から動的な画面へ進むことです。Todoリストや商品一覧のようなUIを作る土台になります。