【Vue】i18n対応（国際化）

  • 投稿日
  • 著者 tanatiyo
  • カテゴリー Vue.js

以下、自分用の作業メモです。

Vue.js 3でi18n（国際化）を実現する方法

Vue.js 3でi18n（国際化）を実現する方法はいくつかありますが、最も一般的な方法は、Vue I18n ライブラリを使用することです。以下は、Vue I18n ライブラリを使用した基本的な手順です。

  1. Vue I18n ライブラリのインストール:
    Vue I18n ライブラリをプロジェクトにインストールします。npm や yarn などのパッケージマネージャーを使用して行います。
   npm install vue@next
   npm install vue-i18n@9
  1. Vue I18n の初期化:
    Vue I18n をプロジェクトで使用するには、初期化が必要です。通常、src/main.js や src/main.ts ファイルで以下のように初期化します。
   import { createApp } from 'vue';
   import { createI18n } from 'vue-i18n';
   import App from './App.vue';

   const i18n = createI18n({
     locale: 'ja', // 初期ロケール
     messages: {
       ja: require('./locales/ja.json'), // ロケールごとのメッセージファイル
       en: require('./locales/en.json'),
     },
   });
   const app = createApp(App);
   app.use(i18n);
   app.mount('#app');
  1. メッセージファイルの作成:
    ロケールごとにメッセージファイルを作成します。これにはJSON形式が一般的です。
    例: locales/ja.json
   {
     "greeting": "こんにちは、世界！"
   }

例: locales/en.json

   {
     "greeting": "Hello, World!"
   }
  1. コンポーネントでの使用:
    作成したメッセージをコンポーネント内で使用します。
   <!-- App.vue -->
   <template>
     <div>
       <p>{{ t('greeting') }}</p>
     </div>
   </template>

   <script>
   export default {
     methods: {
       t(key) {
         return this.$t(key);
       },
     },
   };
   </script>

これで、Vue I18n を使用して基本的な国際化のセットアップができました。上記の手順は非常に基本的なものであり、実際のプロジェクトによっては、動的なロケール切り替え、数値や日付のフォーマット、プレースホルダーの使用など、より高度な国際化の機能を組み込むことがあります。 Vue I18n のドキュメントを参照して、プロジェクトの要件に合った設定を行うと良いでしょう。

Introduction | Vue I18n
Vue I18n is internationalization plugin for Vue.js
kazupon.github.io

CompositionAPIを用いた場合

Composition APIを使用する場合も、Vue I18nの基本的な使い方は変わりませんが、コードの構造が変わります。以下に、Composition APIを使用したVue I18nのセットアップ例を示します。

  1. Vue I18n ライブラリのインストール:
    Vue I18n ライブラリをプロジェクトにインストールします。
   npm install vue@next
   npm install vue-i18n@9
  1. Vue I18n の初期化:
    Composition APIを使用する場合、setup関数内で初期化を行います。
   // main.js or main.ts
   import { createApp } from 'vue';
   import { createI18n } from 'vue-i18n';
   import App from './App.vue';

   const i18n = createI18n({
     locale: 'ja',
     messages: {
       ja: require('./locales/ja.json'),
       en: require('./locales/en.json'),
     },
   });

   const app = createApp(App);
   app.use(i18n);
   app.mount('#app');
  1. コンポーネントでの使用:
    Composition APIを使用すると、setup関数内で国際化関連のロジックを定義します。
   <!-- App.vue -->
   <template>
     <div>
       <p>{{ t('greeting') }}</p>
     </div>
   </template>

   <script setup>
   import { ref } from 'vue';

   const t = (key) => {
     return i18n.global.t(key);
   };
   </script>

これでComposition APIを使用したVue I18nのセットアップが完了しました。Composition APIでは、setup関数内でロジックをまとめることができ、コードがより構造化され、再利用性が向上します。

JSON ファイルについて

Vue I18nでは、ロケールごとにメッセージファイルを作成することが一般的ですが、その保存方法や拡張子はプロジェクトやチームの慣習により異なります。一般的な方法や拡張子の例をいくつか挙げてみましょう。

  1. 単一の JSON ファイル:
  • locales/messages.json
  • locales/ja.json, locales/en.json この方法では、すべてのメッセージが単一のJSONファイルにまとめられています。ロケールごとに分かれていないため、ファイル数は少なくなりますが、管理がやや複雑になることがあります。
  1. ロケールごとにファイルを分割:
  • locales/ja/messages.json
  • locales/en/messages.json
    各ロケールごとにメッセージが分割されているため、特定のロケールのメッセージを見つけやすくなります。ただし、ファイル数が増える可能性があります。
  1. JavaScript ファイルを使用:
  • locales/ja/messages.js
  • locales/en/messages.js
    JavaScriptファイルを使用することで、より柔軟にメッセージを管理できます。関数や変数を定義し、動的なメッセージの生成が可能です。ただし、JSONよりも記述が冗長になることがあります。

ファイルの拡張子はJSONが一般的ですが、JavaScriptやTypeScriptも使用されます。選択肢はプロジェクトの要件や開発者の好みによります。

英語用のJSONファイルはエンジニア自身で作成するの？

一般的には、開発者が自身で翻訳ツールを使用してメッセージを作成することは少ないです。代わりに、プロの翻訳者が専門的な知識をもって言語のニュアンスや文化的な違いを考慮して翻訳を行います。

通常、開発者は英語のメッセージを最初に書き、それを翻訳者に渡して他の言語への翻訳を依頼します。翻訳者はその後、専門のツールやサービス（例: Google Translate、DeepL、またはプロの翻訳サービス）を使用して翻訳を行います。

手動で機械翻訳を行うこともできますが、機械翻訳は文脈やニュアンスを正確に理解できないことがあり、特に重要なコンテンツやユーザビリティに影響する可能性があるため、プロの翻訳者の力を借りることが推奨されます。

この記事を書いた人

tanatiyo

記事一覧