JavaScriptフレームワーク導入のためVue.jsを使ってみた

2009年当時でのWebアプリではJavaScriptフレームワークがあまり一般的で無く、目下JavaScriptライブラリであるProtoTypeやjQueryを使ってゴリゴリとコーディングを行っていました。ここ最近で久々にWebアプリ開発に戻りましたが、近年では非同期通信の一般化やフロントエンドのリッチ化により、JavaScriptフレームワークを使わないとコーディングが辛くなってきました。そこで、JavaScriptフレームワークを採用するために検証を行うにしました。

Vuejsを選んだ理由

トレンド

栄枯盛衰の激しいIT業界ではどの技術を選定するのか正直悩みどころです。しかも、JavaScriptフレームワークは現時点で確立されたものは存在せず、今だにしのぎを削っています。そこで、Googleトレンドを利用して比較を行い、優劣を測ることにしました。。結果としてはVue.jsは人気の伸びが凄まじく、現時点では他者を圧倒しています。これがVue.jsを選定する大きな要因となりました。

圧倒的じゃないか、Vue.jsは

ドキュメントやサンプル、そして事例の多さ

Vue.jsが既にバージョン2へ改訂されていたこともあってか、既に日本語のドキュメントやサンプル、そして事例が揃っていました。やはりトレンドの伸びが凄まじいだけはあります。実際に実装で悩んだ際にも豊富なサンプルと事例を確認することで対応できました。

テンプレート構文

HTMLにVueシンタックスを埋め込むだけで実現できるというシンプルさに感銘しました。将来的な課題であるWEBデザイナーとの共同作業も行えそうです。VueシンタックスについてはAngularJSの思想を強く受け継いだ点のようですが、今回はAngularJSに触れませんでした。

Vue.jsを利用してみた所感

まだまだ小規模開発での検証ではあったのですが、予想外に良く、大いに可能性を感じました。まず気に入った点は双方向データバインディングです。データやイベントとの相互連携もVueシンタックスを利用してシンプルに記述でき、処理ロジックについてもdataオブジェクトとmethodsオブジェクトへ記載するだけなので学習コストもそこまで要求しません。更にコンポーネントを用いれば大規模な開発でも使えそうです。Vueインスタンスを生成することで、スコープ外からデータを変更したりイベントを実行したりするといった柔軟性も備えています。そして何より触っていて楽しく、もっとシンプルな記述で実装できないかと探求したくなるようなフレームワークです。

最後に

個人的にはかなり好みなのですが、本格的に採用するには宣教用や教育用のスライドなど準備が必要です。