Vue.jsとは？
Vue.js（ヴュージェイエス）はUIを構築するための JavaScript フレームワークです。
Vue.js はもともと Google社で同じく JavaScript のフレームワークである AngularJS を使用した開発に携わっていた Evan You (エヴァン・ヨー)氏が「Angularの不要な部分をそぎ落とした軽量なフレームワーク」として個人的に開発をはじめ、2014年2月にリリースされました。
数ある JavaScript フレームワークのなかでも Vue.js は、少ない記述量で済み、自由度が高く、それでいて生産性も高いため、人気が上がっています。
Vue.jsの人気が高まった経緯
JavaScript のフレームワークのなかでも人気の高い Vue.js ですが、どのような経緯で人気が出たのでしょうか。
開発において、開発をサポートするために必ずと言っていいほど用いられるフレームワークですが、何を作るかによって向き不向きがあるにも関わらず、一度使い始めてしまうと後になって違うフレームワークに切り替えようとするとかなりの手間を要します。そのため、フレームワーク選びは重要なのです。
そのような背景から、なるべく学習コストが低く、汎用性が高いものを選びたいと考える人が多く、「Vue.js」の人気が高まっています。
人気の動向がわかる Googleトレンドで代表的な JavaScript フレームワーク４つで比較してみました。
この図を見ると、徐々に jQuery の人気が下がっていき、Vue.js や React の人気が高まっているのがわかりますね。
なぜこのような結果が出たのか詳しく説明していきます。
数ある JavaScript のフレームワークやライブラリのなかでも、歴史が長く、最も知名度が高いのは jQuery でしょう。比較的簡単に導入できることで、フロントエンドアプリにもよく用いられます。しかし、jQuery はあくまで記述を簡素化するライブラリであるため、自身で DOM操作（DOMツリーのノードにアクセスし、参照・操作を行うこと）を行わなければならないという欠点があります。
この欠点は、ブラウザで動くアプリの開発主体がサーバーサイドだった時はこれと言って問題ではありませんでした。しかし、UIやUXが重視されるようになったことで画面遷移させずに1つのページで処理が完結する SPA（＝Single Page Application）を中心にフロントエンド開発が主流になりつつある現在では jQuery の欠点が露呈したのです。
そこで台頭してきたのが DOM操作を自動化できる Angular や React.js 、Vue.js です。なかでもさまざまなメリットを有する Vue.js は、GitHub でほかの JavaScript フレームワークよりもスターを獲得するなど、人気を博しているのです。
Vue.jsを使うメリット
Webアプリ開発で用いられることが多い Vue.js ですが、Vue.js を使うことでどのようなメリットがあるのでしょうか。
学習コストが低い
Vue.js は比較的小規模で、シンプルな構造であるため、ほかのフレームワークよりも覚えることも少なくて済みます。
また、日本国内での人気も高く、技術情報が豊富であるため学習しやすいです。公式ドキュメントも詳しく書かれているので、読めば概要から詳細まで理解することができるでしょう。
導入に関しても、CDNでファイルを読み込み、scriptタグを1行書きこめば使い始められます。
拡張性が高い
Vue.js はシンプルな構造をしており、Vue.js独自の規約やルールが少ないため、他のツールやライブラリと組み合わせることで、Vue.js 単独では実現が難しいものも機能を補いながら比較的自由にアプリ開発ができます。
しかし、自由度の高さゆえに、中規模以上の Webアプリを作るのであれば Angular や React がおすすめです。Vue.jsを使いたいのであれば、あらかじめルールを定めておくか Nuxt.js などといった Vue.js を拡張したフレームワークを併せて使いましょう。
逆に既存のプロジェクトと組み合わせる場合や規模が大きくない Webアプリの開発には向いています。
前述したとおり、Vue.js は双方向データバインディングを行うのが主な役割です。Webアプリケーションを構築するのに足りない機能もありますが、Vue.js がシンプルであるため、ほかのライブラリと組み合わせるのがとても簡単です。
コンポーネントが再利用できる
Vue.js はコンポーネント指向のフレームワークです。コンポーネントとは、プログラムを部品化することで再利用する仕組みです。Vueインスタンス内でカスタム要素として使用できるため、重複作業を避けられ、開発工数を減らせます。
また、Vue.jsで書かれていない既存の Webサイトの一部分にVue.jsのコンポーネントを組み込むといったこともできます。
SPA開発がしやすい
Vue.js は拡張性が高いため、SPAの開発に使われることが多いです。
SPA とは単一ページでコンテンツを切り替える Webアプリのことで、ブラウザの処理を JavaScript で行うことでサーバとの通信量を最小限に抑えられる設計になっています。このようにページ遷移の際に差分だけを差し替えるため、画面全体を切り替える必要がなく、ユーザにとって使いやすい Webページになります。
DOM操作を自動的に行ってくれる
先述のとおり、Vue.jsでは、DOM操作によって簡潔で視認性の高いコードを記述できます。
これは、Vue.js に DOM操作を可能にするディレクティブという機能があるからです。
ユーザの入力値をすぐに反映する
Vue.js はユーザがブラウザで入力した値に対応する表示画面を即座に反映する「リアクティブ」という機能を保有しています。これは Vue.js が MVVM と呼ばれる設計パターンを採用しているためです。結果的にユーザにとって使いやすい Webページになります。また、開発者側にとっても、階層構造を気にしなくてよくなり、メンテナンスもしやすくなります。
MVVM
「Model（データ）」「View（画面）」「ViewModel（メイン処理）」といった役割ごとに分けて開発する方法。ユーザが入力した値を保持する「Model」の値と表示画面「View」が連動しており、一方の値が変わればもう一方の値も変わる。
Vue.jsを使うデメリット
先述したとおり、大規模開発には向いていないのが Vue.js のデメリットです。
Vue.js は単一ページでコンテンツを切り替える SPA が得意です。それゆえ大規模開発には不向きな面もあります。
大規模な開発を行うには Angular や React がおすすめです。
Vue.jsの将来性
Vue.jsを導入している企業
Vue.js にはさまざまなメリットがあるため、日本国内でも多くの企業が導入しています。
国内最大の Vue.js のカンファレンスである「Vue Fes Japan」 が2018年に秋葉原で開催されましたが、「zozo」や 「LINE」、「DeNA」をはじめとした大手IT企業がスポンサーとして名を連ねていることから、多くの開発現場で Vue.js が採用されているのは自明です。
このように多くのIT企業で Vue.js が採用されていることや2014年にリリースされてから2016年、2017年には JavaScript ベスト・オブ・ザ・イヤーに選出されるなど、人気も高いため今後もより多くの企業で導入されていくと考えられます。そのため、Vue.js の十分に高いといえます。
Vue.jsとほかのフレームワークの比較
| Vue.js | React.js | Angular | |
| 学習コスト | 〇 | 〇 | △ |
| 拡張性 | 〇 | 〇 | △ |
| 大規模開発 | △ | 〇 | 〇 |
| 個人開発 | 〇 | 〇 | △ |
| 柔軟性 | 〇 | 〇 | △ |
| 日本語ドキュメント | 〇 | △ | 〇 |
Vue.jsと人気動向でも比較されたAngular やReactとは、どういった違いがあるのでしょうか。類似点と相違点をあげて比較していきます。
Angularとの違い
先述したように Vue.js は Angular の影響を受けているため構文が似ている、SPA 開発が可能である、など類似点が多くあります。生産性の高いAngular も人気のフレームワークですが、Vue.js とは違って TypeScript を学ぶ必要のある Angular の学習難易度は高いため、個人での利用には不向きです。※バージョンアップの過程で「AngularJS」から「Angular」に改名されました。
Reactとの違い
React はコンポーネント機能を有している点や JavaScript で記述できる点など、Vue.js と似通った点が多いです。また、Vue.jsほどではありませんが、学習コストもそんなに高くないため、個人でも利用可能です。
しかし、React は Vue.js と違って、データバインディングが一方向であるため画面からデータに反映できないのです。
また、Vue.js に比べ、日本語で書かれた技術情報が少ないという現状もあります。
ただ、両者ともUI構築のために開発された JavaScriptフレームワークであるため、移行しやすいです。
おまけ
コードネームがあのアニメの名前？
ソフトウェア開発において正式名称やバージョン番号以外にも正式名称が決まるまでの仮の通称として愛称をつけることがよくあります。
有名なものだと Android OSでは「Donut」や「Lollipop」といったスイーツ名、MacOS では「Yosemite」や「Monterey」といったカリフォルニアの地名が付けられています。
Vue.js でも「Dragon Ball（ドラゴンボール）」や「Evangelion（エヴァンゲリオン）」、「One Piece（ワンピース）」といった親しみのあるアニメの名前が付けられているのです。
他にもたくさんの日本アニメの名前が付けられています。
開発者であるEvan You氏が相当なアニメ好きだとうかがえますね(^▽^)
