検索
連載

Angularで数値(単数/複数)によって表示を切り替えるには?(i18nPlural)Angular TIPS

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

Share
Tweet
LINE
Hatena
「Angular TIPS」のインデックス

連載目次

現在では、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配列を0件にした場合
mails配列を1件にした場合
mails配列を1件にした場合
mails配列を5件にした場合
mails配列を5件にした場合

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


*1 メッセージの変化を確認するには、mailsプロパティ(配列)に含まれる要素の個数を変化させてみましょう。


 i18nPluralパイプの構文は、以下の通りです。

[構文]i18nPluralパイプ

value | i18nPlural : map

  • value: 任意の数値
  • map: 件数に応じたメッセージのセット

 引数mapは、'=数値': 'メッセージ'のハッシュ形式で、数値と対応するメッセージを用意します。ここでは=0=1で01の場合のメッセージを定義していますが、同じく2以上に対応するメッセージを定義することも可能です。otherは「その他」で明示的に宣言されていない値に対応するメッセージを定義します。一般的には、=0=1otherのセットで利用することが多いでしょう。(※かわさき:<code>を使えないので、読点を追加しています)

 メッセージには「#」で元の数値を埋め込むこともできます。

処理対象:PIPE(パイプ) カテゴリ:基本
API:I18nPluralPipe(i18nPlural) カテゴリ:@angular > common > PIPE(パイプ)


「Angular TIPS」のインデックス

Angular TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

ページトップに戻る