Vue-i18nを使用してVue.jsにi18nを実装する

今日は、Vueアプリでi18nの国際化を実装する方法について説明します。 Vue.jsに取り組んでいるコア開発者の1人である川口和也によって書かれたvue-i18nプラグインを使用します。。

Webアプリで国際化サポートを提供することは、それらを世界中のユーザーが利用できるようにするために不可欠です。世界中の多くの人々が英語を話したり理解したりできますが、i18nサポートを追加することで、アプリケーションをより多くのユーザーに公開しています。

アプリのセットアップ

まず、単純なVueアプリを既に作成していることを前提としています。次に、お好みの方法を使用してvue-i18nプラグインを追加します。

# Yarn
$ yarn add vue-i18n

# npm
$ npm install vue-i18n

# Vue CLI 3.x+
$ vue add i18n

以下では、基本的なVueアプリをセットアップします。プラグインを実際に利用せずにプラグインしていることに気付くでしょうが、これにより、i18nサポートを追加する前にアプリがどのように動作するかがわかります。

main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import App from './App.vue';

Vue.use(VueI18n);

new Vue({
  render: h => h(App),
}).$mount('#app');

App.vue

<template>
  <div id="app">
    <HelloGator />
  </div>
</template>

<script>
import HelloGator from './components/HelloGator.vue'

export default {
  name: 'App',
  components: {
    HelloGator
  }
}
</script>

components / HelloGator.vue

<template>
  <div>Hello, Gator</div>
</template>

<script>
export default { name: 'Gator' }
</script>

フォーマット

vue-i18n プラグインを使用すると、単純な単一ブラケット構文で文字列をフォーマットできます。ここでは、現在のlocaleに応じて変換する必要のある文字列をアプリに提供するmessagesオブジェクトを追加しています。 new VueI18nインスタンスを初期化し、それをVueインスタンスに渡します。

main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import App from './App.vue';

Vue.use(VueI18n);

const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!'
    }
  },
  de: {
    message: {
      hello: 'Guten Tag, {name}!'
    }
  }
};

const i18n = new VueI18n({
  locale: 'en',
  messages
});

new Vue({
  render: h => h(App),
  i18n
}).$mount('#app');

コンポーネントでアプリ文字列を使用するために、 vue-i18n は、指定されたキーの現在のロケールに基づいて翻訳を提供する関数$t()を提供します。この場合、message.hello文字列を要求し、テンプレート変数nameを提供します。

テンプレート：components / HelloGator.vue

<template>
  <div>{{ $t('message.hello', { name: 'Gator' }) }}</div>
</template>

デフォルトではenロケールになっているため、Hello, Gator!が画面に表示されます。

ロケールの変更

ここで、アプリ文字列を追加した他のロケールにアクセスしたり、変更したりする方法について疑問に思われるかもしれません。初期設定でドイツ語ロケールdeのサポートを追加しました。 vue-i18n プラグインは、$i18n変数を介してi18nインスタンスへのアクセスをコンポーネントに提供します。 $i18n.localeを設定するだけで、新しいロケールに切り替えることができます。

その場でロケールを切り替えることができるコンポーネントを追加しましょう。

components / SelectLocale.vue

<template>
  <div>
    <select v-model="$i18n.locale">
      <option
        v-for="(lang, i) in langs"
        :key="`lang-${i}`"
        :value="lang"
      >
        {{ lang }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'SelectLocale',
  data() {
    return { langs: ['en', 'de'] }
  }
}
</script>

テンプレート：App.vue

<template>
  <div id="app">
    <SelectLocale />
    <HelloGator />
  </div>
</template>

スクリプト：App.vue

import HelloGator from './components/HelloGator.vue'
import SelectLocale from './components/SelectLocale.vue'

export default {
  name: 'App',
  components: {
    HelloGator,
    SelectLocale
  }
}

これで、アプリのリロード後、現在のロケールを変更できる<select>要素が表示されます。選択したロケールをdeに変更して、レンダリングされた出力がGuten Tag, Gator!にどのように変化するかを確認してください。

まとめ

vue-i18n プラグインは、既存のVueアプリに国際化を簡単に追加するための優れたソリューションです。これは、すべてではないにしてもほとんどのi18nの懸念事項をカバーする多くの機能を備えた、優れた本番環境対応のライブラリです。いつものように、プラグインのドキュメントをチェックして、プラグインが提供するすべての機能の感触をつかんでください。