Vue.jsのすすめ

f:id:marctech:20171027151414j:plain

こんにちは！フロントエンドエンジニアのセイです。

本日は直感的でかつ学習コストも低いJavaScript フレームワークのVue.jsについてお送りしたいと思います。

執筆時の10月27日時点ですと GitHub のスター獲得数が Vue.js が約65,000と一番人気の React.js（約74,000）に次いで２番目となっております。

何故このように人気を得たのか、まずは実際のコードを見てみましょう！

※今回はCodePenの機能でVue.jsのスクリプト
https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js
を読み込んだ環境で作業しております。

まずHTMLの <div id="app"> をご覧ください。 HTML側に書いてあるのは id=app と {{ message }} だけですね！

次にJavaScript側を見てみましょう。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

Vue.jsを動かす際にはまず var app = new Vue 新しいインスタンスを作ります。
そしてインスタンスを作る際にオブジェクトを渡すことによって、どのタグに対して作用させるか、どのようなデータを持つか、どのようなメソッド持たせるかなどを指定できます。

今回の場合ですと el: '#app' で VueインスタンスとHTMLのタグを紐付し、 message: 'Hello Vue!'という data 持たせております。

HTML側を再度見直して見ると {{ message }} 記述があります！
ここに先ほどのdataの中身を反映させてます。分かりやすいですね！

次のセクションを見て見ましょう、app2 ではVueインスタンス内での function を指定しております。

HTML側は
<button v-on:click="reverseMessage">Reverse Message</button>
のように v-on:click="~~~" と記載することでHTML側にイベントハンドラを指定することができます。

そしてJavaScript側に呼び出す function
methods: {reverseMessage: function(){~~~~~}}
を用意しておけば、buttonがクリックされた際にこの functionが発火します。

HTML側にはイベントの条件を用意し、Javascript側にはロジックのみを書けば良いのが分かりやすいですよね！

次の app3 では双方向データバインディングと呼ばれる機能を紹介致します。
<input v-model="message"> のように v-model="~~~" と記述することで Vueインスタンスの data と input を紐付けしております。

これで input または message のどちらかの値が更新された際にもう一方の値も自動で更新されるので、フォームなど色々な場面で活躍しますね！

最後に app4 を見て見ましょう！ HTML側は

<div id="app-4">
  <ul>
    <fruit-item v-for="item in groceryList" v-bind:fruit="item"></fruit-item>
  </ul>
</div>

<fruit-item> と v-for=" ~~~ in ~~~~~" という要素が出て来ましたね。 <fruit-item> はVue.jsのカスタムタグで、v-for はこのタグを複数回レンダリングします。

JavaScript側で詳しく見て見ましょう。

Vue.component('fruit-item', {
  props: ['fruit'],
  template: '<li>{{ fruit.text }}</li>'
})
const app4 = new Vue ({
  el: '#app-4',
  data: {
    groceryList: [
      { text: 'apple'},
      { text: 'orange'},
      { text: 'blueberry'}
    ]
  }
})

Vue.componentでカスタムタグを設定しております。 propsで読み込む際の変数を、templateで実際にHTML側にレンダリングする内容を設定しております。

app4 側には groceryList という配列データを持たせているので v-for で配列の中身をカスタムタグにそれぞれ渡してレンダリングさせてます。

todoリストなどのオブジェクトを用意しておけば読み込ませるだけでまとめてレンダリングしてくれるのでとても便利です！

このようにHTMLやJavaScriptを少しでも触ったことがある人であれば理解しやすい記述で動かすことが出来るので jQuery でだけでWebページを作成するのではなく必要に応じて Vue.js を取り入れてみてはいかがでしょうか！

チュートリアルがかなり分かりやすいので興味持たれた方は是非ご覧になってください。

jp.vuejs.org