Vue.js とは
原作者である Evan You氏 が中心となって開発中のクライアントサイドJavaScirpt(JS)フレームワークです。
MVC の派生種である、GUIライブラリに適した MVVM を設計基盤として採用し、構築されています。
MVVM を採用していること が、構文の理解しやすさに繋がっています。
MVVM を採用したフレームワークでは、表示そのものであるView、表示するデータ(プロパティ)とデータを操作する手続き(メソッド)をひとまとめにした View Model(VM)、が舞台上の役者です、それらを管理するコントローラ(Controller)は、存在するものの、黒子のような存在で、ユーザからは隠蔽されているため、(コードを書く際に)意識する必要はありません。
VMとViewをひとまとまりにしてコンポーネント(Component)の形で扱います。
Vue.jsを利用していて、その設計(MVVMであること)を意識することはありません。
公式サイトで Vue.js の特徴はApproachable、Performant、Versatileという３つの単語で表現されています。
1)Approachable
標準的なHTML、CSS、JavaScriptの上に構築され、直感的なAPIと世界クラスのドキュメントを備えています
2)Performant
手動による最適化をほとんど必要としない、真にリアクティブでコンパイラに最適化されたレンダリングシステム。
3)Versatile
ライブラリとフル機能のフレームワークの間でスケールする、リッチで段階的に採用可能なエコシステム。
概要
View Model(VM)のプロパティ/メソッド(関数)と View(HTMLテンプレート)の間で、データの連携を行います。
APIを介して、VMに対する操作を行います。
ViewとVMのプロパティ/メソッドのひも付けを、ディレクティブ(Directive、属性)を用いて行い、Viewを構成するパーツ(UIコンテナ)をコンポーネント(Component)として切り出すことで、再利用のための部品化を行えます。
VMのプロパティとViewの間でやりとりするデータは、演算(Computed)プロパティを用いることでVMのプロパティに格納されているデータを変更することなく、表示用に加工できます。
2.xまで、フィルター(Filter)を用いることで同様のことが可能でした、3.0.0からフィルターは廃止されました。
フィルターを利用している場合、3.0.0以降、算出(Computed)プロパティに書き換える必要がなります。
オブジェクト指向
Vue.jsは(内部的に)オブジェクト指向を採用しています。
オブジェクト指向では、手続き(関数)とプロパティ(変数、値)をひとまとまりにして扱います。
Vue.jsの内部構造では VM をオブジェクト(ハッシュ(連想配列)の形)で表現しています。
JavaScript(JS)は、プロトタイプ・ベースのオブジェクト指向 を採用しています、
ES6では、Class構文が導入されていますが、シンタックスシュガーであり、JSのオブジェクト指向は、根本的には、プロトタイプ・ベースのまま、です。
オブジェクト・リテラル も、JSでのシンタックス・シュガーです。
Component (コンポーネント)
View に記述できる独自タグであり、UIコンテナです。
Component = VM(View Model) + View(HTMLテンプレート)です。
既存の or 新規作成したコンポーネントを組合せて、ページを構成することを前提にしています。
パーツ化して、(再)利用することもできます。
コンポーネントの定義には、defineComponent/Vue.component を
用います。
SFC(Single File Component)の形で定義することもできます。
Viewの要素とv-componentディレクティブを用いて、対応づけることもできます。
作成したコンポーネントは、カプセル化され、各々、独立しているため、VMオブジェクトのプロパティやメソッドを通じてコンポーネント間でのデータのやりとりを行います。
コンポーネントでアプリケーションを構成します。
ルートとなるコンポーネントを登録し、そのコンポーネント内で他のコンポーネントを呼び出す形です。
View Model (VM)
VMは、プロパティ(データ、値)とメソッド(関数)で構成されます。
プロパティは、ディレクティブでViewと紐付けることで、Viewに反映させたり、Viewへの入力と連動させたり、できます。
メソッドは、ディレクティブで要素のイベントと紐づけることで、Viewに対して操作が行われた際に、ひも付けられたVMのメソッドを実行できます。
メソッドには、Viewのイベント用のメソッドとVM / ライフサイクル・イベント用のメソッド / どちらでもないメソッド の３種類があります。
ライフサイクル・イベント用のメソッドは、ライフサイクル・フック(関数)を用いて、ライフサイクル・イベントに紐付けます。
どちらでもないメソッドは、Viewのイベント用のメソッドとVM / ライフサイクル・イベント用のメソッドのどちらかから利用しているメソッドです。
演算(Computed)プロパティをつかえば、プロパティの入出力を加工することもできます。
View(HTMLテンプレート)
HTMLそのもの+CSSです。
基本的には、HTMLの要素にディレクティブ(属性)を付加し、ディレクティブを通じて、VMと連携させることで、VMのプロパティ(データ)/メソッドをViewと連動させます。
Directive (ディレクティブ)
Viewの要素に付加できる独自属性です。Viewの要素に付加することで、VMのプロパティと付加した要素 or VMのメソッドと付加した要素のイベントの紐付け etcの 付加した要素への操作を行えます。
ビルトインのディレクティブには、要素の属性とVMのプロパティを紐付けるv-bind(旧v-attr)、要素のイベントとVMのメソッドを
紐付けるv-on、要素の値とVMのプロパティを紐付けるv-model etcがあります。
ビルトインのディレクティブの他に、独自ディレクティブを作成することもでき、作成したディレクティブをカスタム・ディレクティブと呼びます。
ディレクティブの定義・作成にはVue.direcitive を用います。
ディレクティブは、View上の一つの要素に対する操作のみを行えます。
API
Composition API
コンポーネントとは疎結合の柔軟性＆自由度の高いAPIです。
VMをオブジェクト・リテラルの形で定義せず、
setup関数内で、プロパティ(データ)とメソッド(関数)を個別に定義します。
SFC(Single File Component)では、<script setup>を用いて、プロパティ(データ)とメソッド(関数)を個別に定義します。
Options API と較べて、一見、複雑にみえますが、慣れてしまえば、Options API より自由度が高く柔軟に記述でき、コードの見通しもよくなります。
とっつきにくいけれどスケールする、玄人向きのAPIです。
3.0.0でリリースされ、利用が推奨されています。
(移行促進のために2.7.x にバックポートされています。)
Options API より低レイヤ？のAPIであり、3.xの Options API は Composition API 上に実装されています。
2.7 の Composition APIは 後付け なので、3.x とは異なる形で実装されています。
Options API
(現状の)Vue.jsのコンポーネントの(VMの)内部表現(データ構造)をそのまま表出させた感じのAPIです。
コンポーネントと密結合していて、柔軟性に欠けています。
VMをオブジェクト・リテラルの形で定義します。
わかりやすいけれどスケールしない、素人向きのAPIです。
Web Components
Vue.jsはWeb Componentsで実現できるModel Driven View (MDV)を先取りしています。
Vue.js の詳細についてはリンク↓で公式サイトや紹介している記事etcをご覧ください。
注) リンク↓は、近々更新予定です。
ブラウザ・サポート
Vue.jsではモダン・ブラウザ(2.xまではIE9以降、3.xからはIE以外)のみをサポートし、レガシー・ブラウザは非サポートとなっています。
モダン・ブラウザのみをサポートすることで、モダン・ブラウザに搭載されたJSの新機能をフル活用すると共にブラウザ毎の差異の吸収を行うコードを最小限に止め実装をシンプルにすることに成功し高速な動作・シンプルでパワフルな構文を実現しています。
W3CがHTML5策定を機に実装ありきの仕様策定の方針にシフトし、仕様内にブラウザに求める挙動の記述がある程度含まれるようになった結果、モダン・ブラウザはレガシー・ブラウザに比べ、ブラウザ間の差異が少なくなってきています。
レガシー・ブラウザをサポートすることは一見、長所に見えますが、レガシー・ブラウザをサポートするということはレガシー・ブラウザを基準にレガシー・ブラウザで提供されている機能で実現できる範囲で設計するということでもあります。
既存のレガシー・ブラウザをサポートしているフレームワークの多くは、モダン・ブラウザにて導入されたJSまわりの新機能や改良の恩恵を充分にうけることができないという制約、モダン・ブラウザの新機能を利用すればシンプルに実装できる機能をレガシー・ブラウザに搭載済みの機能のみで実現せざるをえない、レガシー・ブラウザを含むブラウザ間(バージョン間を含む)の差異をフレームワーク内で吸収せざるをえないせいで内部ロジックが複雑になるがゆえのパフォーマンス上の足枷等の短所を抱えています。
ブラウザの実装の違いをライブラリ？で吸収するPolyfillという実装手法もありますが、レガシー・ブラウザに既にある機能のみではモダン・ブラウザでネイティブに実装された機能と同等の機能を実装すること、挙動をあわせることが難しいのが現実です、Polyfillは万能でも(無から有を生み出す)魔法でもありません。)
後発ゆえの優位性
Vue.jsは先発のフレームワーク・ライブラリの良いところを吸収し、また、その短所を反面教師とすることで、先発のフレームワークよりも洗練されています。
メジャーバージョンアップの度に、既存のフレームワークの良いところを吸収し、ブラッシュアップ＆進化し続けています。
学習コスト
初期学習コストは、それなりに掛かります、が、そこを抜けてしまえば、レールが敷かれている(感がある)ので、劇的に？、開発時間、及び、周辺ライブラリを含めた 学習コスト(時間)、を圧縮できます。
現在
v3.0に実験的機能として導入された新機能Suspenseはv3.6で正式版になる予定です。
v3への移行を容易にするための移行パスが追加されたv2.7が2021 Q2にリリースされています。
MSがIE(&旧Edge)のフェードアウトを決定したこともあり、v3.x以降はIE11サポートは行われず、IE11に対応する最後のバージョンとなるv2.7へのv3.x互換機能のバックポートにより多くの開発リソースが割り当てられることになりました。
v3.0.0リリース時点では、時間的制約により見送られたIE11サポートが3.0.x or 3.1以降で追加される予定でした。)
v2.0.0がリリースされてから約４年、v2 をTypeScriptで書き直して、新たなAPIであるComposition APIを追加した v3.0.0 が、RCフェーズを経て、リリースされました。
v3.0.0では、構文の拡張、APIの変更・追加・廃止が行われています。
v2.0.0では、バックエンドでのVirtual DOMの採用に伴い、フル・スクラッチでの書き直しが行われました。
v2.0では、バックエンドへのvDOMの採用により、構文の変更・拡張が行われています。
https://github.com/vuejs/vue/issues/2873
v1.0でObject.observe(O.o)対応が囁かれていましたが、ES(ECMA Script)仕様の策定において、進捗が芳しくないこともあり、見送られました。その後、O.oの提案者であるGoogleが提案の取り下げを行い、O.o自体がES仕様から消滅しています。
v2.0以降では、ES2015からES仕様に追加されたProxyを利用する形に書き直されています。
v0.11では、フル・スクラッチでの書き直しが行われました。
v0.11.0では構文の拡張・変更が行われました。
https://github.com/yyx990803/vue/blob/master/changes.md
(Vue.js v0.11の変更点(予定)まとめ
http://blog.koba04.com/post/2014/10/07/vue-js-v011-changes/)
今後(ロードマップ)
仮想DOMを利用しない戦略でのSFCバックエンド(SFCコンパイラ・ランタイム)Vapor Modeが開発中です。現在は開発フェーズであり、3.6にてリリースされる予定となっています。
Vapor Mode は、<script setup> + Composition API で記述されたコンポーネント(SFC)のみ、サポートします。
3.6では、リアクティブ・システムの内部実装が自前の実装からJohnson Chu 氏開発のalien-signalsベースに変更される予定となっています。
2025/12/23、Vapor Modeのベータ版？を含むVue.js3.6-beta.1がリリースされました。
他のフレームワーク・ライブラリとの違い
Reactとは、バックエンドに仮想DOM(Virtual DOM)を採用している点で共通しています。機能的にできることに、違いは、ほぼ、ありません。
Reactが、JSセントリックであるのに対して、Vue.jsはHTMLセントリック & デザイナ・フレンドリー です。
Reactとは異なり、デザインとロジックが明確に分離されています。
(React、サーバーサイド・エンジニアが作った感あります。)
軽量AngularJS(1.x)とでも呼ぶべきフレームワーク(FW)となっています。
AngularJS(1.x)と表面上は似ていますが、設計思想は似て非なるモノであり、構文は同じくMVVMを設計基盤にするKnockoutJSに似ています。
後発だけあって、AngularJS(1.x)やKnockoutJSにあるViewまわりの課題の多くを解消しています。
Angular(JS)はフルスタックのFWであり利用するならAngular(JS)にどっぷり浸かるしかありませんが、Vue.jsはViewまわりに特化しそれ以外の機能は自由に任意のライブラリを選択可能で、便利機能はプラグインとして提供のFWですので、既存の既に利用してきた特定のView特化ライブラリに依存しないFWと組合せて利用することも可能です。
React との違い
AngularJS(1.x)との違い
他の 仮想DOMベースFW・LIB との違い
KnockoutJSとの違い
構造
ビュー(View)周りをコア(本体)とし、ルーター等の便利機能は本体とは別に、プラグインとして実装する構成をとっています。
プラグインは既存の外部のセンスの良いライブラリを実装に利用する形で提供されています。
プラグインについては現在、公式/サードパーティのプラグインがあります。
vue-router etc のプラグインについては
実装が公開されています。
プラグイン
vue-router、vuex はv2.x、v3.0に対応済みです。
Router
Validation
touch
for 3.x
for 2.x
State Management (状態管理)
3.x対応
2.x対応
ES6 Class Style Component (Deprecated)
v2.x対応。v3.x対応はbeta→deprecated。
v2.x対応。
WEB API連携
プラグインとしては提供されていません。
fetch、ofetch、Axios etc と組み合わせることにより、容易に連携できます。
DI(Dependency Injection)
Vue.jsではDI(Dependency Injection)機能は標準搭載されていません、また、プラグインの提供予定もありません。
3.xの provide/inject は依存性注入を
行えますが、機能は限定されています。
TSyringe etc と組み合わせることにより、DIを簡単に導入できます。
サーバーサイドFWとの連携
RubyならRails、PHPならLaravelが良さそうです。
Railsは5.1 から Webpacker、7.0から Webpack or esbuild etc を介して Vue.js をサポートしています。
Laravelは Vue.js を公式サポートしています。
Node.js etcのサーバサイドJS実行環境では Nuxt3/4がVue.js3をビルトインサポートしています。
v3.0 から v3.x対応。
Vue.js は、任意のサーバーサイドFW で作成されたWEB API(バックエンド)と容易に連携できます。
リンク
公式
Guide
API
エグザンプル
パフォーマンス比較
紹介
実装まわり
[v0.10.x〜1.x]
データバインディング
TypeScript
###環境まわり
他のFWとの比較
サーバーサイドFWとの連携
他のJSライブラリとの連携
コンポーネント集
採用企業
採用サイト
LINEスケジュール
via
イベント・勉強会
Vue.jsを推す理由
最後に
この記事は常？にβです、内容は随時更新する予定です。
間違い等があれば、ご指摘ください。
指摘いただいた間違いについては間違いと判断すれば、修正します。