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

投稿日: 2022-04-20 2022-10-09
タグ: Vue.js

今日は、国際化（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、カスタムフォーマッターなど、他のいくつかのフォーマット関連機能を提供します。

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 をチェックしてください！ 🤓

getdocs

13036