JavaScriptのフレームワークである「Vue.js」、皆さんは使ってますでしょうか。

学習コストの低さ、小規模案件での導入のしやすさ、大規模案件にも対応できる拡張性の高さから、最近はVue.jsばかりいじっています。

今回は、そんなVue.js上で、すぐに高機能なUIパーツが使えるようになるコンポーネント詰め合わせライブラリ「Element」が予想以上にスゴかったので、紹介したいと思います。簡単に高機能なUIが実装できるので、Vue.jsを使ったことがない人も、一読していただき、「Vue.js使ってみよう！」となってくれると、嬉しい限りです。

Vue.jsとは

知らない人のために、Vue.jsの紹介をしておきます。

Vue.jsはJavaScriptフレームワークの一つです。

他の一枚板のフレームワークとは異なり、初めから少しづつ適用していけるように設計されています。他のライブラリや既存のプロジェクトに統合したりすることも比較的容易にでき、なおかつ速度的にも他のフルスタックなフレームワークよりも優れています。

jQueryしか使ったことがない人はぜひ、Vue.jsからJavaScriptフレームワークの世界へ足を踏み入れて欲しいと思うくらい、学習コストが低く、優れたフレームワークだと思っています。

詳しい仕様は公式ページを参照してください。

Elementとは

今回紹介する「Element」は、Vue.js 2.0ベースのコンポーネントライブラリです。様々な便利で高機能なUIコンポーネントがたくさん含まれています。

Vue.jsでは、コンポーネントを定義すると、まるで新たにHTMLに定義された要素のように機能します。

例えば、以下のように、my-componentというのを定義すると、HTML（もしくはテンプレート文字列）に記述することで、定義したコンポーネントが表示され、利用できます。

<div id="example">
  <my-component></my-component>
</div>

// 登録する
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// root インスタンスを作成する
new Vue({
  el: '#example'
})

実際には、レンダリングすると以下のようにコンポーネントの要素が置換されます。

<div id="example">
  <div>A custom component!</div>
</div>

コンポーネントとは、簡単にいうと、このように機能とUIを分離・再利用することができるようにしたものです。

そして、Elementには、このコンポーネント定義が多く含まれており、高機能なUIを今すぐに、あなたのアプリケーションに組み込むことができるように設計されています。

こちらのページに、インストールできるコンポーネントの一覧とそのデモが用意されています。これだけたくさんのコンポーネントを、たった数行の定義だけで、あなたのWebアプリケーションに組み込むことができます。

使ってみる

では、実際に導入してみようと思います。

今回はvue-cliを使ってサクッとVue.jsプロジェクトを用意します。グローバルにvue-cliをインストールします。（参考: npm インストール）

npm install -g vue-cli

webpackベースのプロジェクトを作成します。

vue init webpack my-project

色々と聞かれますのでプロジェクトに合わせた答えを選択していくと、最終的に./my-project/ディレクトリが作成され、Vue.jsがインストールされます。

プロジェクトに含まれるパッケージ群をインストールします。

cd my-project
npm install

Elementをインストールします。

npm install element-ui -S

これで、もう利用できます。以下のように、my-project/src/main.jsでElementを読み込み、日本のロケールをセットし、ElementのCSSを読み込みます。

import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-default/index.css'
import App from './App'

Vue.use(ElementUI, {locale})

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

そして、my-project/src/App.vueでコンポーネントを使用するだけです。今回は、こちらに記載されている、日時選択フォーム（DateTimePicker）を利用してみます。

<template>
  <div id="app">
    <el-date-picker v-model="datetime" type="datetime" placeholder="日時を選択してください"></el-date-picker>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {datetime: ''}
    }
  }
</script>

以下のコマンドで、ソースをビルドします。

npm run build

たったこれだけで、my-project/staticディレクトリを公開Webサーバーにあげれば、以下のような日時選択フォームが利用できます。

ロケールを日本にすれば上図のようにきちんと日本語に対応してくれますし、通常の入力フォームと同様に、v-model属性で値を簡単に取得できます。

もちろん、日時選択フォーム以外にも、様々なコンポーネントが用意されており、その数とクオリティには圧倒されます。こちらにコンポーネントの一覧があります。実際にデモが動作しているので、色々と実際に動かしてみるといいでしょう。

特定のコンポーネントだけの利用

「Elementに含まれるコンポーネントのうち、1つだけ利用したい！」「コンポーネントを効率的に利用したい！」といった場合には、コンポーネントを直接指定して定義すれば、無駄なく導入できます。

my-project/src/main.jsで以下のようにロケールをセットし、アイコンが含まれるCSSを読み込みます。

import Vue from 'vue'
import lang from 'element-ui/lib/locale/lang/ja'
import locale from 'element-ui/lib/locale'
import 'element-ui/lib/theme-default/icon.css'
import App from './App'

locale.use(lang)

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

そして、my-project/src/App.vueで利用するコンポーネントとCSSを直接指定します。

<template>
  <div id="app">
    <date-picker v-model="datetime" type="datetime" placeholder="日時を選択してください"></date-picker>
  </div>
</template>

<script>
  import {DatePicker} from 'element-ui'
  import 'element-ui/lib/theme-default/date-picker.css'

  export default {
    name: 'app',
    data () {
      return {datetime: ''}
    },
    components: {DatePicker}
  }
</script>

無駄なく導入したい場合は、このようにするといいでしょう。

まとめ

今回は、Vue.js 2.0用のコンポーネントライブラリ「Element」を紹介しました。

このライブラリを導入すれば、高機能なダッシュボードや管理画面が爆速で作れること間違いなしです。Vue.jsを既に利用している人たちはもちろん、Vue.jsを使ったことがない人たちも、ぜひElementを使って爆速で便利なUIを作ってみてはいかがでしょうか。