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.