Zenn
🗺️

【フロントエンドで完結】vue-i18n で多言語対応

2023/07/16に公開
JavaScript
Vue.js
frontend
i18n
tech

vue

JavaScript フレームワークの 1 つ

ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。シンプルなものから複雑なものまで、ユーザーインターフェースの開発を効率的に支えるフレームワークです。

出典：https://ja.vuejs.org/guide/introduction.html

i18n

今回の記事のメイン

国際語化（Internationalization）の略。
Internationalization という単語は、先頭の“I”と末尾の“N”の間に18文字あるので、
短く言い換えて、「アイ・エイティーン・エヌ」と素早く発音できるようにしている

I18Nとは、ある特定の１カ国語しか扱うことができないプログラムなどを、
それ以外の言語圏でも利用できるように改造、変更することを指す。

出典：https://atmarkit.itmedia.co.jp/icd/root/63/50872763.html

01：Vueプロジェクト作成

プロジェクト作成

// 選択肢について、すべて No でも問題なく動きます
npm init vue@latest

作成したプロジェクトをローカルで立ち上げる

cd 設定したプロジェクト名
npm install

// vue create から作成した場合はこの限りではございません
// package.json を確認しましょう
npm run dev

Vueのプロジェクト作成について、詳しく解説されておられます↓↓
https://reffect.co.jp/vue/create-vue/

02：install vue-i18n

npm install vue-i18n

https://kazupon.github.io/vue-i18n/introduction.html

03：json ファイルの準備・記載

言語切り替えの設定を json ファイルに集約

~/src/i18n/ja.json

{
  "message": {
    "hello": "こんにちは"
  }
}

~/src/i18n/en.json

{
  "message": {
    "hello": "Hello"
  }
}

04：main.js に組み込み

~/src/main.js

import { createApp } from "vue";
import App from "./App.vue";

import { createI18n } from "vue-i18n";
import ja from "./i18n/ja";
import en from "./i18n/en";

const i18n = createI18n({
  legacy: false,
  locale: "ja",
  messages: {
    ja: ja,
    en: en,
  },
});

createApp(App).use(i18n).mount("#app");

05：切り替えの反映

~/src/components/HelloWorld.vue

<template>
  <div class="button-area">
    <input
      class="left"
      type="button"
      value="日本語"
      @click="handleChangeLanguage('ja')"
    />
    <input
      class="right"
      type="button"
      value="English"
      @click="handleChangeLanguage('en')"
    />
  </div>

  <div class="">言語切り替えのテストです・Language switching test</div>

  <div class="show-language">{{ now }} : {{ t("message.hello") }}</div>
</template>

<script>
import { ref } from "vue";
import { useI18n } from "vue-i18n";

export default {
  name: "HelloWorld",
  setup() {
    const { t, locale } = useI18n({ useScope: "global" });
    const now = ref("日本語");

    const handleChangeLanguage = (language) => {
      console.log(language);
      console.log(locale.value);

      let selected;
      language == "ja" ? (selected = "ja") : (selected = "en");
      language == "ja" ? (now.value = "日本語") : (now.value = "English");

      locale.value = selected;
    };

    return {
      now,
      handleChangeLanguage,
      t,
    };
  },
};
</script>

<style scoped>
.button-area {
  justify-content: center;
  display: flex;
}

.button-area input {
  margin: 50px;
  padding: 10px 30px;
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;
}

.button-area input:hover {
  color: #fff;
  background: #ddd;
}

.show-language {
  font-weight: bold;
  padding: 10px;
}
</style>

実際のケースですと、 header や設定画面に設置されていることが多いですね。

再度まで読んでいただきありがとうございました🙇

Discussion