Vue.jsのi18nとPrimeVueのコンポーネント

投稿日 2023年12月2日
更新日 2023年12月8日
著者 tanatiyo
カテゴリー Vue.js

以下、作業用メモです。

What is Vue I18n? | Vue I18n

Internationalization plugin for Vue.js

vue-i18n.intlify.dev

公式

Vue.jsでi18nに対応するための手順

以下の手順が必要。

1. i18nとは何かを理解する
2. Vue I18nプラグインをインストールする
3. プラグインをVueアプリケーションに登録する
4. ロケールファイルを作成する
5. テンプレートやスクリプトでロケールメッセージを使用する

1. i18nとは何かを理解する

i18nとは、internationalization（国際化）の略語で、ソフトウェアやウェブサイトなどのコンテンツを、様々な言語や地域に合わせて表示できるようにすること。例えば、日本語と英語のユーザーに対して、同じアプリケーションでも、それぞれの言語でメッセージや日付や通貨などを表示することができる。

2. Vue I18nプラグインをインストールする

Vue I18nプラグインは、Vue.jsでi18n対応を簡単に実現できるプラグイン。このプラグインをインストールするには、npmやyarnなどのパッケージマネージャーを使って、以下のコマンドを実行する。

# npm
npm install vue-i18n

# yarn
yarn add vue-i18n

3. プラグインをVueアプリケーションに登録する

プラグインをインストールしたら、Vueアプリケーションに登録する必要がある。これは、main.jsなどのエントリーポイントファイルで、以下のように記述する。

// javascript 
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // プラグインを登録する

const i18n = new VueI18n({
  locale: 'ja', // デフォルトの言語を指定する
  messages: {
    // ロケールメッセージを定義する
    ja: {
      hello: 'こんにちは'
    },
    en: {
      hello: 'Hello'
    }
  }
})

new Vue({
  i18n, // i18nオプションを追加する
  // ...
}).$mount('#app')

4. ロケールファイルを作成する

ロケールファイルとは、言語ごとにメッセージや日付や通貨などのフォーマットを定義したファイル。Vue I18nプラグインでは、JSON形式でロケールファイルを作成できる。例えば、以下のように、日本語と英語のロケールファイルを作成することができる。

// json
// src/locales/ja.json
{
  "hello": "こんにちは",
  "date": "今日は{date}です",
  "price": "{price}円"
}

// src/locales/en.json
{
  "hello": "Hello",
  "date": "Today is {date}",
  "price": "{price} yen"
}

5. テンプレートやスクリプトでロケールメッセージを使用する

ロケールファイルを作成したら、Vueアプリケーションに読み込ませる必要がある。これは、main.jsなどのエントリーポイントファイルで、以下のように記述する。

// javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// ロケールファイルをインポートする
import ja from './locales/ja.json'
import en from './locales/en.json'

const i18n = new VueI18n({
  locale: 'ja',
  messages: {
    // ロケールファイルを登録する
    ja,
    en
  }
})

new Vue({
  i18n,
  // ...
}).$mount('#app')

上記で設定したデータをPrimeVueのToggleButtonにCustomizeでデータを渡したい

Customizedの場合は、offLabelやonLabelに任意のテキストやアイコンを指定できる。データを入れたい場合は、v-bindを使って、データプロパティやコンピューテッドプロパティなどにバインドできる。

i18n対応する場合は、$tメソッドを使って、ロケールメッセージのキーを指定できる。例えば、以下のように記述すると、offLabelにthis.$t('hello')というデータを入れて、i18n対応することができる。

<ToggleButton v-model="checked" :offLabel="this.$t('hello')" />

:offLabel=”this.$t(‘hello’)” という部分は、以下のように動作する。

– :offLabelは、ToggleButtonコンポーネントのプロパティの一つで、ボタンがオフの状態のときに表示されるラベルを指定。
– this.$t(‘hello’)は、Vue I18nプラグインのメソッドで、ロケールメッセージのキーを引数にとって、現在の言語に応じたメッセージを返す。
– この場合、’hello’というキーに対応するメッセージは、ロケールファイルで定義されている。例えば、日本語のロケールファイルでは、’hello’に’こんにちは’というメッセージが割り当てられている。
– したがって、:offLabel=”this.$t(‘hello’)” という部分は、ボタンがオフの状態のときに、’hello’というキーに対応するメッセージをラベルとして表示するという意味になる。
– 例えば、現在の言語が日本語の場合は、’こんにちは’というラベルが表示される。現在の言語が英語の場合は、’Hello’というラベルが表示される。

