メッセージ形式構文

Vue I18n は UI に表示されるメッセージをローカライズするために、メッセージ形式構文を使用できます。Vue I18n メッセージは、さまざまな機能構文を持つ置換とメッセージです。

置換

Vue I18n は「Mustache」のようなプレースホルダー {} を使用した置換をサポートしています。

名前付き置換

名前付き置換は、JavaScript で定義された変数名を使用してプレースホルダー内で置換できます。

例として、以下のロケールメッセージリソースを見てください：

const messages = {
  en: {
    message: {
      hello: '{msg} world'
    }
  }
}

ロケールメッセージは、createI18n の messages オプションで指定されるリソースです。これは en ロケールで { message: { hello: '{msg} world' } } として定義されています。

名前付き置換では、JavaScript で定義された変数を指定できます。上記のロケールメッセージでは、JavaScript で定義された msg を翻訳関数のパラメータとして与えることでローカライズできます。

{} 内の変数名は、文字（a-z, A-Z）またはアンダースコア（_）で始まり、その後に文字、数字、アンダースコア（_）、ハイフン（-）、またはドル記号（$）の任意の組み合わせが続きます。

例： {msg}、{_userName}、{user-id}、{total$}

テンプレートでの $t の使用例は次の通りです：

html

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

最初の引数はロケールメッセージキーの message.hello であり、2番目の引数は $t へのパラメータとして msg プロパティを持つオブジェクトです。

TIP

翻訳関数のロケールメッセージリソースキーは、JavaScript オブジェクトのように .（ドット）を使用して特定のリソース名前空間を指定できます。

TIP

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

結果は以下の通りです：

html

<p>hello world</p>

リスト置換

リスト置換は、JavaScript で定義された配列を使用してプレースホルダー内で置換できます。

例として、以下のロケールメッセージリソースを見てください：

const messages = {
  en: {
    message: {
      hello: '{0} world'
    }
  }
}

これは en ロケールで { message: { hello: '{0} world' } } として定義されています。

リスト置換では、JavaScript で定義された配列を指定できます。上記のロケールメッセージでは、JavaScript で定義された配列の 0 番目の要素を翻訳関数のパラメータとして与えることでローカライズできます。

テンプレートでの $t の使用例は次の通りです：

html

<p>{{ $t('message.hello', ['hello']) }}</p>

最初の引数はロケールメッセージキーの message.hello であり、2番目の引数は 'hello' 要素を持つ配列であり、 $t へのパラメータです。

結果は以下の通りです：

html

<p>hello world</p>

リテラル置換

リテラル置換は、リテラル文字列を使用してプレースホルダー内で置換できます。

例として、以下のロケールメッセージリソースを見てください：

const messages = {
  en: {
    address: "{account}{'@'}{domain}"
  }
}

これは en ロケールで { address: "{account}{'@'}{domain}" } として定義されています。

リテラル置換では、シングルクォート ' で囲まれた文字列リテラルを指定できます。リテラル置換で指定されたメッセージは、翻訳関数によって文字列としてローカライズされます。

テンプレートでの $t の使用例は次の通りです：

html

<p>email: {{ $t('address', { account: 'foo', domain: 'domain.com' }) }}</p>

最初の引数はロケールメッセージキーの address であり、2番目の引数は account と domain プロパティを持つオブジェクトであり、 $t へのパラメータです。

結果は以下の通りです：

html

<p>email: [email protected]</p>

注意

リテラル置換は、メッセージ形式構文における特殊文字（{ および }）のような、直接メッセージで使用できない文字に役立ちます。

リンクメッセージ

別のロケールメッセージキーが常に同じ具体的なテキストを持つ場合、単にそれをリンクできます。

別のロケールメッセージキーにリンクするには、その内容の先頭に @:key 記号を付け、リンクしたいロケールメッセージキーの完全な名前（名前空間を含む）を続けるだけです。

下記のロケールメッセージ：

