Angularで式の値によってメッセージを切り替えるには？（ngSwitch）：Angular TIPS

JavaScriptのswitch文のように、ある式を評価して、その式の値に応じて、表示するメッセージを切り替える方法を説明する。

[山田祥寛，著]

連載目次

※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。

【対応バージョン】

　Angular 5以降。v5時点で執筆しました。

　ngSwitchディレクティブは、いわゆるJavaScriptのswitch命令に相当するディレクティブです。与えられた式の値によって、表示すべきメッセージを切り替えます。

　まずは具体的な例を見てみましょう。以下は、選択ボックスで指定された書名に応じて、対応する紹介文を表示する例です*1。

*1　ngModelディレクティブを利用する場合には、あらかじめFormsModuleをインポートしておきます。詳しくは別稿「TIPS：フォームの入力値をコンポーネントと同期するには？（双方向バインディング）」も併せて参照してください。

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

@Component({
  selector: 'app-root',
  template: `
    <form>
      <!-- ［2］選択ボックスとtitleプロパティをひも付け-->
      <select name="title" [(ngModel)]="title">
      <option value="">書籍を選択</option>
      <option value="angular">Angularアプリケーションプログラミング</option>
      <option value="mysql">3ステップでしっかり学ぶ MySQL入門</option>
      <option value="csharp">独習C# 新版</option>
      <option value="core">速習 ASP.NET Core</option>
      </select>
    </form>
    <!-- ［1］titleプロパティに応じて、対応するテキストを表示-->
    <div [ngSwitch]="title">
      <span *ngSwitchCase="'angular'">定番JavaScriptフレームワーク……省略……</span>
      <span *ngSwitchCase="'mysql'">MySQL（データベース）初心者の……省略……</span>
      <span *ngSwitchCase="'csharp'">C#言語の独学に最適な教科書……省略……</span>
      <span *ngSwitchCase="'core'">サクッと学べる。ASP.NET Coreの……省略……</span>
      <span *ngSwitchDefault>選択してください</span>
    </div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '';
}

選択された値に応じてメッセージを切り替えるコード（app.component.ts）

▼

「Angularアプリケーションプログラミング」を選択

▼

「3ステップでしっかり学ぶ MySQL入門」を選択

選択された書籍に応じて、その紹介文を表示

　ngSwitchディレクティブの構文は、以下の通りです。

［構文］ngSwitchディレクティブ

<element [ngSwitch]="expression">
  <element *ngSwitchCase="val1">……</element>
  <element *ngSwitchCase="val2">……</element>
  ……
  <element *ngSwitchDefault>……</element>
</element>

• element： 任意の要素
• expression： 式
  • val1、val2……： 値

　これで、式（expression）の値に合致するngSwitchCase属性を持つ要素が表示されます（複数の要素が合致した場合には、その要素全てが表示されます）。全てのngSwitchCase属性に合致する値がなかった場合には、ngSwitchDefault属性を持つ要素が出力されます。ngSwitchDefault属性は省略することも可能です。

　この例であれば、式（expression）としてtitleプロパティが指定されており（［1］）、titleプロパティは選択ボックスにひも付いているので（［2］）、結果、選択ボックスに応じてメッセージが切り替わります。

　ngIfディレクティブでも代替できますが、条件式を個別に書かなければならない分、コードは冗長になります。1つの式の値を基に分岐するのであれば、ngSwitchディレクティブを優先して利用すべきです。

処理対象：ディレクティブ（Directive）　カテゴリ：基本
API：NgSwitch（ngSwitch）｜NgSwitchCase（ngSwitchCase）｜NgSwitchDefault（ngSwitchDefault）　カテゴリ：@angular > common > DIRECTIVE（ディレクティブ）

「Angular TIPS」