お手軽データバインディングライブラリ「Vue.js」を使いこなそう（基礎編）

はじめに

　Vue.jsは、シンプル・軽量・高速という特徴を持つデータバインディングライブラリとして最近注目を集めています。LINE社でもアプリ内WebViewの実装技術の選択肢の一つとしてVue.jsを採用しています。2014年11月27日にリリースされたLINEスケジュールは、Vue.jsを使って実装しているSPA（Single Page Application）の代表例です。

　本稿は日本語記事がまだ少ないVue.jsの基本機能の紹介を目的とした「基礎編」として、公式ドキュメントの内容を元に解説します（執筆時点のバージョンであるv0.11の内容です）。

Vue.jsとは

　Vue.jsは、双方向バインディングによるModelとViewをつなぐ仕組み「ViewModelレイヤー（MVVMパターン）」を提供するJavaScriptのライブラリです。

　Vue.jsの基本概念は以下のようになっています。

• 極力シンプルにしたAPI設計
• リアクティブなデータバインディング
• コンポーネント化容易な仕組み
• 他ライブラリへの依存がなく柔軟かつ軽量（約52KB）

　他のライブラリと比べてVue.jsは後発で登場し、AngularJS、KnockoutJS、Ractive.js、Rivets.jsの良さを踏まえた上で、機能性とシンプルさを追求して作られています。そのシンプルな性質から学習コストが少ないのも特徴です。

　Vue.jsはコンポーネント化にも力を入れています。例えば、Web Componentsのコンセプトに沿った仕組みの提供や、WebpackやBrowserifyなどのモジュールのビルドシステムへの対応も積極的に行っています。

　AngularJSを代表とするデータバインディングを提供する他のJavaScriptのフレームワークと比較すると、Vue.jsは機能やサポート対象の多さという観点では劣る面もあるかもしれません。しかし、Vue.jsの設計は、ある程度シンプルなアプリケーションや迅速性を求められるプロトタイプ開発などに適しているため、そのような局面では開発の効率性を特に高めることができます。