【参考サイト】

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

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

qiita.com

Vue.js: Vue I18nの公式ドキュメントに見当たらず悩んだふたつのこと – Qiita

Vue I18nは、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです。ページに表示するテキストを、ロケールに応じて切り替えられます。インストールから基…

qiita.com

computedにてメソッドを指定することも可能

computedプロパティ部分で関数を定義することは可能。
例えば、以下のように記述すると、現在の言語に応じて、’hello’というキーに対応するメッセージに’!’を付け加えたものを返す関数を定義できる。

 // javascript 
computed: { helloWithExclamation () { return this.$t('hello') + '!' } }

この場合、現在の言語が日本語の場合は、’こんにちは!’というメッセージが返されます。現在の言語が英語の場合は、’Hello!’というメッセージが返される。このように、computedプロパティ部分で関数を定義することで、ロケールメッセージに対してカスタマイズした処理を行うことができる。詳しくは、[Vue I18nのドキュメント]を参照。

また、$t(‘hello’)というメソッドは、Vue I18nプラグインで定義されている。このメソッドは、Vueのインスタンスにミックスインされるため、this.$tという形で呼び出すことができる。このメソッドは、ロケールメッセージのキーを引数にとって、現在の言語に応じたメッセージを返します。詳しくは、[Vue I18nのドキュメント]を参照。

ToggleButtonのoffLabelプロパティに関数をバインドする

Vue.jsでは、プロパティに関数をバインドすることができる。
その関数はコンポーネントのメソッドとして定義することが一般的。以下はその例。

<template>
  <ToggleButton :offLabel="getOffLabel()" />
</template>

<script>
export default {
  methods: {
    getOffLabel() {
      // ここで何かの処理を行う
      return this.$t('message.off');
    }
  }
}
</script>

この例では、getOffLabelメソッドがoffLabelプロパティにバインドされている。このメソッドは何かの処理を行い、その結果を返す。このメソッドは、コンポーネントの状態やプロパティに基づいて動的な値を生成するために使用することができる。

ただし、注意点として、関数をプロパティにバインドすると、その関数は頻繁に再評価される可能性がある。これはパフォーマンスに影響を与える可能性があるため、関数内で高負荷な処理を行う場合は注意が必要。また、関数が副作用を持つ場合（例えば、データを変更する場合）も注意が必要。関数が再評価されるたびに副作用が発生すると、予期しない動作を引き起こす可能性がある。

具体的にi18n対応する際に準備するファイルとjsファイル類（computedにて関数用意するパターン）

※自分がやりたいことをやる分には、わざわざcomputedで関数指定しなくても良いかも。。。

Vue I18nを使用して多言語対応をする場合、まずは各言語の翻訳をJSON形式で用意する。
以下に英語と日本語の翻訳を持つJSONファイルの例を示す。

en.json:

{
  "toggle": {
    "on": "On",
    "off": "Off"
  }
}

ja.json:

{
  "toggle": {
    "on": "オン",
    "off": "オフ"
  }
}

次に、これらの翻訳を読み込み、Vue I18nのインスタンスを作成する。
そして、そのインスタンスをVueのプラグインとして登録。これにより、全てのVueコンポーネントから翻訳を利用することができる。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import en from './locales/en.json';
import ja from './locales/ja.json';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // デフォルトの言語を設定
  messages: {
    en,
    ja
  }
});

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

最後に、ToggleButtonコンポーネントのoffLabelとonLabelに翻訳を適用する。これには、Vue I18nの$tメソッドを使用する。このメソッドは、指定したキーに対応する翻訳を返す。

<template>
  <ToggleButton :offLabel="offLabel" :onLabel="onLabel" />
</template>

<script>
export default {
  computed: {
    offLabel() {
      return this.$t('toggle.off');
    },
    onLabel() {
      return this.$t('toggle.on');
    },
  },
};
</script>

このように、Vue I18nを使用すれば、簡単に多言語対応を実現することができる。また、言語を切り替えるには、Vue I18nのlocaleプロパティを変更するだけ。これにより、全ての翻訳が自動的に更新される。

この記事を書いた人

tanatiyo

記事一覧

ウェブサイト