Angularで数値（単数／複数）によって表示を切り替えるには？（i18nPlural）：Angular TIPS

Angularで数値によってテキスト表示内容を切り替えるための、i18nPluralパイプの基本的な使い方を説明する。

» 2017年08月30日 05時00分公開

※現在では、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: 'いつもお世話になっております。明日はよろしくお願い致します。' }
];
}

変数の値によって表現を切り替えるためのコード

▼

mails配列を0件にした場合

▼

mails配列を1件にした場合

▼

mails配列を5件にした場合

メールの件数（mails.length）によってメッセージが変化*1

*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（パイプ）

「Angular TIPS」