Vue.js とは
原作者である Evan You氏 が中心となって開発中のクライアントサイドJavaScirpt(JS)フレームワークです。
MVC の派生種である、GUIライブラリに適した MVVM を設計基盤として採用し、構築されています。
MVVM を採用していること が、構文の理解しやすさに繋がっています。
MVVM を採用したフレームワークでは、表示そのものであるView、表示するデータ 及び データを操作する手続き をひとまとめにした
View Model(VM)、が舞台上の役者です、それらを管理するコントローラ(Controller)は、存在するものの、黒子のような存在で、ユーザからは隠蔽されているため、コードを書く際に意識する必要はありません。
公式サイトで Vue.js の特徴はApproachable、Performant、Versatileという３つの単語で表現されています。
1)Approachable
標準的なHTML、CSS、JavaScriptの上に構築され、直感的なAPIと世界クラスのドキュメントを備えています
2)Performant
手動による最適化をほとんど必要としない、真にリアクティブでコンパイラに最適化されたレンダリングシステム。
3)Versatile
ライブラリとフル機能のフレームワークの間でスケールする、リッチで段階的に採用可能なエコシステム。
概要
Vue.jsでは、View Model(VM)のプロパティと View(HTMLテンプレート)の間で、データの連携を行います。
ViewとVMのプロパティのひも付けを、ディレクティブ(Directive、属性)を用いて行い、Viewを構成するパーツ(UIコンテナ)をコンポーネント(Component)として切り出すことで、Viewの再利用のための部品化を行えます。
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では、シンタックス・シュガーです。
3.x 以降では、Composition API の導入により、VMをオブジェクト・リテラルの形で定義しなくてよくなりました。(内部構造は、オブジェクト(・リテラル)の形になっています。)
3.x 以降では、旧来のOptions APIより柔軟に記述できるComposition API が導入され、利用が推奨されています。
(Composition API は 移行促進のために2.7.x にバックポートされています。)
Composition API は Options API より低レイヤ？のAPIであり、3.x の Options API は Composition API 上に実装されています。
2.7 の Composition APIは 後付け なので、3.x とは異なる形で実装されています。
Options API は、(現状の)Vue.jsのコンポーネントの内部表現(データ構造)をそのまま表出させた感じのAPIで、コンポーネントと密結合していて、柔軟性に欠けていましたが、Composition API は、コンポーネントとは疎結合の柔軟性＆自由度の高いAPI となっています。
Composition API は、Options API と較べて、一見、複雑にみえますが、慣れてしまえば、Options API より自由度が高く柔軟に書け、コードの見通しもよくなります。
View Model (VM)
VMは、プロパティ(データ、値)とメソッド(関数)、View(HTMLテンプレート)、で構成されます。
プロパティは、ディレクティブでViewと紐付けることで、Viewに反映させたり、Viewへの入力と連動させたりできます。
メソッドは、ディレクティブで、要素のイベントと紐づけることで、Viewに対して操作が行われた際に、ひも付けられたVMのメソッドを実行できます。
メソッドには、Viewのイベント用のメソッドとVM / ライフサイクル・イベント用のメソッド / どちらでもないメソッド の３種類が
あります。
算出(Computed)プロパティをつかえば、プロパティの入出力を加工することもできます。
View(HTMLテンプレート)
HTMLそのものです。基本的には、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上の一つの要素に対する操作のみを行えます。
Component (コンポーネント)
View に記述できる独自タグであり、UIコンテナです。
Component = VM(View Model) です。
Vue.jsでは、既存の or 新規作成した UIコンポーネントを組合せて、ページを構成することを前提にしています。
パーツ化して、(再)利用することもできます。
コンポーネントの定義・作成にはdefineComponent/Vue.component を
用います。
Viewの要素とv-componentディレクティブを用いて、対応づけることもできます。
Vue.jsで作成したUIコンポーネントは基本、カプセル化され、各々、独立しているため、VMオブジェクトのプロパティやメソッドを通じて、UIコンポーネント間でのデータのやりとりを行います。
Vue.jsでは、コンポーネントでアプリケーションを構成します。
ルートとなるコンポーネントを登録し、そのコンポーネント内で他のコンポーネントを呼び出す形です。
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.xで正式版になる予定です。
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/)
今後(ロードマップ)
vDOMを利用しない戦略でのバックエンド(SFCコンパイラ・ランタイム)Vapor Modeが開発中です。現在は開発フェーズであり、アーリーアダプター以外も試用可能な実装が3.6にてリリースされる予定となっています。。
Vapor Mode は、<script setup> +
Composition API で記述されたコンポーネント(SFC)のみ、サポートします。
3.6では、リアクティビティシステムの内部実装が自前の実装からJohnson Chu 氏開発のalien-signalsベースに変更される予定と
なっています。
Vue.js3.6のベータ、今年(2025)の年末までに、リリースされる予定です。
他のフレームワークとの違い
Reactとは、バックエンドにvDOM(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)との違い
他の VDOMベースFW との違い
KnockoutJSとの違い
構造
ビュー周りをコア(本体)とし、ルーター等の便利機能は本体から切り離し、プラグインとして実装する構成を取っています。
プラグインは既存の外部のセンスの良いライブラリを実装に利用する形で提供されています。
プラグインについては現在、公式/サードパーティのプラグインがあります。
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、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を推す理由
最後に
この記事は常？にβです、内容は随時更新する予定です。
間違い等があれば、ご指摘ください。
指摘いただいた間違いについては間違いと判断すれば、修正します。