Vueアプリケーション向けi18nキー構造
vue-i18nを使用したVue.jsアプリケーションのi18n翻訳キー構造化方法。コンポーネントスコープメッセージ、グローバル vs ローカル翻訳、SFC i18nブロック、Nuxt i18nモジュールのパターンをカバーします。
Framework Guide
詳細な説明
Vue向けi18nキー構造
Vueアプリケーションは通常、国際化にvue-i18nを使用します。vue-i18nはコンポーネントスコープメッセージやSFC（Single File Component）i18nブロックなどのユニークな機能を提供し、キー整理に影響を与えます。
SFC i18nブロック
Vueのユニークな機能 -- コンポーネントに直接翻訳を埋め込む。<i18n>ブロック内のキーはコンポーネントにスコープされます。
グローバル vs ローカルメッセージ
| スコープ | 用途 | アクセスパターン |
|---|---|---|
| グローバル | 共有ボタン、エラー、ナビ | $t('common.buttons.submit') |
| ローカル（SFC） | コンポーネント固有テキスト | $t('title') |
| ルートレベル | ページ固有コンテンツ | $t('pages.home.title') |
vue-i18nの複数形
vue-i18nは単一キー内でパイプ区切りの値を使用します：
{
"items": "アイテムなし | {count}個のアイテム | {count}個のアイテム"
}
これはreact-i18nextが複数形ごとに別のキーを使用するのとは異なります。
ユースケース
グローバルメッセージとSFC i18nブロックのどちらを選ぶかを決めるVue開発者は、トレードオフを理解する必要があります。SFCブロックは翻訳をコンポーネントと共配置しますが（より良いDX）、外部での翻訳管理が難しくなります（翻訳会社には不向き）。