v11 ドキュメント

これは Vue I18n v11 のドキュメントです。v12 以降を使用している場合は、最新のガイド を参照してください。

スコープとロケールの変更

スコープ (Scope)

Vue I18n は、ロケールの切り替え、ロケールメッセージと呼ばれる各言語のメッセージ、日時や数値の命名フォーマットなど、i18n 機能を提供するためにリソースを管理します。これらは VueI18n インスタンスで管理されます。

Vue アプリケーションは、ツリー構造上のいくつかのコンポーネントから構築されます。Vue I18n の i18n 機能を使用して各コンポーネントをローカライズするには、スコープの概念を理解する必要があります。

Vue I18n には以下の 2 つのスコープがあります：

• グローバルスコープ
• ローカルスコープ

グローバルスコープ

Vue のグローバルスコープを使用すると、アプリケーション内のすべてのコンポーネントにわたって国際化 (i18n) リソースにアクセスして管理できます。これは、i18n 管理を一元化する場合に特に役立ちます。

createI18n を使用して i18n インスタンスを作成すると、グローバルスコープが自動的に作成されます。このグローバルスコープは VueI18n インスタンスに紐付けられており、i18n インスタンスの global プロパティを介してアクセスできます。本質的に、グローバルスコープとは、i18n インスタンスの global プロパティを介してアクセス可能な VueI18n インスタンスを指します。

コンポーネントで i18n オプションが指定されていない場合、そのコンポーネントではグローバルスコープが自動的に有効になります。この場合、コンポーネント内で this.$i18n を介してアクセスされる VueI18n インスタンスは、i18n インスタンスの global プロパティを介して利用可能なグローバルインスタンスと同じです。

ローカルスコープ

Vue のローカルスコープを使用すると、単一ファイルコンポーネントでの <style scoped> の動作と同様に、コンポーネントごとに i18n リソースを管理できます。コンポーネントがローカルスコープを持つ場合、そのコンポーネントの i18n リソースのみがアクティブになります。これは、各コンポーネントに固有のロケールメッセージを管理したい場合に特に便利です。

ローカルスコープは、コンポーネント内で i18n オプションを指定することで有効になります。これにより、コンポーネントの初期化時に新しい VueI18n インスタンスが作成されます。その結果、そのコンポーネントで this.$i18n を介してアクセスされる VueI18n インスタンスは、i18n インスタンスの global プロパティを介して利用可能なグローバル VueI18n インスタンスとは異なります。

ロケールの変更 (Locale Changing)

ここまでスコープの概念について説明してきました。スコープを理解すれば、ロケールの変更方法を理解するのは簡単です。

グローバルスコープ

アプリケーション全体のロケールを変更したい場合、グローバルスコープを使用すると、各コンポーネントで $i18n.locale を使用できます。

以下はその例です：

const i18n = createI18n({
  locale: 'ja', // 現在のロケールを設定
  messages: {
    en: {
      hello: 'hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  },
  // vue-i18n のその他のオプション ...
  // ...
})

// Vue アプリインスタンスを作成し、Vue I18n をインストールしてマウント！
createApp({
  // Vue のその他のオプション ...
  // ...
}).use(i18n).mount('#app')

コンポーネント：

<template>
  <div class="locale-changer">
    <select v-model="$i18n.locale">
      <option
        v-for="locale in $i18n.availableLocales"
        :key="`locale-${locale}`"
        :value="locale"
      >
        {{ locale }}
      </option>
    </select>
  </div>
</template>

上記の例では、VueI18n インスタンスの availableLocales プロパティを使用して、利用可能なロケールを select 要素のオプションとしてリストしています。$i18n.locale は v-model でバインドされているため、select 要素のオプションを選択することで切り替えることができ、その値が $i18n.locale に設定されます。

ご覧のとおり、グローバルスコープは、アプリケーションのすべてのコンポーネントの UI に表示されるメッセージを一度に切り替えることができるため、非常に便利です。

ローカルスコープ

ローカルスコープの locale は、デフォルトでグローバルスコープから継承されます。したがって、グローバルスコープで locale を変更すると、ローカルスコープの locale も変更されます。

アプリケーション全体のロケールを切り替えたい場合は、createI18n で作成された i18n インスタンスの global プロパティを介して変更する必要があります。

NOTE

グローバルスコープから locale を継承したくない場合は、i18n コンポーネントオプションの sync を false に設定する必要があります。

例：

const i18n = createI18n({
  locale: 'ja', // 現在のロケールを設定
  // vue-i18n のその他のオプション ...
  // ...
})

// Vue アプリインスタンスを作成し、Vue I18n をインストールしてマウント！
createApp({
  // Vue のその他のオプション ...
  // ...
}).use(i18n).mount('#app')


// `global` プロパティを介してロケールを変更

// vue-i18n を legacy: false で使用している場合、i18n.global.locale は ref なので、.value を介して設定する必要があります：
i18n.global.locale.value = 'en'

// それ以外の場合 - legacy: true を使用している場合は、次のように設定します：
i18n.global.locale = 'en'

NOTICE

ローカルスコープの locale を変更しても、グローバルスコープの locale には影響しません。つまり、ローカルスコープコンポーネントで $i18n.locale のロケールを変更しても、アプリケーション全体のロケールは変更されず、そのコンポーネントのみが変更されます。$i18n.locale の代わりに $root.$i18n.locale を使用してください。