サンプルコードで身につける: @if — 条件で表示を切り替える

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

1条件が真のときだけ表示する

@if の最小例で、isNew が true のときだけ NEW バッジが描画されます。false のときは非表示になるのではなく、要素そのものがDOMから消えるのがポイントです。新着ラベルや未読マークなど「あるときだけ出す」表示の基本形です。

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

@Component({
  selector: 'app-new-badge',
  // isNew が false なら <span> はDOMごと存在しなくなる
  template: '@if (isNew) { <span>NEW</span> }',
})
export class NewBadgeComponent {
  isNew = true;
}

2@else で二者択一にする

@else を続けると「条件が真なら A、偽なら B」という二者択一の表示が書けます。どちらか一方だけが必ず描画される、という対の関係が一目で分かるのが利点です。在庫の有無、ログイン状態など、2状態の出し分けはこの形に落ち着きます。

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

@Component({
  selector: 'app-stock-message',
  // 必ずどちらか一方だけが描画される
  template:
    '@if (stock > 0) {' +
    '  <p>購入できます</p>' +
    '} @else {' +
    '  <p>在庫切れです</p>' +
    '}',
})
export class StockMessageComponent {
  stock = 0;
}

3@else if で3つ以上に分岐する

@else if をはさむと、上から順に条件を評価して最初に真になったブロックだけを描画します。点数からランクを決めるような「範囲による分岐」は @else if の出番です。条件の順番(厳しい条件を先に書く)が結果を左右する点も学べます。

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

@Component({
  selector: 'app-score-rank',
  // 上から順に評価され、最初に真になった1つだけが描画される
  template:
    '@if (score >= 80) { <p>ランクA</p> }' +
    ' @else if (score >= 50) { <p>ランクB</p> }' +
    ' @else { <p>ランクC</p> }',
})
export class ScoreRankComponent {
  score = 65;
}

4ローディング表示を切り替える

「読み込み中はスピナー、終わったら本体」という、実務で最も頻繁に書く @if の使い方です。isLoading という1つの真偽値で画面の状態を表すのがコツです。通信を学ぶ前でも、状態を切り替えるとどちらか一方だけが画面に存在する、という動きはこの例で掴めます。

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

@Component({
  selector: 'app-loading-panel',
  template:
    '@if (isLoading) {' +
    '  <p>読み込み中...</p>' +
    '} @else {' +
    '  <p>{{ message }}</p>' +
    '}' +
    '<button (click)="finish()">読み込み完了にする</button>',
})
export class LoadingPanelComponent {
  isLoading = true;
  message = 'データの読み込みが完了しました';

  finish() {
    this.isLoading = false;
  }
}

5検索結果の状態を出し分ける

「エラーがあればエラー文、0件なら空メッセージ、それ以外は件数」という検索画面の典型的な状態分岐です。優先度の高い状態(エラー)を先に書くことで、画面が矛盾した表示にならないようにしています。一覧画面の品質はこの出し分けの丁寧さで決まります。

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

@Component({
  selector: 'app-search-status',
  // 優先度の高い状態(エラー)から順に分岐する
  template:
    '@if (errorMessage) {' +
    '  <p>{{ errorMessage }}</p>' +
    '} @else if (resultCount === 0) {' +
    '  <p>条件に合う商品が見つかりませんでした</p>' +
    '} @else {' +
    '  <p>{{ resultCount }} 件見つかりました</p>' +
    '}',
})
export class SearchStatusComponent {
  errorMessage = '';
  resultCount = 0;
}