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

[Vue I18n](https://kazupon.github.io/vue-i18n/)は、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです。簡単なVueアプリケーションで、このプラグインを試してみましょう。

# 01 Vueプロジェクトのひな形作成とVue I18nのインストール
ひな形にするプロジェクトは、Vue CLIを用いて単一ファイルコンポーネントとしてつくることにします(「[Vue CLI 3入門](http://www.fumiononaka.com/Business/index.html#Vue_CLI)」参照)。コマンドラインツールから、`vue create`につづけてプロジェクト名(今回は`vue-i18n-test`)を打ち込めば、その名前のフォルダにファイルがつくられます。

```terminal
vue create vue-i18n-test
```

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

```terminal
cd vue-i18n-test
npm run serve
```

#### 図001■ ローカルサーバーで開いたプロジェクトのひな形ページ
![FN1811001_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128949/374ec677-5b93-04ac-b8c2-8e11fe80693e.png)

つぎに、`vue-i18n`をnpmでインストールします(「[Installation](https://kazupon.github.io/vue-i18n/installation.html)」参照)。

```terminal
npm install vue-i18n
```


# 02 Vue I18nで日本語テキストに切り替える
Vue I18nの設定は、モジュール`js:src/main.js`に定めます。`VueI18n`を`import`したうえで、プラグインをVueにインストールするのが、[`Vue.use()`](https://jp.vuejs.org/v2/api/#Vue-use)メソッドです。日英のテキストは、それぞれ`ja`と`en`というプロパティに納め、変数(`messages`)にとっておきましょう。`VueI18n`のコンストラクタには、プロパティ[`locale`](https://kazupon.github.io/vue-i18n/api/#locale-2)と[`messages`](https://kazupon.github.io/vue-i18n/api/#messages-2)を加えた引数オブジェクトが渡されます。そして、`Vue()`コンストラクタの引数オブジェクトには、オプション`i18n`を添えてください(「Getting started」の「[JavaScript](https://kazupon.github.io/vue-i18n/started.html#javascript)」参照)。

```js: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`](https://kazupon.github.io/vue-i18n/api/#vue-injected-methods)メソッドによりロケールに応じたテキストが得られるのです(「[Formatting](https://kazupon.github.io/vue-i18n/guide/formatting.html)」参照)。`locale`プロパティの値は、`'ja'`としましたので、日本語テキストが示されます(図002)。

```vue:src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{$t("message.welcome")}}</h1>

</template>
```

#### 図002■日本語化されたテキスト
![1909001_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128949/0176010e-fb5d-83c1-0111-d0937e79f558.png)


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

```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()`メソッドで送るだけです。

```vue: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](https://kazupon.github.io/vue-i18n/guide/locale.html)」参照)。なお、`$i18n`は`VueI18n`インスタンスを参照するプロパティです。これで、テキストの日英切り替えができます。

```vue: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](https://bootstrap-vue.js.org)も試しに使っています。

#### サンプル001■Testing Vue I18n and BootstrapVue
[![1909001_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128949/a1516c5f-3f96-c9a9-3d3f-430d204e4508.png)](https://codesandbox.io/s/testing-vue-i18n-and-bootstrapvue-uxrpb)
[\>\> CodeSandboxへ](https://codesandbox.io/s/testing-vue-i18n-and-bootstrapvue-uxrpb)