Vue.js: Vue I18nでアプリケーションを多言語に対応させる

Vue I18nは、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです。簡単なVueアプリケーションで、このプラグインを試してみましょう。

01 Vueプロジェクトのひな形作成とVue I18nのインストール

ひな形にするプロジェクトは、Vue CLIを用いて単一ファイルコンポーネントとしてつくることにします(「Vue CLI 3入門」参照)。コマンドラインツールから、vue createにつづけてプロジェクト名(今回はvue-i18n-test)を打ち込めば、その名前のフォルダにファイルがつくられます。

vue create vue-i18n-test

プロジェクトのディレクトリに切り替えて、つぎのnpm runコマンドを入力すると、ひな形のプロジェクトがローカルサーバーで起ち上がります(図001)。

cd vue-i18n-test
npm run serve

図001■ ローカルサーバーで開いたプロジェクトのひな形ページ

つぎに、vue-i18nをnpmでインストールします(「Installation」参照)。

npm install vue-i18n

02 Vue I18nで日本語テキストに切り替える

Vue I18nの設定は、モジュールjs:src/main.jsに定めます。VueI18nをimportしたうえで、プラグインをVueにインストールするのが、Vue.use()メソッドです。日英のテキストは、それぞれjaとenというプロパティに納め、変数(messages)にとっておきましょう。VueI18nのコンストラクタには、プロパティlocaleとmessagesを加えた引数オブジェクトが渡されます。そして、Vue()コンストラクタの引数オブジェクトには、オプションi18nを添えてください(「Getting started」の「JavaScript」参照)。

src/main.js

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    message: {
      welcome: 'Welcome to Your Vue.js App',
    }
  },
  ja: {
    message: {
      welcome: 'Vue.jsアプリケーションへようこそ',
    }
  }
}

const i18n = new VueI18n({
  locale: 'ja',
  messages,
})
new Vue({
  render: h => h(App),
  i18n
}).$mount('#app')

コンポーネントsrc/components/HelloWorld.vueのテンプレートは、二重波かっこ{{}}の中で$tメソッドによりロケールに応じたテキストが得られるのです(「Formatting」参照)。localeプロパティの値は、'ja'としましたので、日本語テキストが示されます(図002)。

src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{$t("message.welcome")}}</h1>

</template>

図002■日本語化されたテキスト

03 ロケールを切り替える

localeプロパティの値は、切り替えられます。ボタンで試してみましょう。ボタンの表記も変えたいので、モジュールsrc/main.jsの変数に、つぎのようにテキストを加えてください。

src/main.js

const messages = {
  en: {
    message: {

      change_locale: 'Change Locale'
    }
  },
  ja: {
    message: {

      change_locale: 'ロケール変更'
    }
  }
}

コンポーネントsrc/components/HelloWorld.vueのテンプレートにボタンとその表記を追加します。@clickイベントのハンドラメソッド(changeLocale())は、親コンポーネントにイベント(change-locale)を$emit()メソッドで送るだけです。

src/components/HelloWorld.vue

<template>
  <div class="hello">

    <div>
      <button type="button" @click="changeLocale">
        {{$t("message.change_locale")}}
      </button>
    </div>
  </div>
</template>

<script>

export default {

  methods: {
    changeLocale() {
      this.$emit('change-locale');
    }
  }
}
</script>

イベント(change-locale)を受け取った親コンポーネントは、localeプロパティの値を切り替えます(「Locale changing」参照)。なお、$i18nはVueI18nインスタンスを参照するプロパティです。これで、テキストの日英切り替えができます。

src/App.vue

<template>
  <div id="app">

    <HelloWorld @change-locale="changeLocale" />
  </div>
</template>

<script>

export default {

  methods: {
    changeLocale() {
      this.$i18n.locale = (this.$i18n.locale === 'ja') ? 'en' : 'ja';
    }
  }
}
</script>

コードと動きが確かめられるように、サンプル001をCodeSandboxに公開しました。なお、このサンプルはBootstrapVueも試しに使っています。

サンプル001■Testing Vue I18n and BootstrapVue

>> CodeSandboxへ