メッセージ関数

Vue I18n では、メッセージの翻訳時に、リスト形式、名前付き形式、リテラル形式の文字列ベースのロケールメッセージを使用することが推奨されます。

しかし、文字列ベースのメッセージフォーマット構文では、すべてのケースに対応しきれない場合があります。

例えば、フランス語で以下のメッセージを処理したいとします：

• Manger de la soupe（スープを食べる）
• Manger une pomme（リンゴを食べる）
• Manger du pain（パンを食べる）
• Manger de l’orge（オーツを食べる）

ご覧の通り、名詞に続く冠詞は性別や音韻によって変わります。

Vue I18n のメッセージフォーマット構文でサポートされている機能では、これらの言語固有のユースケースに対応できないことがあります。

しかし、複雑な言語文法が必要な状況では、JavaScriptの完全なプログラマティックな力が必要になることもあります。 そのため、文字列ベースのメッセージではなく、メッセージ関数を使用できます。

注意

メッセージフォーマット構文で記述されたメッセージは、Vue I18n メッセージコンパイラによってメッセージ関数にコンパイルされ、パフォーマンスを最大限に向上させます。

基本的な使用方法

以下はシンプルな挨拶を返すメッセージ関数です：

const messages = {
  en: {
    greeting: (ctx) => 'hello!'
  }
}

メッセージ関数は最初の引数としてメッセージコンテキストを受け取り、いくつかのプロパティと関数を持っています。これらについての使い方は以降のセクションで説明しますので、ここでは続けます。

メッセージ関数の使用は非常に簡単です。メッセージ関数のキーを $t または t で指定するだけでOKです。

<p>{{ $t('greeting') }}</p>

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

<p>hello!</p>

メッセージ関数は、メッセージ関数の戻り値である文字列値のメッセージを出力します。

注意

翻訳コンポーネント（i18n-t）を使用する必要がある場合は、文字列値だけでなくVNode値の返却もサポートする必要があります。

翻訳コンポーネントの使用をサポートするために、メッセージコンテキストの type プロパティが次のコード例のように使用されます：

import { createVNode, Text } from 'vue'

const messages = {
  en: {
    greeting: ({ type }) => type === 'vnode'
      ? createVNode(Text, null, 'hello', 0)
      : 'hello'
  }
}

まだ読んでいない場合は、メッセージ関数に進む前にVue レンダリング関数を読むことをお勧めします。

名前付き補間

Vue I18nは文字列ベースのメッセージ形式として名前付き補間をサポートしています。Vue I18nは $t または t でパラメータ値を補間し、出力できます。

メッセージコンテキストの named 関数を使用すると同様のことができます。

挨拶の例です：

const messages = {
  en: {
    greeting: ({ named }) => `hello, ${named('name')}!`
  }
}

テンプレート：

<p>{{ $t('greeting', { name: 'DIO' }) }}</p>

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

<p>hello, DIO!</p>

$t または t の名前付きで指定した値を解決するキーを指定する必要があります。

リスト補間

Vue I18nは文字列ベースのメッセージ形式としてリスト補間をサポートしています。Vue I18nは $t または t でパラメータ値を補間し、出力できます。

メッセージコンテキストの list 関数を使用すると同様のことができます。

挨拶の例です：

const messages = {
  en: {
    greeting: ({ list }) => `hello, ${list(0)}!`
  }
}

テンプレート：

<p>{{ $t('greeting', ['DIO']) }}</p>

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

<p>hello, DIO!</p>

$t または t のリストで指定した値を解決するインデックスを指定する必要があります。

リンクされたメッセージ

Vue I18nは文字列ベースのメッセージ形式としてリンクされたメッセージをサポートしています。Vue I18nは $t または t でパラメータ値を補間し、出力できます。

メッセージコンテキストの linked 関数を使用すると同様のことができます。

メッセージ関数の例です：

const messages = {
  en: {
    the_world: 'the world',
    dio: 'DIO:',
    linked: ({ linked }) => `${linked('message.dio')} ${linked('message.the_world')} !!!!`
  }
}

テンプレート：

<p>{{ $t('linked') }}</p>

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

<p>DIO: the world !!!!</p>

$t または t で指定した値を解決するキーを指定する必要があります。

複数形

Vue I18nは文字列ベースのメッセージ形式として複数形をサポートしています。Vue I18nは $t または t でパラメータ値を補間し、出力できます。

メッセージコンテキストの plural 関数を使用すると同様のことができます。

メッセージ関数の例です：

const messages = {
  en: {
    car: ({ plural }) => plural(['car', 'cars']),
    apple: ({ plural, named }) =>
      plural([
        'no apples',
        'one apple',
        `${named('count')} apples`
      ])
  }
}

テンプレート：

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

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

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

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

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

$t または t で指定した値を解決するキーを指定する必要があります。