Vue.js情報
Vue.jsとは
Vue.js(ヴュージェイエス)とはSPA(シングルページアプリケーション)に向いたJavaScriptフレームワークです。
Vue.jsは、Google社でAngularJSの開発に携わっていたEvan You(エヴァン・ヨー)氏により「Angularの不要な部分を削減した軽量のフレームワーク」という思想の元、個人的に開発が始められ、2014年2月にリリースされました。
2022年2月にVueのデフォルトバージョンがVue 3となることがVue.js作者のEvan You氏により告知され、2023年12月31日でVue 2 のサポートは終了しました。
日本語ドキュメントも充実しており、公式サイトのドキュメントを読めば概要から詳細まで理解することができると思います。
また、日本のアニメを思わせるコードネームが付けられることが恒例となっていることも親しみやすさの理由の一つかもしれません。
主な特徴
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で行われたベンチマークにおいても、軽量で高速な動作を誇る後発フレームワークのPreact やSvelteに劣らない結果を出しています。
UIフレームワーク
Vue.jsを取り巻くUIフレームワークについて、現在人気のあるものをピックアップして紹介します。
Vuetify
非常に活発に開発されているマテリアルデザイン系のフレームワークです。
マテリアルデザインを利用したい場合は後述のVue Materialかこちらのどちらかを選んでおくと良いかと思います。
2022年11月1日にVue 3 に対応した v3.0がリリースされました。2024年5月現在の最新バージョンはv3.6.7になります。
Element
-
独自デザインのフレームワークで、Vue.jsのUIフレームワークでは最もGitHubのスターが多く人気があります。中国での採用実績がおおく、Contributorsも中国人が多いようです。Vue.jsの開発者が中国人ということもあり、中国国内で人気のElementはコミュニティによる開発は今後も続きそうです。
2022年2月に、Vue 3 ベースのElement+ がリリースされているため、Vue 3 を利用する場合は、Element+ を利用してください。
Vue Material
マテリアルデザイン系のフレームワークです。Googleの提唱するマテリアルデザインの思想を最も忠実に従っている印象があります。
2024年5月現在、Vue 3 のサポートは行われておりません。
Bootstrap Vue
言わずとしれたBootstrapのVue.js向けフレームワークです。
GitHubでの人気はVue Materialと同等ですが、使い慣れている人が多いということもあり利用している人は多い印象です。
2022年10月25日にv2.23.0 がリリースされVue.js 3 の 移行ビルドでBootstrapVueを使用できるようになりました。BootstrapVue 3 が準備されておりますが、2024年5月現在、正式版のリリースは行われておりません。
最新の状況はドキュメントを参照してください。
Vue.jsのライセンス
Vue.jsはMITライセンスのオープンソース・ソフトウエアです。MITライセンスのソフトウェアは無償で再配布、商用利用などが可能となっており、他のオープンソースライセンスに比べ制限が極めて緩いライセンスになります。
オープンソース年間サポートサービス
OpenStandiaではOSSを安心してご利用いただけるように、オープンソース年間サポートサービスをご提供しております。
サポートしているOSSは下記ページをご参照ください。