[フロントエンド] 軽量モダンライブラリのVue.jsに入門する

こんにちは、@yoheiMuneです。
React.jsでの開発は飽きたなーと思い、次はVue.jsに手を出し始めました。今日はVue.jsがどんなものかをふんわりと理解できる、ハローワールド的なところをブログに書きたいと思います。

目次

Vue.jsとは

Vue.js（日本語はこちら）は、フロントエンドJavaScriptのライブラリの1つで、画面描画を行うために使うライブラリです。似たようなものに、Angular.jsやReact.jsやWebComponentなどがありますが、それらと同じく画面描画を行うことができます。

他のライブラリと違うところは「軽量である & 学習コストが低い」というところかなと感じています。使うと分かりますが、非常に楽チンに物事を進めることができます。ということで、これからの案件で使おうと思っている次第です。

あと、公式の日本語サイトが非常に充実しているというのも日本人としては嬉しいポイントです。

Vue.jsを導入する

本格的に開発するには、コンポーネントごとにファイルを分割し、Webpack（参考：Webpackに入門する）やBrowserify（参考：Browserifyに入門する）を使ったビルドが必要ですが、とりあえず試すにはvue.jsのライブラリを読み込むことで十分です。HTMLとJSファイルを用意します。

<!-- index.html -->
<script src="https://unpkg.com/vue"></script>
<script src="./app.js"></script>

// app.js
// とりあえずは空っぽ.

その後に、index.htmlをダブルクリックしてブラウザで開けばOKです。

または、Pythonコマンドで簡易的なサーバーを立てるのもありです。

# Python2系の場合
$ python -m SimpleHTTPServer

# Python3系の場合
$ python3 -m http.server

これで以下にアクセスするとページを表示することができます。

http://localhost:8000/

または本家のサイトでもアナウンスがありますが、、JSFiddle Hello World exampleで触ってみるのもありです。それだとオンライン上で使えるので便利です。

Vue.jsを使ってみる

ここからは、Vue.jsの使い方をステップ・バイ・ステップで見てみたいと思います。

まずはハローワールド

以下のように書くと、画面にmessage変数の中身が表示されます。

<!-- index.html -->
<div id="app">{{ message }}</div>

// app.js
new Vue({
    el : '#app',
    data : {
        message : 'Vue.jsさん、こんにちは！'
    }
});

実行結果

ここでポイントなのがReact.jsなどと同じく、DOM操作を実装することなくDOMへ値を反映できる点です（vue.jsもバーチャルDOMを持っています）。DOM操作は非常にうっとおしい実装が多いので、それをライブラリがやってくれるのはうれしい限りです。

HTML要素の属性（Attribute）にもバインディングできる

テキストだけではなく、例えば<div title="aaa"/>のtitle属性などにもバインドすることができます。

<!-- index.html -->
<div id="app2">
    <span v-bind:title="message">
        ホバーして少し待つ！（title属性の内容が見えます）
    </span>
</div>

// app.js
new Vue({
    el : '#app2',
    data : {
        message : 'Thank you!!'
    }
});

実行結果

条件分岐

v-ifを使うと表示制御ができます。

<!-- index.html -->
<div id="app3">
    <p v-if="seen">見えたねー！</p>
</div>

// app.js
new Vue({
    el : '#app3',
    data : {
        seen : true
    }
});

実行結果

ループ処理

v-for属性を使うと、ループ処理を行うことができます。

<!-- index.html -->
<div id="app4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

// app.js
new Vue({
    el : '#app4',
    data : {
        todos : [
            { text : 'Apple' },
            { text : 'Orange' },
            { text : 'Strawberry' }
        ]
    }
});

実行結果

クリックイベントへの反応

v-on:clickを使うと、イベントハンドリングに対応できます。

<!-- index.html -->
<div id="app5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

// app.js
new Vue({
    el : '#app5',
    data : {
        message : 'Hello from Vue.js!'
    },
    methods : {
        reverseMessage : function(e) {
            console.log('reverseMessage:', e, this);
            this.message = this.message.split('').reverse().join('');
        }
    }
});

実行結果

2-wayバインディング（JS→HTML、HTML→JS）

v-modelを使うと、双方向へのバインディング（2-wayバインディング）を実現できます。これが簡単にできるのは素敵です。

<!-- index.html -->
<div id="app6">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
</div>

// app.js
new Vue({
    el : "#app6",
    data : {
        message : "Hello Vue!"
    }
});

実行結果

カスタムエレメントの作成

Vue.componentを使って独自のカスタムエレメントを作成することができます。

<!-- index.html -->
<div id="app7">
    <ol>
        <my-item v-for="skill in skills" v-bind:item="skill"/>
    </ol>
</div>

// app.js
new Vue({
    el : "#app6",
    data : {
        message : "Hello Vue!"
    }
});

実行結果

強制ではありませんが、カスタムエレメントの名前は「aaa-bbb-ccc」のように、1つ以上のハイフンを含んだ全て小文字の名前にすることが推奨されています（HTMLの定義に準拠するため）。

参考資料

Vue.jsは日本語の公式ドキュメントが充実しているので、学びやすいです。ぜひご確認ください。

https://jp.vuejs.org/v2/guide/

最後に

これから大きめの2案件で、Vue.jsを導入しようと思います。しっかりと大規模開発に耐えうる導入にできたらと思い、その調査結果を色々とブログにも書きたいと思います。
最後になりますが本ブログでは、Python・Linux・Node.js・フロントエンド・インフラ・Go言語・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！