Vue.jsアドベントカレンダーの記事です。
世間ではAngularが大人気ですが、一方で根強い人気を持っているのがVue.js
両方使ってみて、行ったり戻ったりするうちに、イイトコとワルイトコがわかってきたのでまとめてみました。
学習コストが少なめ
AngularJSに比べて学習コストも詰まりポイントもだいぶ少なめです。
アプリケーションモジュールを作成して、コントローラを生やし、ng-controllerでバインドする...という手順を踏むAngularJSに比べ、
バインドしたいデータやメソドと、対象のセレクタをコンストラクタに渡してオブジェクトを生成するだけ、のVue.jsは手続き的にも簡単な印象です。
VMの中身が綺麗に整理されている
Vue.jsのVM(AngularのControllerのようなもの)では、データとメソドを差し込む空間が分離されています。
全て$scope変数の中で解決してしまうAngularとくらべて、コードがカオスになりにくいという利点があります。
vue = new Vue({
data: {/* some data */},
methods:{/*some methods */}
computed:{/* getter/setter for data */}
....
});
バインドしたいオブジェクトであるdataや、ボタン等から呼び出したい処理のmethodsに加え、データの値などを加工して取得/更新できるcomputedも用意されており、全てテンプレート内から{{ひげ記法}}で呼び出し/バインドすることができます。
今風の開発フローへの対応が豊富
componentsやbrowserify、webpackなど今風のフロント開発の手法を積極的に取り込んでおり、
開発サンプルも公式で用意されています。
https://github.com/vuejs/vue-browserify-example
https://github.com/vuejs/vue-webpack-example
(componentsの対応は0.10までとなった模様ですよ…)
アプリケーションのコードを機能毎に分割し、フロントではまとめてコンパイルしたコードを利用するという手法がとれるため、開くのがうんざりするような長いコードを作る必要がなくなります。
特にCoffeescriptなどのAltJSを採用する場合、可読性は重要な問題になってきますが、機能毎に小規模なファイルに分割できるなら安心だと思います。
browserifyやwebpackを利用する上では、面倒なwrapperを用意しなくても依存性の少ないオブジェクトとして機能を書いていく事が可能なため、
開発の副産物としてのコード資産も生み出す余地が生まれてきます。
他ライブラリとの連携が容易
元々Vue.jsは、他ライブラリとの連携を前提に作られているようです。
ルーティングにはngRoute、AjaxにはngResourceなどのサブライブリを用意してくれているAngularJSと異なり、
自分でライブラリを選択する必要が出てくる手間は否めませんが、
要件毎に必要な機能を採択できるのは嬉しい所だと思います。
実装していく上で「詰み」が生じた時にも気軽に別のライブラリを探しに行けるという精神的な楽さも評価したいです。
Vue.jsの欠点
Vue.jsの欠点はなんと言っても大規模アプリケーションの構築にあると思います。
他ライブラリとの連携を前提とした構築で自由度が高過ぎる分、「アプリケーション」のレベルまで組み上げる頃には「オレオレVue.js開発スタイル」が組み上がってしまいます。
特にAngularでいうところのServiceの概念が内包されていないのが致命的で、
- モジュール化してrequireで対応する
- rootのVMに持たせて、
$rootで参照する - vue.jsのラッパーを作って、getter/setterを用意する
などの方法を考えてみましたがどれもイマイチな雰囲気でした。
とはいえやはりとっつきやすさ、開発の楽しさではVue.jsに軍配があがるので、
AngularJSが理解しづらい…といって挫折していた人などは是非Vue.jsを試してみるといいと思います。
結局どちらを使うべきか
PHPアプリケーション等、サーバサイドを軸に動くアプリケーションに簡単なフロントのギミックを加えたい、程度の場合には圧倒的にVue.jsが楽だと思います。
Vue.jsと$.ajaxで基本的なAjax通信からの画面制御程度は簡単に捌けますし、記述量の面でもVue.jsで組むほうが楽です。
個人的な切り分けとしては、複数のVMを用意してルーティングを加えて…の規模になってくるとAngularの採用を検討する方が楽だなぁと思っています。
Routingオブジェクトをどこに置くかとか複数VM間でのオブジェクト共有/バインディングをどうするか…みたいなベストプラクティスが出てきたらVue.jsでの大規模アプリケーション構築もありかもしれません。