【JS応用｜実務向け】多言語対応の要！Intl.PluralRules.prototype.selectによる数値の単数・複数形制御

導入

グローバルなWebアプリケーションを開発する際、避けて通れないのが「言語による数値の表現の違い」です。例えば、英語では「1 item」「2 items」のように名詞の形が変わりますが、日本語では「1件」「2件」と変化しません。この微妙なルールをハードコーディングで処理しようとすると、言語ごとの条件分岐が乱立し、メンテナンス性が著しく低下します。これをスマートに解決するのが、JavaScript標準の国際化APIであるIntl.PluralRules.prototype.selectです。

基礎知識

Intl.PluralRulesは、数値がその言語においてどの「複数形カテゴリ（Plural Category）」に属するかを判定するためのオブジェクトです。
判定されるカテゴリには、主に以下の種類があります。
・zero: 0
・one: 単数形（1など）
・two: 2
・few: 少数
・many: 多数
・other: その他（デフォルト）
例えば、英語（’en’）で数値の「1」を渡せば「one」が、それ以外なら「other」が返ります。これにより、言語ごとの文法ルールをプログラム側で管理できるようになります。

実装/解決策

実装の流れは非常にシンプルです。まず、対象となる言語コードを指定してIntl.PluralRulesインスタンスを作成します。次に、そのインスタンスのselect()メソッドに数値を渡すだけで、その言語における適切なカテゴリ文字列が取得できます。あとは、その文字列に応じたメッセージを返す辞書データ（マッピング）を用意するだけです。

サンプルプログラム

以下のコードは、英語と日本語それぞれの文法ルールに基づいたメッセージを出し分ける実用的な例です。

// 複数形カテゴリに応じたメッセージ定義
const messages = {
  en: {
    one: 'item',
    other: 'items'
  },
  ja: {
    other: '件' // 日本語は単数・複数の区別がないため常に同じ
  }
};

/

数値に基づいた適切なテキストを返す関数
@param {number} count - 数値
@param {string} lang - 言語コード

 /
function getLocalizedText(count, lang) {
  // 指定した言語のルールの初期化
  const pr = new Intl.PluralRules(lang);
  
  // selectメソッドでカテゴリを取得
  const category = pr.select(count);
  
  // 定義した辞書から該当する文字列を取得
  const unit = messages[lang][category] || messages[lang].other;
  
  return `${count} ${unit}`;
}

// 実行結果の確認
console.log(getLocalizedText(1, 'en')); // "1 item"
console.log(getLocalizedText(5, 'en')); // "5 items"
console.log(getLocalizedText(1, 'ja')); // "1 件"
console.log(getLocalizedText(5, 'ja')); // "5 件"

応用・注意点

現場で活用する際の注意点は以下の3つです。

1. 言語ごとの辞書定義の徹底
全ての言語で「one / other」があるわけではありません。例えば、アラビア語などではカテゴリがより複雑になります。利用する言語のルールを事前に「CLDR（Unicode共通ロケールデータリポジトリ）」などで確認しておくことを推奨します。

2. パフォーマンスへの配慮
new Intl.PluralRules()のインスタンス生成は、頻繁に行うとコストがかかります。関数内で毎回生成するのではなく、可能な限り再利用するか、キャッシュする仕組みを設けることでパフォーマンスを最適化できます。

3. i18nextなどのライブラリとの併用
もしReactなどのフレームワークで大規模な多言語対応を行うなら、自前で実装するよりもi18nextのようなライブラリが内部でこのAPIを適切にラップしているため、それらを利用するのが開発効率の観点から最も賢明な選択と言えます。