1.1　フロントエンドフレームワークが必要なわけ

　昨今のWebアプリケーション開発は、複雑化の一途をたどっています。以前はもっぱらjQueryを用いて動的なWebアプリケーションが構築されていましたが、jQueryで動的にDOMを操作すると思わぬ挙動をしてしまい、アプリケーションが壊れるという問題などを抱えていました。

　例えば、ある要素にクラス名を用いてjQueryでイベントハンドラを登録し、そのクラス名をのちの変更で変えてしまったとします。するとそのイベント発火はクラス名に依存しているため、もう発火することがありません。しかもjQueryのイベントハンドラの登録はエラーにならないため、動かなくなったとしても何が原因で動かなくなったのかがわからなくなってしまいます。ビューと密接に結合したJavaScriptならではの問題点と言えるでしょう。

　そこでjQueryに代わるビューを扱うフレームワークが多く誕生しました。初期はBackbone.jsやKnockout.jsが使われ、この分野が成熟して行くにつれAngular.jsやEmber.js、さらにJSフレームワークのパラダイムシフトのきっかけとなったReact.jsなど様々なフレームワークが生まれました。

　さらに、最近はWebアプリケーションの体感スピードの改善のためにシングルページアプリケーションで構築しようという動きが顕著になっています。シングルページアプリケーションの構築をJSフレームワークなしで行うのは困難なため、最適なフレームワーク選びが求められています。

1.2　Vue.jsとは

　Vue.jsは、インタラクティブ性のあるユーザインタフェースを構築するためのフロントエンドフレームワークです。

　Vue.jsはEvan You（https://github.com/yyx990803）さんの個人プロジェクトとして2013年に開発が開始され、2015年10月に1.0、2016年10月に2.0をリリース、現在（2018年3月）最新のバージョンは2.5.13となっています。Evanさんは現在フルタイムでVue.jsを開発しており、開発の支援も様々な企業や個人スポンサーから受けているため、ほぼ万全の体制でVue.jsの開発が出来ている状態と言えます。

　Vue.jsの機能面での特徴としてはMVVM（Model-View-ViewModel）のソフトウェアアーキテクチャパターンの影響を受けていることと、Webコンポーネントのようにカスタム要素を作り出し、再利用可能なビューを構築できることです。

　データバインディングによるリアクティブなビューの変更と、保守性の優れたカスタム要素の作成で、小規模なアプリケーションから大規模なアプリケーションまで幅広く対応出来るフレームワークとなっています。

1.3　Progressive Framework

要求の変化に対応出来るフレームワークとしてのVue.jsとそのエコシステム

　Vue.jsの特徴として、Progressive Frameworkという概念にもとづいて開発されているということがあります。

　Progressive FrameworkとはEvanさんが提唱した概念で、アプリケーションの要求に応じて使い方を変えていくことのできるフレームワークのことを指します¹。

　ある課題があったとき、それを解決するフレームワークがその課題に対して不十分だったり、逆にオーバースペックであった場合、フレームワークの複雑性に引きずられて余計なコストがかかってしまいます。また、アプリケーションは作って終わりではないため、ユーザーの要望によって機能拡張が行われます。フレームワークがその変化に対応できなければ、これもまたコストがかかります。

　Progressive Frameworkであることが意識されたフレームワークは課題に対して適切な使い方を提示でき、規模が拡大したとしてもそれに応じて変化することが出来ます。

　Vue.jsとそれを取り巻くエコシステムは、常に変化する課題に柔軟に対応することが出来るように作られています。ビュー層をデータバインディングでリアクティブに変化させるVue.js、シングルページアプリケーションを作成するためにフロントエンドでのルーティングを可能にするvue-router、コンポーネント間の状態管理をシンプルに解決するVuexなど、状況に応じたライブラリが用意されています。

段階的に解決していく技術的領域

　Progressive Frameworkは、5つの技術的領域を段階的に解決していきます。

１．宣言的レンダリング（Declative Rendering）

　まずはじめに、リアクティブな仕組みを使ってフォームを作りデータを送る要求のみ満たすためにVue.jsを使うとします。これだけならばscriptタグでVue.jsを読み込み、HTMLに直接ディレクティブ（Vue.jsの為にタグに追加する属性）を書くだけで十分です。ここで解決された領域は「宣言的レンダリング」です。

２．コンポーネントシステム（Component System）

　次にformを再利用したいという要求が出てきたとき、Vue.jsのコンポーネントの機能を使用することで満たすことが出来ます。Webコンポーネントのようにカスタム要素を作成し、要求に応じて再利用するなどして解決された領域は「コンポーネントシステム」です。

３．クライアントサイドルーティング（Client-Side Routing）

　これまでの要求はいわゆるWebサイトとしての要求でしたが、シングルページアプリケーションなどのより「Webアプリケーション」らしいものにしていきたいと考えたとき、vue-routerなどを使用してその要求を満たします。ここで解決された領域は「クライアントサイドルーティング」です。

４．大規模向け状態管理（Large Scale State Management）

　さらにWebアプリケーションとして規模が大きくなってくると、状態管理をしっかりとやる必要が出てきます。そこではVuexを使用することで要求を満たすことが可能です。ここで解決された領域は「大規模向け状態管理」です。

５．ビルドシステム（Build System）

　ここまでWebアプリケーションとして開発していくと、Vue.jsのコンポーネントの機能だけではコードが見辛くなる事があると思います。そのときはコンポーネントごとに.vueファイルに分割し、各種バンドルツールに応じたVue.jsのpluginを利用することでファイルの分割とビルドの仕組みを構築することが出来ます。ここで解決された領域は「ビルドシステム」です。

　以上のようにVue.jsとそれを取り巻くエコシステムは、簡単なWebページからWebアプリケーションまで様々な要求に対応することが可能です。主要なものはEvanさんにより公式なサポートが行われているため、連携も自然に出来るようになっておりエコシステム全体でProgressive Frameworkを体現しています。