複数形

メッセージをローカライズする際、特定の言語では複数形をサポートする必要がある場合があります。

Vue i18nは複数形をサポートしており、複数形機能を持つ翻訳APIを使用できます。

基本的な使用方法

パイプ | 区切りを持つロケールメッセージを定義し、パイプ区切りで複数形を定義する必要があります。

以下のロケールメッセージを参照してください：

const messages = {
  en: {
    car: 'car | cars',
    apple: 'no apples | one apple | {count} apples'
  }
}

ここでは、en ロケールオブジェクトに car と apple が含まれています。

car は car | cars の複数形メッセージを持ち、apple は no apples | one apple | {count} apples の複数形メッセージを持っています。

これらの複数形メッセージは、翻訳APIの各言語ごとの選択ルールに従って、翻訳APIで指定した数値に応じて選択されます。

Vue I18nは複数形をサポートするいくつかの方法を提供します。ここでは $t を使用します。

TIP

$t にはいくつかのオーバーロードがあります。これらのオーバーロードについては、APIリファレンスをご覧ください。

NOTE

複数形をサポートする方法には次のものがあります：

• 注入されたグローバル $t
• 組み込みの翻訳コンポーネント (i18n-t)
• useI18n からエクスポートされた t（Composition APIモードの場合）

以下は翻訳APIの使用例です。

<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>

<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', 10, { count: 10 }) }}</p>

上記の $t の使用例では、最初の引数はロケールメッセージキー、2番目の引数は数値です。$t は選択されたメッセージを結果として返します。

結果は以下のようになります：

<p>car</p>
<p>cars</p>

<p>no apples</p>
<p>one apple</p>
<p>10 apples</p>

標準で定義された暗黙的引数

複数形のために明示的に数値を与える必要はありません。

これはどういう意味か理解するために例を見てみましょう！

以下のロケールメッセージを参照してください：

const messages = {
  en: {
    apple: 'no apples | one apple | {count} apples',
    banana: 'no bananas | {n} banana | {n} bananas'
  }
}

ここでは、en ロケールオブジェクトに apple と banana が含まれています。

apple は no apples | one apple | {count} apples の複数形メッセージを持ち、banana は no bananas | {n} banana | {n} bananas の複数形メッセージを持っています。

数値はロケールメッセージ内で事前定義された名前付き引数 {count} および/または {n} を介してアクセスできます。必要に応じてこれらの事前定義された名前付き引数を上書きできます。

以下の $t の使用例を参照してください：

<p>{{ $t('apple', 10, { named: { count: 10 } }) }}</p>
<p>{{ $t('apple', 10) }}</p>

<p>{{ $t('banana', 1, { named: { n: 1 } }) }}</p>
<p>{{ $t('banana', 1) }}</p>
<p>{{ $t('banana', 100, { named: { n: 'too many' } }) }}</p>

上記のいくつかの例では、最初の引数はロケールメッセージキー、2番目の引数は数値またはオブジェクトです。

オブジェクトが指定された場合は、名前付き補完と同等です。複数形メッセージ内で暗黙的に指定された n または count を引数を使って補完できます。

結果は以下のようになります：

<p>10 apples</p>
<p>10 apples</p>

<p>1 banana</p>
<p>1 banana</p>
<p>too many bananas</p>

カスタム複数形

このような複数形はすべての言語に適用されるわけではありません（例えばスラヴ語族言語などは異なる複数形規則を持っています）。

これらの規則を実装するには、VueI18n コンストラクタオプションに任意の pluralizationRules オブジェクトを渡すことができます。

スラヴ語族言語（ロシア語、ウクライナ語など）の規則を使用した非常に単純化された例：

function customRule(choice, choicesLength, orgRule) {
  if (choice === 0) {
    return 0
  }

  const teen = choice > 10 && choice < 20
  const endsWithOne = choice % 10 === 1
  if (!teen && endsWithOne) {
    return 1
  }
  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
    return 2
  }

  return choicesLength < 4 ? 2 : 3
}

上記で定義されたカスタム規則を使用するには、createI18n 内で以下のように設定します：

1. pluralizationRules（Options APIの場合） または
2. pluralRules（Composition APIの場合）

以下のロケールのようにしてください：

const i18n = createI18n({
  locale: 'ru',
  // Composition API用に pluralRules を使用
  pluralizationRules: {
    ru: customRule
  },
  messages: {
    ru: {
      car: '0 машин | {n} машина | {n} машины | {n} машин',
      banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
    }
  }
})

以下のテンプレートを使用してください：

<h2>Car:</h2>
<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>
<p>{{ $t('car', 4) }}</p>
<p>{{ $t('car', 12) }}</p>
<p>{{ $t('car', 21) }}</p>

<h2>Banana:</h2>
<p>{{ $t('banana', 0) }}</p>
<p>{{ $t('banana', 4) }}</p>
<p>{{ $t('banana', 11) }}</p>
<p>{{ $t('banana', 31) }}</p>

結果は以下のようになります：

<h2>Car:</h2>
<p>1 машина</p>
<p>2 машины</p>
<p>4 машины</p>
<p>12 машин</p>
<p>21 машина</p>

<h2>Banana:</h2>
<p>нет бананов</p>
<p>4 банана</p>
<p>11 бананов</p>
<p>31 банан</p>