Angularで数値（単数／複数）によって表示を切り替えるには？（i18nPlural）：Angular TIPS
Angularで数値によってテキスト表示内容を切り替えるための、i18nPluralパイプの基本的な使い方を説明する。
※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。
【対応バージョン】
Angular 4以降。v4時点で執筆しました。
i18nPluralパイプを利用することで、変数の値――単数／複数のいずれであるか、3以上であるか、などによって、表現を切り替えることができます。例えばメールボックスなどのアプリを想定してみましょう。新着メールの件数に応じて、以下のようなメッセージを表示させるものとします。
| 件数 | メッセージ |
|---|---|
| 0 | 新着メッセージはありません。 |
| 1 | メッセージがあります。 |
| 2以上 | ●○件のメッセージがあります。 |
| 新着メッセージの件数によって変化するメッセージ | |
このような表現の差し替えは、以下のようなコードで実装できます。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<div>{{ mails.length |i18nPlural: labels }}</div>`
})
export class AppComponent {
// 表示すべきメッセージ
labels = {
'=0' : '新着メッセージはありません。',
'=1' : 'メッセージがあります。',
'other': '#件のメッセージがあります。',
}
// 新着メール情報
mails = [
{ name: '山田太郎', body: 'こんにちは。今年は暑いねー。' },
{ name: '鈴木久美子', body: 'お久しぶりです。元気にしてますか？' },
{ name: '佐藤雄二', body: '今度の日曜日、ランチしに行きませんか。' },
{ name: '山口夕夏', body: 'お誕生日おめでとう！' },
{ name: '田中仁', body: 'いつもお世話になっております。明日はよろしくお願い致します。' }
];
}
*1 メッセージの変化を確認するには、mailsプロパティ（配列）に含まれる要素の個数を変化させてみましょう。
i18nPluralパイプの構文は、以下の通りです。
［構文］i18nPluralパイプ
value | i18nPlural : map
- value： 任意の数値
- map： 件数に応じたメッセージのセット
引数mapは、'=数値': 'メッセージ'のハッシュ形式で、数値と対応するメッセージを用意します。ここでは=0、=1で0、1の場合のメッセージを定義していますが、同じく2以上に対応するメッセージを定義することも可能です。otherは「その他」で明示的に宣言されていない値に対応するメッセージを定義します。一般的には、=0、=1、otherのセットで利用することが多いでしょう。（※かわさき：<code>を使えないので、読点を追加しています）
メッセージには「#」で元の数値を埋め込むこともできます。
処理対象：PIPE（パイプ） カテゴリ：基本
API：I18nPluralPipe（i18nPlural） カテゴリ：@angular > common > PIPE（パイプ）
Copyright© Digital Advantage Corp. All Rights Reserved.
ITmediaはアイティメディア株式会社の登録商標です。