const messages = {
  en: {
    message: {
      the_world: 'the world',
      dio: 'DIO:',
      linked: '@:message.dio @:message.the_world !!!!'
    }
  }
}

これはオブジェクトで階層構造を持つ en ロケールです。

message.the_world には the world があり、message.dio には DIO: があります。message.linked には @:message.dio @:message.dio @:message.the_world !!!! があり、これは message.dio と message.the_world のロケールメッセージキーにリンクされています。

テンプレートでの $t の使用例は次の通りです：

html

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

最初の引数は $t へのパラメータであるロケールメッセージキーの message.linked です。

結果は以下の通りです：

html

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

組み込み修飾子

言語によって文字のケースを区別する必要がある場合、リンクされたロケールメッセージのケースを制御する必要があるかもしれません。リンクメッセージは修飾子 @.modifier:key で書式設定できます。

現在利用可能な組み込み修飾子は以下の通りです。

upper: リンクされたメッセージ内のすべての文字を大文字にする
lower: リンクされたメッセージ内のすべての文字を小文字にする
capitalize: リンクされたメッセージ内の最初の文字を大文字にする

下記のロケールメッセージ：

const messages = {
  en: {
    message: {
      homeAddress: 'Home address',
      missingHomeAddress: 'Please provide @.lower:message.homeAddress'
    }
  }
}

これはオブジェクトで階層構造を持つ en ロケールです。

message.homeAddress には Home address があります。message.missingHomeAddress には Please provide @.lower:message.homeAddress があり、これは message.homeAddress のロケールメッセージキーにリンクされています。

上記の例では .lower 修飾子が指定されているため、リンクされた message.homeAddress キーが解決され、その後評価されます。

テンプレートでの $t の使用例は次の通りです：

html

<label>{{ $t('message.homeAddress') }}</label>
<p class="error">{{ $t('message.missingHomeAddress') }}</p>

結果は以下の通りです：

html

<label>Home address</label>
<p class="error">Please provide home address</p>

カスタム修飾子

組み込み修飾子以外を使いたい場合は、カスタム修飾子を使うことができます。

カスタム修飾子を使うには、createI18n の modifiers オプションでそれらを指定する必要があります：

const i18n = createI18n({
  locale: 'en',
  messages: {
    // 何かのロケールメッセージを設定...
  },
  // `modifiers` オプションでカスタム修飾子を設定
  modifiers: {
    snakeCase: (str) => str.split(' ').join('_')
  }
})

下記のロケールメッセージ：

const messages = {
  en: {
    message: {
      snake: 'snake case',
      custom_modifier: "custom modifiers example: @.snakeCase:{'message.snake'}"
    }
  }
}

これはオブジェクトで階層構造を持つ en ロケールです。

message.snake には snake case があります。message.custom_modifier には custom modifiers example: @.snakeCase:{'message.snake'} があり、これはリテラルで置換されるロケールメッセージキーにリンクされています。

注意

下記のリンクメッセージのキーに、名前付き、リスト、およびリテラル置換を使用できます。

この例では、修飾子（@.lower、@.upper、@.capitalize）を名前付き、リスト、およびリテラル置換と組み合わせて使用する方法を示します。

const messages = {
  en: {
    message: {
      greeting: "Hello, @.lower:{'message.name'}! You have {count} new messages.",
      name:"{name}"
    },

    welcome: "Welcome, @.upper:{'name'}! Today is @.capitalize:{'day'}.",
    name: '{0}',
    day: '{1}',

    literalMessage: "This is an email: foo{'@'}@.lower:domain",
    domain: 'SHOUTING'
  }
}

修飾子付き名前付き置換

message.greeting では、{count} に名前付き置換を使用し、message.name にリンクし、.lower 修飾子を適用します。

キー message.name には {name} が含まれており、これに渡された name パラメータで置換されます。

message.greeting はロケールメッセージキー message.name にリンクされています。

html

<p>{{ $t('message.greeting', { name: 'Alice', count: 5 }) }}</p>

結果は以下の通りです：

html

<p>Hello, alice! You have 5 new messages.</p>

