Vue.jsを触ってみて - dorivenの日記

どうも、実家に帰省しています。
実家は人が多いし、騒がしくて落ち着かないですね。
そろそろJS力を上げないと色々とやばいなのでJS力を上げたいと思うので、一旦デザインパターンはストップしてJSのフレームワーク・ライブラリについて書いていきたいと思います。
今日はVue.jsについて調べてきたいと思います。

Vue.jsとは？

MVVMとは？

Model View View Model。
ちょっと分からなかったのでwikipedia大先生に聞いてみましょう。

Model View ViewModel(モデル・ビュー・ビューモデル;MVVM)は、独自のGUI(グラフィカルユーザーインターフェース)を持つアプリケーションソフトウェアを、以下に述べるようなModel-View-ViewModelの3つの部分に分割して設計・実装するソフトウェアアーキテクチャパターンである。MVC(Model-View-Controller)の派生パターンであり、特にPresentation Model[1]パターンを直接の祖先に持つ。MVVMを考慮してアプリケーションを開発する目的は、他のMVC系のパターンと同様にアプリケーションの「プレゼンテーションとドメインを分離[2]」する事で、アプリケーション開発における保守性・開発生産性に寄与する事である。

ダメだ、こいつ何を言っているか分からない。
あまり深く考えずに行くとViewとModelを繋ぐViewModelが常にViewとModelの状態を監視し、状態に変化があればその状態をViewModelで取得し、View/Modelにその状態を伝達する。

メリット

データがバインディングされている為、Viewの変更が即時にModelで処理され、Viewにその結果が投影される
HTMLの変更を感知する処理をわざわざjavascriptで一から記述する必要がない
処理した結果をテンプレートにあてはめてViewに反映することが出来るため、HTML側でシンプルな記述が可能

導入

わざわざ説明するまでもないと思うが、一応。
以下のサイトからソースをブラウザかgithub経由でダウンロードする。
vue.js
適当な場所にvue.jsファイルを置いておく。

とりあえず色々触ってみる

まずはチュートリアル程度の事をやってみる。
以下にVue.jsのプロパティを埋め込んだHTMLを記述する。

javascript側のソースを見てみる。

tutorial.js

window.onload = function(){
  var vue = new Vue({
    el:"#vue-manager",
    data:{
      hoge:'test'
    },
    methods:{
      change:function(e){
        console.log(this.hoge);
      }
    }
  });
};

vue.jsをnewする時に設定を施す。
今回のチュートリアルで使用しているのは以下のようなインスタンスオプションを使用している。
（公式リファレンスはこちら Instantiation Options - vue.js）

el : ViewModelとして設定したい要素をセレクタで指定
data : ViewModelに持たせたいデータ。View側（HTML）にバインディングする時にも使用
methods: ViewModelに関数を追加で設定することが出来る

dataにはhoge変数を設定。
methodsにはコンソールにhogeの内容を出力する関数を設定。
以上でjavascript側の設定は終了。

次にHTML側のソースを見てみよう

tutorial.html

<html>
<head>
  <script type="text/javascript" src="lib/vue.js"></script>
  <script type="text/javascript" src="tutorial.js"></script>
</head>
<body>
  <div id="vue-manager">
    <input type="text" v-model="hoge" v-on="keydown:change()">
    <p>{{hoge}}</p>
  </div>
</body>
</html>

次にHTML側で設定するディレクティブの設定を行う。
今回使ったディレクティブは以下の通り。
（公式リファレンスはこちら Directives - vue.js)

v-model : INPUT, SELECT, TEXTAREA限定のディレクティブ。ここで設定されたdataが入力値とシンクロされる。
v-on : イベントを設定する。イベントを一括で設定でき、ここでは紹介しないフィルタ処理を適用することが出来る。

inputタグのアトリビュートにv-modelを設定する。
v-modelに設定する値はインスタンスオプションで設定したdata.hogeの値を設定する。
これでinputタグの値が編集されると、即時にVue.jsのdata.hogeに値が反映される（データバインディング）ようになる。
そして、pタグに入力されている値が即表示されるようになっている。
更にv-on="keydown"を設定することでVue.jsに設定した関数を呼び出すことが出来る。
ここではchange関数が呼ばれ、キーが押される度にコンソールにdata.hogeの値が表示されるようになる。

つまり、Vue.jsとはHTML側の変更を汲み取り、それを即時にjs側で受け取り計算、HTML側にその結果を表示する。

Vue.jsを触った所感

Vue.jsはデータバインディング機能により、ユーザからの入力を容易に扱えることが出来るようになった。
これによりユーザの入力を扱う処理を全てVue.jsに委任することが可能になり、高速な開発が可能になっている。
機能が限定的な為、他のJSのフレームワークとの親和性も高いので、覚えておいて損はないでしょう。

おわりに

最後まで呼んでいただきありがとうございました。
次はBownerというライブラリ管理ツールを紹介していきたいと思います。
JSのライブラリって色々と多くて、落ち着くまで学習はストップしていたのですが、そんなことも言ってられないので学習中です。
それと、別件で過去記事見辛いということだったので弄ろうとしたら、このデザインは過去記事一覧が表示出来ないっぽい？
後で色々と調査してみます！
ではでは