Vue (vue-i18n) でのICUメッセージ

Vue.jsでのICU MessageFormat

vue-i18nはVue.jsアプリケーション向けの標準的な国際化ライブラリです。vue-i18nはデフォルトで独自のメッセージ構文を持ちますが、messageCompilerオプションを通じてICU MessageFormatをサポートしています。

テンプレートでの使用

<template>
  <p>{{ $t('greeting', { name: userName }) }}</p>
  <p>{{ $t('items', { count: itemCount }) }}</p>
</template>

Composition API

import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t } = useI18n();
    const message = t('items', { count: 5 });
    return { message };
  },
};

vue-i18nのネイティブPlural構文 vs ICU

// vue-i18nネイティブ構文
items: 'no items | one item | {count} items'

// ICU MessageFormat構文
items: '{count, plural, =0 {no items} one {one item} other {# items}}'

ICU構文がより強力な理由：

• 順序位置を超えた名前付き複数形カテゴリ
• ネストメッセージ（plural内のselect）
• CLDRルールによるロケール対応のカテゴリ選択
• すべてのフレームワーク間で一貫した構文

ベストプラクティス

1. メッセージにはインラインオブジェクトではなくJSONファイルを使用
2. メッセージキーに翻訳者向けのコンテキストコメントを提供
3. RTLロケール（アラビア語、ヘブライ語）でレイアウト検証をテスト
4. メッセージ解決のデバッグにVue DevTools i18nプラグインを使用
5. 本番環境ではコンソール警告を抑制するためfallbackWarn: falseを有効化