修飾子付きリスト置換

この場合、{0} と {1} の値は配列として渡されます。キー name と day はリスト置換を使って解決され、修飾子で変換されます。

html

<p>{{ $t('welcome', ['bob', 'MONDAY']) }}</p>

結果は以下の通りです：

html

<p>Welcome, BOB! Today is Monday.</p>

修飾子付きリテラル置換

この例では、メッセージ内にリテラル文字列を使用し、.lower 修飾子を適用します。

html

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

ここで、修飾子は domain 内のコンテンツに適用され、@ はリテラル出力として保持されます。

結果は以下の通りです：

html

<p>This is an email: foo@shouting</p>

特殊文字

メッセージ形式構文で使用される以下の文字はコンパイラによって特殊文字として処理されます：

これらの文字を使用したい場合は、リテラル置換を使用する必要があります。

Rails i18n 形式

Vue I18n は Ruby on Rails i18n 互換のメッセージ形式をサポートします。

% 接頭辞でメッセージ形式構文を置換できます：

重要

v10以降では、Rails i18n 形式は非推奨になります。名前付き置換の使用を推奨します。

例として、以下のロケールメッセージリソースを見てください：

const messages = {
  en: {
    message: {
      hello: '%{msg} world'
    }
  }
}

これは en ロケールで { message: { hello: '%{msg} world' } } として定義されています。

名前付き置換と同様に、JavaScript で定義された変数を指定できます。上記のロケールメッセージでは、JavaScript で定義された msg を翻訳関数のパラメータとして渡すことでローカライズできます。

テンプレートでの $t の使用例は次の通りです：

html

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

結果は以下の通りです：

html

<p>hello world</p>

HTML メッセージ

HTML を含むメッセージでローカライズできます。

危険

⚠️ サイト上で任意の HTML を動的にローカライズすることは非常に危険であり、XSS脆弱性を簡単に招く可能性があります。信頼できるコンテンツでのみ HTML 置換を使用し、ユーザー提供のコンテンツでは絶対に使用しないでください。

コンポーネント置換の使用を推奨します。

通知

メッセージに HTML が含まれている場合、開発モード（process.env.NODE_ENV !== 'production'）では Vue I18n がコンソールに出力警告をします。Vue I18n はコンソールに出力警告をします。

createI18n または useI18n の warnHtmlInMessage または warnHtmlMessage オプションで警告出力を制御できます。

例として、以下のロケールメッセージリソースを見てください：

const messages = {
  en: {
    message: {
      hello: 'hello <br> world'
    }
  }
}

これは en ロケールで { message: { hello: 'hello <br> world' } } として定義されています。

v-html と $t のテンプレートでの使用例は次の通りです：

html

<p v-html="$t('message.hello')"></p>

結果は以下の通りです：

html

<p>hello
<!--<br> exists but is rendered as html and not a string-->
world</p>

general

Variables

Functions

Interfaces

Type Aliases

vue

Interfaces

メッセージ形式構文

置換

名前付き置換

リスト置換

リテラル置換

リンクメッセージ

組み込み修飾子

カスタム修飾子

修飾子付き名前付き置換

修飾子付きリスト置換

修飾子付きリテラル置換

特殊文字

Rails i18n 形式

HTML メッセージ

メッセージ形式構文 ​

置換 ​

名前付き置換 ​

リスト置換 ​

リテラル置換 ​

リンクメッセージ ​

組み込み修飾子 ​

カスタム修飾子 ​

修飾子付き名前付き置換 ​

修飾子付きリスト置換 ​

修飾子付きリテラル置換 ​

特殊文字 ​

Rails i18n 形式 ​

HTML メッセージ ​

メッセージ形式構文

置換

名前付き置換

リスト置換

リテラル置換

リンクメッセージ

組み込み修飾子

カスタム修飾子

修飾子付き名前付き置換

修飾子付きリスト置換

修飾子付きリテラル置換

特殊文字

Rails i18n 形式

HTML メッセージ