フロントエンド

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

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

Vue.jsのサイト

https://jp.vuejs.org/

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

Element UIのサイト

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

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

Element UIを使用したボタンの例
Element UIを使用したラジオの例

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

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

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

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を使用しているため、デフォルト文字が表示されています。

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

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のセレクトボックス

合わせて、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の日本語化は完了です。

Element UIの日本語化後のプレースホルダーの表示

プレースホルダーの表記が「選択してください」という日本語に変わりました。

まとめ

CDNでVue.jsとElement UIを使用した場合の、Element UIの日本語化方法についてご紹介しました。

ポイントは

  1. 日本語化用のJavaScriptファイルを読み込む
  2. ELEMENTに対してローケルを設定する

の2点です。

1のみ行っても日本語化はされないため、2の定義を忘れずに行うようにしましょう。

と、ここまでご紹介したのですが、Element UIのサイトにCDNでの言語設定の方法が書いてあることに気づきました・・。画面左側のメニューの中の「internationalization」の部分です。

Element UIの国際化設定

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

英語ページでは調べたい内容にマッチするキーワードを探すのがが難しいですね。

Twitterでフォローしよう

おすすめの記事