2017/03/31更新

[フロントエンド] 軽量モダンライブラリの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さん、こんにちは!'
    }
});

実行結果

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!!'
    }
});

実行結果

ホバーしてみて!(title属性の内容が見えます)


条件分岐

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' }
        ]
    }
});

実行結果

1. Apple
2. Orange
3. 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('');
        }
    }
});

実行結果

{{ message }}



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!"
    }
});

実行結果

{{ message }}



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

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の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。