[Vue.js]Element UIをCDN利用環境で日本語化する方法

2020-11-12 2021-07-23

最近Vue.jsを勉強しはじめました。

HTML＋JavaScriptよりも簡単に動きの制御を実現できるので、コレいいなと思って理解を深めている最中です。

https://jp.vuejs.org/

そんな中、見た目を簡単にデザインできる、Element UIというライブラリと組み合わせることで、見た目がきれいでリッチな画面を簡単に作れるということを知りました。

https://element.eleme.io/#/en-US

Element UIを使うことで、CSSを書かなくてもこんな感じに各部品をでスタイリッシュな感じで実現することが可能になります。

私の場合はVue.jsの勉強にオンラインのサービス（CodePenなど）を使っているのですが、Vue+Element UIでのサンプル作成中に、ふと次の現象に気づきました。

漢字がなんとなく違う気がする・・文字化け？？

セレクトボックスでplaceholderを指定しない場合、次のように表示されます。

よくよく見てみると、文字化けしているわけではなく中国語で表示されているようでした。

英語じゃないのはなぜだろう？ということでよくよく調べてみると、どうやらElement UIは中国製のようで、デフォルト言語が中国語になっているようでした。

この影響によりメッセージや表示内容に漢字が含まれる場合、中国語の漢字が一部に使用されて表示されるということが発生します。

日本語の漢字が使わないとちょっとまずいので、ちゃんと日本語にしたいな・・・

と思い、Element UIを日本語化するにはどうすればいいのかググってみたのですが、ちょうどよいサイトが見当たりませんでした。

そこで今回は、CDNでのElement UIの日本語化方法についてまとめてみました。

CDNを利用したVue+Element UI環境

サンプルとして、JavaScriptはVueとElement UIを、CSSはElement UIのをunpkg.comのCDNから読み込みます。

HTMLではscriptタグでJavaScriptファイルを、CSSは@importでCSSファイルを読み込めば、すぐに検証環境は構築できます。

実際に試したい場合、CodePen等に以下の設定をしてみましょう。

■HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.0/lib/index.js"></script>
<div id="app">
  <el-select v-model="value" >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</div>

■CSS

@import url("//unpkg.com/element-ui@2.14.0/lib/theme-chalk/index.css");

■JavaScript

let Main = {
  data() {
    return {
      options: 
       [{value: 'Option1', label: 'Option1'}, 
        {value: 'Option2', label: 'Option2'}],
      value: ''
    }
  }
}
let Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

このサンプルでは、JavaScript側でセレクトボックスの選択肢と値を定義し、それをHTML側でセレクトボックスに表示しています。

セレクトボックスのプレースホルダーは特に定義していません。

通常、Vueのみで実現した場合は空欄表示となりますが、今回はElement UIを使用しているため、デフォルト文字が表示されています。

デフォルトで出てくるのは便利ではありますが、デフォルトだと文字は中国語表記になります。

この「请选择」という表示を、中国語から日本語化します。

参考

ちなみに、　请选择　は　選んでください　という意味のようです。

Element UIの日本語化方法

Element UIを日本語化するにはElement UIに対してlocaleを指定する必要がありますが、それには日本語化用のjsファイルを読み込む必要があります。

今回はバージョン2.14.0のElement UIを使用していますので、日本語化用のJavaScriptファイルもバージョンを合わせたものを使用します。

https://unpkg.com/element-ui@2.14.0/lib/umd/locale/ja.js

これをまずHTML側で読み込むように修正します。

次のように、element-uiのindex.jsの次に、日本語化用のja.jsを定義します。以下例だと3行目の部分です。

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.0/lib/index.js"></script>
<script src="//unpkg.com/element-ui@2.14.0/lib/umd/locale/ja.js"></script>
<div id="app">
  <el-select v-model="value" >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</div>

この状態で実行するとどうなるかというと、変わらず中国語表記のままになります。

合わせて、Element UIにローケルを定義します。

以下例の1行目のように「ELEMENT.locale(ELEMENT.lang.ja)」を追加します。

ELEMENT.locale(ELEMENT.lang.ja)
let Main = {
  data() {
    return {
      options: 
      [{value: 'Option1', label: 'Option1'}, 
        {value: 'Option2', label: 'Option2'}],
      value: ''
    }
  }
}
let Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

これで、Element UIの日本語化は完了です。