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を
ご覧ください。
注) リンク↓は、近々更新予定です。
他のフレームワークとの違い
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
と組合せて利用することも可能です。
ブラウザ・サポート
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が開発中です。現在は開発フェーズであり、アーリーアダプター
以外も試用可能な実装がVue3.6にてリリースされる予定となっています。。
Vapor Mode は、<script setup> +
Composition API で記述されたコンポーネント
(SFC)のみ、サポートします。
Vue3.6では、リアクティビティまわりの内部実装が自前の実装から
Johnson Chu 氏開発のalien-signalsに変更されます。
AngularJS(1.x)との違い
KnockoutJSとの違い
他の VDOMベースFW との違い
構造
ビュー周りをコア(本体)とし、ルーター等の便利機能は本体から
切り離し、プラグインとして実装する構成を取っています。
プラグインは既存の外部のセンスの良いライブラリを実装に
利用する形で提供されています。
プラグインについては現在、公式/サードパーティのプラグイン
があります。
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連携
プラグインとしては提供されていません。
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が
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を推す理由
最後に
この記事は常？にβです、内容は随時更新する予定です。
間違い等があれば、ご指摘ください。
指摘いただいた間違いについては間違いと判断すれば、修正します。