Element (element-ui) について

Element (element-ui) はVue.jsで使用するUIコンポーネント集です。jQueryに対するjQuery UIのようなものだと思ってもらえてばだいたい合っていると思います。

この記事のテーマ

Elementは（そもそもVue.js自体がそうですが）、npmコマンドで使うのが一般的で、CDNでの使い方に関する情報はあまりありません。しかもCDNでは公式サンプル通りにやると中国語が表示されてしまいうまく日本語化できません。そこで簡単なサンプルを作ってみました。

ターゲットとしてはWebアプリというよりはWebサイト寄りのプロジェクトに対して「jQueryの代わりにVue.jsを使いたい」という方を想定しています。このサンプル自体はそれほど意味のあるものではありませんが、どのように書けばよいのかがわかれば参考になるかなと思いますので、興味がある方は御覧ください。

npmコマンドとCDN

まず、npmコマンドとCDNの違いについて説明します。

Vue.jsのチュートリアルなどでは、まず最初にだいたい以下のようなことが書いてあります。

$ npm install vue
$ npm install --global vue-cli
$ vue init webpack my-project
...

これがnpmコマンドです。自分の環境の中でnpmコマンドなどを使って開発環境を用意し、最後にビルドしapplication.jsなどにまとめてからデプロイする、というワークフローになります。ReactやAngularなどもこのような手法を取っていますし、Vue.jsでも多くの方はこのようにやっていると思います。こういう方はこの記事を読む必要はありません。

対して、

  ...
  <head>
    <meta charset="utf-8" />
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    ...
  </head>
  <body>
    ...

のようにHTML上で直接vue.jsを呼び出して使う方法がCDNです（正確にはこの手法自体をCDNと呼ぶのには若干抵抗がありますが、最近の傾向としてはそう呼ばれています）。jQuery の場合にはこのような使い方をしている方が多いと思います。この記事は、この手法でどうやって Element を使うのか、というお話です。

CDNでElementを使うための手順

早速結論を書きます。

CDNを以下のように記述します。

  ...
  <head>
    <meta charset="utf-8" />
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <script src="http://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://unpkg.com/element-ui/lib/umd/locale/ja.js"></script>
    ...
  </head>
  <body>
    ...

headの中である必要はありませんが、必ずこの順番で書いてください。
1行目はVue.jsの読み込みです。
2行目と3行目はElementのスタイルと本体の読み込みです。
公式を含め、巷のサンプルのほとんどでは最後の1行「locale/ja.js」が書かれていません。これを書いていないと各種表示がデフォルトの中国語のままになってしまいます。これを追加するのがポイント1です。
上記の状態では日本語リソースが読み込まれますが、まだそれを使用してはいません。使用するにはさらに以下のようにします。

    ...
  </body>
  <script>
    ELEMENT.locale(ELEMENT.lang.ja)
    var hoge = new Vue({
    ...

ここで ELEMENT.locale を指定するのがポイント2です。これで日本語でElementのコンポーネントを使用することができます。

サンプル

全体としてはたとえば以下のようになります。このままHTMLとして保存しブラウザで開いてみてください。

test.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <script src="http://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://unpkg.com/element-ui/lib/umd/locale/ja.js"></script>
  </head>
  <body>
    <table id="id_list">
      <tr><th>名前</th><th>住所</th><th>生年月日</th></tr>
      <tr v-for="item in items"><td>{{item.namae}}</td><td>{{item.address}}</td><td>{{item.birthdate}}</td></tr>
    </table>
    <form id="id_form1">
      <label>名前：
        <input name="name_namae" id="id_namae" type="text" v-model="namae" />
      </label>
      <label>住所：
        <input name="name_address" id="id_address" type="text" v-model="address" />
      </label>
      <label>生年月日：
      <el-date-picker
        name="name_birthdate" 
        id="id_birthdate"
        v-model="birthdate"
        type="date"
        placeholder="日付を選択してください">
      </el-date-picker>
      </label>
      <button type="button" id="id_add_button" v-on:click="add">追加</button><br>
      <button type="button" id="id_save_button" v-on:click="save">保存</button>
    </form>
  </body>
    <script>
        ELEMENT.locale(ELEMENT.lang.ja)
        var list = new Vue({
            el: '#id_list',
            data: {
              items: []
            }
        })
        var form1 = new Vue({
            el: '#id_form1',
            data: {
            namae: '',
            address: '',
            birthdate: ''
            },
            methods: {
              add: function (event){
                list.items.push({'namae': this.namae, 'address':this.address, 'birthdate': this.birthdate})
                this.namae = ''
                this.address = ''
                this.birthdate = ''
              },
              save: function (event){
                console.log(list.items)
              }
            }
        })
    </script>
</html>

このサンプルでは Element の Dateピッカーコンポーネントを使用しています。
Dateピッカーがきちんと日本語になっているのも確認できると思います。

サンプル2

ついでに Dialogコンポーネントも使ってみます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <script src="http://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://unpkg.com/element-ui/lib/umd/locale/ja.js"></script>
  </head>
  <body>
    <table id="id_list">
      <tr><th>名前</th><th>住所</th><th>生年月日</th></tr>
      <tr v-for="item in items"><td>{{item.namae}}</td><td>{{item.address}}</td><td>{{item.birthdate}}</td></tr>
    </table>
    <div id="id_form1">
      <el-button type="text" @click="dialogFormVisible = true">追加</el-button>
      <el-dialog title="address" :visible.sync="dialogFormVisible">
        <form>
          <label>名前：
            <input name="name_namae" id="id_namae" type="text" v-model="namae" />
          </label>
          <label>住所：
            <input name="name_address" id="id_address" type="text" v-model="address" />
          </label>
          <label>生年月日：
          <el-date-picker
            name="name_birthdate" 
            id="id_birthdate"
            v-model="birthdate"
            type="date"
            placeholder="日付を選択してください">
          </el-date-picker>
          </label>
          <button type="button" id="id_add_button" v-on:click="add">追加</button><br>
        </form>
      </el-dialog>
    </div>
  </body>
    <script>
      ELEMENT.locale(ELEMENT.lang.ja)
      var list = new Vue({
          el: '#id_list',
          data: {
            items: []
          }
      })
      var form1 = new Vue({
          el: '#id_form1',
          data: {
            namae: '',
            address: '',
            birthdate: '',
            dialogFormVisible: false,
          },
          methods: {
            add: function (event){
              list.items.push({'namae': this.namae, 'address':this.address, 'birthdate':this.birthdate})
              this.namae = ''
              this.address = ''
              this.birthdate = ''
            },
            save: function (event){
              console.log(list.items)
            }
          }
      })
    </script>
</html>

まとめ

解説は以上です。
Vue.js は ReactやAngularなどに比べると学習コストが低いですし、このようにCDNを使って「普通のWebサイトに部分的に組み込みやすい」という利点があります。みなさんも試してみてください。そしてノウハウを共有しましょう！
ご意見、ご指摘などあればよろしくお願いいたします。

Vue.js のUIライブラリ Element をCDNで「日本語で」使う