Vue.jsを触る

Vue.jsが最近アツいみたいなので、今のうちに触っておこうと思います。
導入から特徴など、自分が30分程度（短い）触った間に書いたメモ書きを晒します。

ちなみに読み方は「ヴュージェイエス」です。下唇を上手く使って発言しましょう。

そもそもVue.jsってなに？？

ざっくりというとJavaScriptのフレームワーク。
同じ立ち位置のものは、Angular JSとか、React とかがある。

公式サイトのはじめるで紹介されていChris Fritz氏のVue 2.0 Hello Worldを参考に、まずはプログラム入門でお馴染みのHello Worldをだしてみる。

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

ぱっと見た感じ、HTML側のIDをVue側で指定して、dataのmessageがHTML側の{{ message }}に対応しているのがわかる。PHPのSmartyみたいなテンプレートエンジン的な動きをするっぽい・・・？
と思っていたら、公式ページにこんな内容が・・・

一見するとただテンプレートを描画しているように見えますが、Vue.js は内部で多くの作業を行っています。データと DOM は関連付けられ、そして全てがリアクティブになっています。

かなり噛み砕いて言うと、el: '#app'と指定したDOM要素をVueの制御配下とし、データはリアルタイムですぐに反映する用になっています！…といったところでしょうか？？

このままだとただのテンプレートエンジンになってしまうので、次はもう少し有意義な使い方をします。

まずは以下のソースを見てみる。

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app-2">
  <span v-bind:title="message">
    マウスをホバーしてね！！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'あなたがこのページを読み込んだ時間は ' + new Date().toLocaleString()
  }
})

HTMLのv-bind:titleという部分で、span要素のtitle属性を、Vueのmessageプロパティで更新する。というソースになります。

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

v-if は、対象のプロパティの真偽に応じて、その要素の表示有無を切り替えます。
上記のコードでseen:falseとするか、コンソールからapp3.seen = falseと入力すると、この要素が消えます。

ここで、本家いわく、

この例は、テキストをデータに束縛できるだけではなく、 DOM の構造にデータを束縛できることを示しています。

こういう強気な文章かっこいいですね。

上記では簡単にVue.jsの超超入門をしました。でも本当の特徴はここからです。
Vue.jsはコンポーネントというHTMLタグのようなものを作成することができ、一度定義することで、再帰的にコンポーネントを利用することが出来るようになります。

例として

// todo-item と呼ばれる新しいコンポーネントを定義
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

このように記述すると、HTMLで

<ol>
  <todo-item></todo-item>
</ol>

と書くだけで、todo-itemに定義されている内容がliタグで生成されます。
これだけでなんだかとてもワクワクしてきますね！！

JSのフレームワークはあまり使ったことがなく、基本的にjQueryで実装を行っていた僕ですが、Vue.jsを使うと、描画部分の実装にあまり気を使わなくて良くなるため、よりロジカル的な部分に集中できるのかなと思いました。

ユーザ操作や、APIとの通信などで画面側の表示がどんどん変わっていったりするWebアプリに向いていたりするのでしょうか・・・？

言えることは触っていて楽しいということです。
今までの実装では、ロジックの部分、描画の部分と対極の２面を考える必要があったので、実装してプロパティを更新するだけで描画側に反映されていくのがとても楽しいです。
どんどん勉強したくなるJSフレームワークです。

少しでも多くの人がVue.jsに興味を持ってくれればいいなと思います。
またもう少し触ってわかってきたらもっと深い記事を作ろうと思います。

私のブログもよろしく(^o^)