Vueを使用したその他のi18n：フォーマットとフォールバック

今日は、国際化（i18n）用のvue-i18nプラグインで利用できるいくつかのフォーマットオプションについて説明します。また、ロケールで使用できる文字列がない場合のフォールバックの処理方法についても説明します。川口和也によって書かれたvue-i18nプラグインを使用します。この記事はこの前の記事から構築されています。これは、Vue.jsアプリの国際化（i18n）にvue-i18nを使用することを紹介しています。

vue-i18n は、アプリの文字列をフォーマットするためのさまざまな方法を提供します。デフォルトのスタイルが気に入らない場合は、カスタムフォーマッターを定義することもできます。特定のロケールの文字列が欠落している場合に役立つフォールバックを提供することもできます。

アプリのセットアップ

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

# Yarn
$ yarn add vue-i18n

# npm
$ npm install vue-i18n

# Vue CLI 3.x+
$ vue add i18n

前回の投稿で中断したところから続行します。その投稿の<SelectLocale />コンポーネントのコードは変更されないためスキップしますが、前回からフォローしている場合は、自由に含めてください🐊！

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');

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>{{ $t('message.hello', { name: 'Gator' }) }}</div>
</template>

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

フォーマット機能

vue-i18nが上記のコードで使用する基本的なフォーマットについてはすでに説明しました。プラグインは、リスト、HTML、カスタムフォーマッターなど、他のいくつかのフォーマット関連機能を提供します。

vue-i18n プラグインは、変数のリストを使用してフォーマットする方法も提供します。文字列の配列を$tの2番目のパラメーターとして渡します。これらのパラメーターは、インデックスを介してアプリの文字列からアクセスできます。

main.js

const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!',
      counting: 'One: {0}, Two: {1}, Three: {2}'
    }
  },
  de: {
    message: {
      hello: 'Guten Tag, {name}!',
      counting: 'Eins: {0}, Zwei: {1}, Drei: {2}'
    }
  }
};

次に、message.counting文字列をHelloGator.vueに追加しましょう。

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

<div>
  {{ $t('message.hello', { name: 'Gator' }) }}
  <br />
  {{ $t('message.counting', ['🐊', '🤖', '👽']) }}
</div>

HTML

vue-i18n プラグインを使用すると、アプリの文字列でHTMLを直接使用することもできます。標準のHTMLはすべてブラウザでレンダリングされます。

以下にmessage.welcomeアプリ文字列を追加し、<strong>タグでラップします。

main.js

const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!',
      counting: 'One: {0}, Two: {1}, Three: {2}',
      welcome: '<strong>Welcome!</strong>'
    }
  },
  de: {
    message: {
      hello: 'Guten Tag, {name}!',
      counting: 'Eins: {0}, Zwei: {1}, Drei: {2}',
      welcome: '<strong>Wilkommen!</strong>'
    }
  }
};

次に、HTMLアプリの文字列をHelloGator.vueに追加しましょう。

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

<div>
  {{ $t('message.hello', { name: 'Gator' }) }}
  <br />
  {{ $t('message.counting', ['🐊', '🤖', '👽']) }}
  <br />
  {{ $t('message.welcome') }}
</div>

ロケールに応じて、太字の Welcome！または Wilkommen！が表示されます。

Ruby on Rails

好みに応じて、RubyonRailsスタイルのi18nもすぐにサポートされます。

const messages = {
  en: {
    message: {
      hello: 'Hello, %{name}!',
      ...
    }
  },
  ...
}

カスタム

この機能はおそらく必要ありませんが、 vue-i18n プラグインを使用すると、独自のカスタムフォーマッターを定義することもできます。これについてはここでは詳しく説明しませんが、ほとんどの場合、プラグインによって使用可能になる$t変換関数の代わりとなる関数を作成する必要があります。詳細については、カスタムフォーマットドキュメントを確認してください。

フォールバック

vue-i18n プラグインを使用すると、現在のロケールに欠落している場合でも、別のロケールのアプリ文字列に簡単にフォールバックできます。

英語でのみ利用できるmessage.descriptionという別のアプリ文字列を追加しましょう。また、fallbackLanguageを指定して、プラグインが別のロケールから欠落している場合に英語のアプリ文字列を使用するようにします。

main.js

const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!',
      description: 'This sentence is in English!'
    }
  },
  de: {
    message: {
      hello: 'Guten Tag, {name}!'
    }
  }
};

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

次に、英語のみのメッセージをHelloGator.vueに追加しましょう。

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

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

ロケールをdeに切り替えると、最初のメッセージがドイツ語で、2番目のメッセージが英語で表示されます。これは、新しいロケールのサポートの追加を開始したいが、まだすべてのアプリ文字列が定義されていない場合に非常に便利です。

まとめ

vue-i18n が提供するすべてのフォーマットオプションを使用すると、カスタムフォーマットロジックを自分で実装する必要があることはめったにありません。アプリの国際化に関連するほとんどのフォーマットのユースケースをカバーするのに十分な、すぐに使えるサポートがあります。いつものように、 docs をチェックしてください！ 🤓