Vue.jsとは

Vue.js（ビュージェイエス）は，インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー（view）層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。

Vue.jsは2013年にEvan You氏の個人プロジェクトとして開始，2014年2月にバージョン0.8が正式に公開されます。その後いくつかのリリースを経て，2015年4月にLaravelへの標準搭載決定を機に一気に知名度があがりました。2015年10月に1.0が，2016年10月1日（日本時間）に2.0がリリースされ現在に至ります。

Vue.jsの主な特徴には以下のものがあります。これらによって短期間で実用的なアプリケーションを作成できるため人気を集めています。

• シンプルなAPIやHTMLベースの平易なテンプレートで学習コストが低い
• リアクティブなデータバインディング
• コンポーネント指向のUI
• ファイルサイズが軽量（min+gzip圧縮16kb）
• レンダリングが速い

Vue.jsのアーキテクチャ

Vue.jsを利用するわかりやすい特徴は上述のとおりです。続いて実際に開発するうえで有用な，Vue.jsを技術的に特徴づけるアーキテクチャを3つ見ていきましょう。

リアクティブシステム

Vue.jsはDOMとJavaScriptのデータを同期するためにリアクティブなデータバインディングを提供します。

HTMLテンプレート内でデータバインディングを指定することで，DOMとデータが同期され続けます。データを変更するたびにDOMが，DOMを変更するたびにデータがそれに応じて更新されます。このような双方向データバインディングにより，面倒なデータとDOMの同期から解放され，データ駆動的にアプリケーションを設計・実装することが可能になります。

コンポーネントシステム

Vue.jsはUIをコンポーネント化する仕組みを持ちます。

Webサイト/WebアプリケーションのUIをコンポーネントとして設計し実装すれば，高い再利用性やカプセル化で開発が楽になります。コンポーネントを組み合わせることで，大規模なWebサイト/Webアプリケーションの構築も容易になります。

レンダリングシステム

Vue.jsは仮想DOM（Virtual-DOM）でDOMを高速にレンダリングします。

他のライブラリ・フレームワークにも仮想DOMを採用しているものがありますが，Vue.jsではHTMLテンプレートでわかりやすく開発でき，かつ最適化された高速なレンダリングができるという優位性を持ちます。上述のリアクティブシステムと仮想DOMを組み合わせることで可能となりました。仮想DOMは特に意識せずに使えますが，より柔軟な動作を指定することも可能です。

プログレッシブフレームワーク

Vue.jsを選ぶ理由はすでに説明しました。しかし軽量，データバインド，コンポーネント化などの利点は他のライブラリ・フレームワークにも存在します。その中でなぜVue.jsを選ぶのでしょうか。

それはVue.jsが優れたエコシステムを持ち，どんなとき（どんな規模）でも使えるライブラリ（フレームワーク）だからです。Evan You氏が提唱する概念，プログレッシブフレームワーク（Progressive Framework）を紹介しましょう。

フレームワークの複雑性

JavaScriptのフロントエンドではReact.js，Angular.jsをはじめ多くのフレームワークが存在します（他のフレームワークとの比較）⁠。フレームワークは道具として，アプリケーションの開発における複雑性を解決します。しかしながら，アプリケーションの複雑性と同様に道具であるフレームワーク自身にも複雑性が存在します。

それぞれの複雑性について考えるために，まずフレームワークの選択が不十分な例を考えて見ましょう。たとえばグラフ，サーバーからデータを取得しリアルタイムにレンダリングされる複雑なアプリケーションにおいて，MVCのようなアプリケーションを構造化する仕組みを持たないjQueryで開発すると，かえってアプリケーションの実装が複雑化してしまいます。これはアプリケーションの複雑性に対してjQueryが不十分だと言えます。

逆にフレームワークがオーバースペックすぎることもあります。ランディングページのような単純な単一ページを持ったWebサイトをMeteorのようなフルスタックなもので開発すれば，フレームワークを学習する余計なコストがかかってしまいます。

フレームワークという道具それ自身の複雑性のコストとアプリケーション開発の複雑性のコストのバランスが取れるよう，正しいフレームワークを選択することが重要です。

要求の変化に追随できるフレームワーク

最適なフレームワークを一度選択すればそれで問題は解決するのでしょうか？　実際の私たちの開発現場においては以下のようなビジネス上の要求があるためそうとは言い切れません。

• ユーザ要望の機能拡張などに対応するため，アプリケーションも成長しなければならない
• サブプロジェクトが成長しメインプロジェクトからスピンアウトした場合においても，成長の勢いを失わず加速させなければならない
• サービスのスケールアップにあたって，サービスを分離しつつ開発速度を維持したまま，サービスを成長させなければならない

このように，サイトやアプリケーションに求められものは絶えず変化するため，フレームワークも価値を提供できるよう柔軟に対応できなければなりません。

実際のプロジェクトではスタート時にさまざまなフレームワークを選択してフロントエンドの開発を進めます。その後，変化する要件に対応するために，多くの場合アプリケーションの規模も大きくなっていきます。通常はアプリケーションの開発をサポートするライブラリ，ツールをさらに導入してビジネス要求に対応していきます。しかしながら，近年のフロントエンドのエコシステムは絶えず変化しています。このため，アプリケーションで導入しているフレームワークや開発環境がすぐに陳腐化してしまう，どれを採用したらいいのかわからない，最適と思われるものに乗り換えられないという事態に遭遇するのが普通です。

こうした状況に対応するために，アプリケーションの段階的（Progressive）な要求変化に応じて問題解決できる方法を提供できるのがプログレッシブフレームワークです。プログレッシブフレームワークは，必要になった時に問題解決するライブラリを適宜導入して問題を解決するという姿勢を持っています。最初に始めるときは小さく，大規模になるにつれて適切なライブラリやツールを導入することで大きく対応できる柔軟性を持ちます。不必要な学習コストが発生することもありません。

Vue.js本体はビュー層に焦点が当てられたライブラリであるため厳密にはフレームワークではありません。Vue.jsが提供している本体以外のライブラリ，開発環境ツールによってプログレッシブフレームワークとして成立しています。規模に応じて柔軟に最適なソリューションを提供します。