Vue.jsの概要

Vue.js（ヴュージェイエス）とはSPA（シングルページアプリケーション）に向いたJavaScriptフレームワークです。
Vue.jsは、Google社でAngularJSの開発に携わっていたEvan You(エヴァン・ヨー)氏により「Angularの不要な部分を削減した軽量のフレームワーク」という思想の元、個人的に開発が始められ、2014年2月にリリースされました。
2022年2月にVueのデフォルトバージョンがVue 3となることがVue.js作者のEvan You氏により告知されておりますが、2022年10月現在でもVue 2のバージョンアップも継続して行われております。
また、Vue 3 に対応していないUIフレームワークもあるため、ご注意ください。
※詳細は後続の「UIフレームワーク」の章を参照してください。
日本語ドキュメントも充実しており、公式サイトのドキュメントを読めば概要から詳細まで理解することができると思います。
また、日本のアニメを思わせるコードネームが付けられることが恒例となっていることも親しみやすさの理由の一つかもしれません。

Vue.jsの特徴

Vue.js には以下の特徴があります。

• 学習コスト(Approachable)

他のJSフレームワーク(Angular等)と比較すると従う必要のあるルールが少なく、シンプルに作られているため、JS、HTML、CSSの基礎知識があれば、簡単に利用することができます。
一方でルールが少ないため大規模での開発で利用する場合は事前にルールを定めるか、Nuxt.jsなどVue.jsを拡張したフレームワークを利用する必要があります。




• 融通性(Versatile)

Vue.jsはコンポーネント指向のフレームワークであるため、画面の部品を一つまたは複数のコンポーネントとして作成することができます。
それらのコンポーネントは再利用性が高く、Vue.jsで記述されていない既存のWebサイトにも部分的にVue.jsのコンポーネントを利用するといった導入の仕方も可能であることからとても融通のきくフレームワークです。




• 高性能(Performant)

Minifyして圧縮することで20KB程度とコンパクトであり、DOM操作も適切なタイミングでまとめて非同期更新されるため高速な動作を実現しています。
Vue3.2で行われたベンチマークにおいても、軽量で高速な動作を誇る後発フレームワークのPrect やSvelteに劣らない結果を出しています。

UIフレームワーク

Vue.jsを取り巻くUIフレームワークについて、現在人気のあるものをピックアップして紹介します。

• Vuetify

非常に活発に開発されているマテリアルデザイン系のフレームワークです。
マテリアルデザインを利用したい場合は後述のVue Materialかこちらのどちらかを選んでおくと良いかと思います。
ただし、2022年10月現在では Vue 3 に対応しておりません。
ロードマップによれば、Vue 3 に対応した V3.0のリリースはsoon (もうじき)となっているため、選定の際は最新の情報を確認してください。



• Element

独自デザインのフレームワークで、Vue.jsのUIフレームワークでは最もGitHubのスターが多く人気があります。中国での採用実績がおおく、Contributorsも中国人が多いようです。Vue.jsの開発者が中国人ということもあり、中国国内で人気のElementはコミュニティによる開発は今後も続きそうです。
2022年10月現在、Vue 3 ベースのElement+ がリリースされているため、Vue 3 を利用する場合は、Element+ を利用してください。



• Vue Material

マテリアルデザイン系のフレームワークです。Googleの提唱するマテリアルデザインの思想を最も忠実に従っている印象があります。
2022年10月現在、V ue 3 のサポートは行われておりません。



• Bootstrap Vue

言わずとしれたBootstrapのVue.js向けフレームワークです。
GitHubでの人気はVue Materialと同等ですが、使い慣れている人が多いということもあり利用している人は多い印象です。
Vue 3 をサポートするBootstrapVue 3 が準備されておりますが、2022年10月現在、正式版のリリースは行われておりません。
最新の状況はドキュメントを参照してください。

Vue.jsのライセンス

Vue.jsはMITライセンスのオープンソース・ソフトウエアです。MITライセンスのソフトウェアは無償で再配布、商用利用などが可能となっており、他のオープンソースライセンスに比べ制限が極めて緩いライセンスになります。

参考情報

Vue.jsの公式サイト

Vue.jsのサポート