Vue.jsを使ってみよう

こんばんは、フリューのジョンです。普段はサイト開発をしており、最近Mithril.jsからVue.jsに移行しています。

今回はVue.jsのお話です。

JavaScriptのフレームワークっていっぱい聞くけどどういうところが嬉しいんだろう、というレベルの方にお伝えしたいと思います。

概要

Vue.jsはReact.jsやAngular.jsと同じようにMV*系のフレームワークです。

近年はJavaScriptのフレームワークは飽和していますが（React.js、Angular.js、Riot.js、Aurora.jsなどなど）

それではなぜそのようなフレームワークを使うのでしょうか？jQueryじゃダメなのでしょうか？

いえ、jQueryでもできます。しかし、既存のフレームワークのほうが楽をすることができる可能性が高いです。

view周りをフレームワークに任せることができるので、logicに集中できる。
- jQueryのみで大きなページを作成すると、logicとview部分が複雑になる。
要素をJavaScriptで作成している複雑なページは、仮想DOMを使用しているフレームワークを使うと、描画速度が早くなる

一つ目の利点について考えてみます。

例えば以下のようにselectタグの値によってコンテンツの表示切り替えを行いたい場合、どのようにjQueryを使えば良いのでしょうか？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section>
  <div id="1">
    <!--何かしらの内容-->
    contentA
  </div>
  <div id="2">
    <!--何かしらの内容-->
    contentB
  </div>
  <div id="3">
    <!--何かしらの内容-->
    contentC
  </div>
  <select id="contentSelector">
    <option value="1">コンテンツAを表示する</option>
    <option value="2">コンテンツBを表示する</option>
    <option value="3">コンテンツCを表示する</option>
  </select>
</section>

おそらく、コード量を抑えるとしたら以下のように書くと思われます。他を消してから、選択されたものを表示するということになると思います。

$(function() {
&nbsp;$('#1').show();
 $('#2').hide();
 $('#3').hide();
 $('#contentSelector').on('change', function() {
 var contentNumber = $(this).val();
 $('#1').hide();
 $('#2').hide();
 $('#3').hide();
 $('#' + contentNumber).show();
 });
})

では、少し意地悪な変更が加えられたとしましょう。現状idを使って選択していますが、このidは一般的すぎて変更したいですね。

その場合、JavaScript側のセレクタも変更しなければいけません。それに加え、optionタグのvalueを使って切り替えられると思っていたlogicの前提が崩れてしまいます。*1

フレームワークを使うと、このような画面切り替えなどもフレームワーク側が対応してくれるのです。（後にこの問題をVue.jsではどう記述するかを説明します）

そこでVue.jsです

では他のフレームワークではなく、Vue.jsを使う利点はなんでしょうか？私としては、以下だと考えられます

viewをhtmlに書くことができるので、viewを分業しているプロダクトではデザイナさんが変更しやすい

Angular.jsでも同じようなことができるのでは？となりますがVue.jsではよりデザイナさんが理解しやすいhtmlの書き方になっています。また、軽量な画面に関しては、少量のコード量で済みます。

そして、仮想DOMを用いているため描画スピードも早いです。

先ほどのselectタグの値によってコンテンツの表示切り替えを行いたい場合を題材にします。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<section id="vue">
  <div v-show="content == 1">
    <!--何かしらの内容-->
    contentA
  </div>
  <div v-show="content == 2">
    <!--何かしらの内容-->
    contentB
  </div>
  <div v-show="content == 3">
    <!--何かしらの内容-->
    contentC
  </div>
  <select v-model="content">
    <option value="1">コンテンツAを表示する</option>
    <option value="2">コンテンツBを表示する</option>
    <option value="3">コンテンツCを表示する</option>
  </select>
</section>

各コンテンツにidを書かないようになりました。その代わりにv-showという表示、非表示を切り替える際に使う「ディレクティブ」をつけています。

selectタグにもidを書いていません。その代わりにv-modelという双方向のデータバインディングを行うディレクティブをつけています。

window.onload = function() {
 new Vue({
 el: '#vue',
 data: {
 content: 1
 }
 });
}

JavaScript側では、Vueに、rootとなるタグのセレクタと他のデータを渡しています。これだけです。

Vueのコンストラクタに渡したオブジェクトにあるdataにはcontentが1で入っています。これがselectタグに渡り、どのoptionタグを表示するかを決めています。
selectタグのonchangeイベントが走るとoptionタグのvalueがcontentに入ります。
contentの値が変化すると、各コンテンツに書いてあるv-showの評価が行われます。その評価値がtrueになった場合、そのコンテンツが表示されるという仕組みになっています。

どうでしょうか？

idの変更やデザインの変更がある場合もこれならば影響はありません。

まとめ

jQueryだけでもできるページは少なくありませんし、広く一般的になっていると思われます。しかし、少し複雑度が増してくると、途端にコード量が増えていきます。

これまでの例からもVue.jsはかんたんに導入できることがわかりましたので、何か面倒だなと感じたときには、ぜひライブラリやフレームワークを使ってみてください。

次はVue.jsを使った少し複雑な例をお送りしたいと思います。

おまけ

今回のソースコードについてはjsfiddleにあげておりますのでご確認ください。

https://jsfiddle.net/satojohn/x9fjajuL/

参考

Vue.jsのドキュメント : https://vuejs.org/

*1 もちろんdata属性を使うなど回避策はありますが、ここではわかりやすいようにしています。

FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。

Vue.jsを使ってみよう

概要

そこでVue.jsです

Vue.jsを使ってみよう

まとめ

おまけ

参考