スコープとロケール変更

スコープ

Vue I18n は国際化(i18n)機能を提供するためにリソースを管理し、ロケール切り替え、各言語のメッセージ(ロケールメッセージ)、日時および数字の命名形式を含みます。これらは VueI18n インスタンスで管理されています。

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

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

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

グローバルスコープ

Vueにおけるグローバルスコープでは、アプリケーション内のすべてのコンポーネントで国際化(i18n)リソースにアクセスおよび管理できます。これはi18n管理を中央集権化するのに特に役立ちます。

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

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

ローカルスコープ

Vueにおけるローカルスコープでは、単一ファイルコンポーネントの <style scoped> のように、コンポーネントごとにi18nリソースを管理できます。コンポーネントにローカルスコープがある場合、そのコンポーネントのi18nリソースのみが有効になります。これは各コンポーネント固有のロケールメッセージを管理したいときに特に有用です。

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

ロケール変更

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

グローバルスコープ

アプリケーション全体のロケールを変更したい場合は、グローバルスコープを使用して各コンポーネントの $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 プロパティ経由で変更する必要があります。

注意

グローバルスコープから 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'

通知

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