Vue.js概要？ #Vue.js

Vue.js とは

原作者である Evan You氏が中心となって開発中のクライアントサイド
JavaScirpt(JS)フレームワークです。

MVC の派生種である、GUIライブラリに適した MVVM を設計基盤として
採用し、構築されています。

MVVM を採用していることが、構文の理解しやすさに繋がっています。

MVVM を採用したフレームワークでは、表示そのものであるView、
表示するデータ及びデータを操作する手続きをひとまとめにした View Model
(VM)、が舞台上の役者です、それらを管理するコントローラ(Controller)は、
存在するものの、黒子のような存在で、ユーザからは隠蔽されているため、
コードを書く際に意識する必要はありません。

公式サイトで Vue.js の特徴は Simple、Fast、Composable、Compact、
Powerful、Module Friendlyという６つの言葉で表現されていました。

1)Simple
　HTMLを書き、JSONを掴み、View Modelを作る、Vue.jsを用いたコードを
　書く際に必要な作業はこれだけです。
2)Fast
　DOM操作をまとめ適切なタイミングで非同期更新することで高速な動作が
　実現されています。
3)Composable
　依存のない再利用可能なコンポーネントを作り、組み合わせることができます。
4)Compact
　ミニファイドかつ圧縮すると20kbとコンパクトになります。
5)Powerful
　HTMLに書く式と算出(算出)プロパティは依存するプロパティ(値or変数)が
　自動的にトラッキング(追跡)される等、ユーザにとって面倒な動作の
　多くを肩代わりしてくれます。
6)Module Friendly
　Webpack etcの中から貴方好みのモジュール管理の仕組みを利用できます。

概要

　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)プロパティ
　　に書き換えることになります。

Class指向

　JavaScript(JS)は、プロトタイプ・ベースのオブジェクト指向、を採用していますが、
　Vue.jsでは(内部的に)Classベースのオブジェクト指向を採用しています。
　(ES6では、Class構文が導入されていますが、シンタックス・シュガーであり、
　JSのオブジェクト指向は、根本的には、プロトタイプ・ベースのまま、です。)

　Vue.js(の内部構造)では Class をオブジェクト・リテラル(ハッシュ(連想配列)
　の形)で表現しています。
　(オブジェクト・リテラルも、JSでは、シンタックス・シュガーです。)

　3.x 以降では、Composition API の導入により、VMをオブジェクト・
　リテラルの形で定義しなくてよくなりました。(内部的には、オブジェクト・
　リテラルの形になっているはずです。)

　3.x 以降では、旧来のOptions APIより柔軟に記述できる
　Composition API が導入され、利用が推奨されています。
　(Composition API は移行促進のために2.7.x に
　バックポートされています。)

　Composion API は Options API より低レイヤ？のAPIであり、
　3.x の Options API は Compostion API 上に実装されています。

　(2.7 の Compostion APIは、後付け、なので、3.x とは異なる
　形で実装されています。)

　Options API は、(現状の)Vue.jsのコンポーネントの内部表現
　(データ構造)をそのまま表出させた感じのAPIで、コンポーネント
　と密結合していて、柔軟性に欠けていましたが、
　Composition API は、コンポーネントの内部表現とは疎結合の
　柔軟性＆自由度の高いAPI となっています。

View

　HTMLそのものです。基本的には、HTMLの要素にディレクティブ(属性)を付加し、
　ディレクティブを通じて、VMと連携させることで、VMのデータをViewと連動させ
　ます。

　作成した or 既存の UIコンテナを、コンポーネント(独自タグ)として、パーツ化
　して、(再)利用することもできます。

View Model (VM)

　VMは、プロパティ(データ、値)とメソッド(関数)、で構成されます。
　
　プロパティは、ディレクティブでViewと紐付けることで、Viewに反映
　させたり、Viewへの入力と連動させたりできます。

　メソッドは、ディレクティブで、要素のイベントと紐づけることで、Viewに
　対して操作が行われた際に、ひも付けられたVMのメソッドを実行できます。

　メソッドには、Viewのイベント用のメソッドとVMのライフサイクル・イベント
　用のメソッド、どちらでもないメソッド、の３種類があります。

　算出(Computed)プロパティをつかえば、プロパティの入出力を加工することも
　できます。

　Vue.jsでは、アプリケーション(全体)もコンポーネントも VM です。

Directive (ディレクティブ)

　Viewの要素に付加できる独自属性です。Viewの要素に付加することで、VMのプロパティと
　Viewの要素、VMのメソッドとViewの要素のイベント、を紐付けます。

　ビルトインのディレクティブには、要素の属性とVMのプロパティを紐付けるv-bind
　(旧v-attr)、要素のイベントとVMのメソッドを紐付けるv-on、要素の値と
　VMのプロパティを紐付けるv-model、etcがあります。

　ビルトインのディレクティブの他に、独自ディレクティブを作成することもでき、
　作成したディレクティブをカスタム・ディレクティブと呼びます。

　ディレクティブの定義・作成には Vue.direcitive を用います。

　ディレクティブは、View上の一つの要素に対する操作(DOM操作)のみを行えます。

Component (コンポーネント)

　View に記述できる独自タグであり、UIコンポーネント(コンテナ)です。

　Vue.jsでは、既存の or 新規作成した UIコンポーネントを組合せて、
　ページを構成することを前提にしています。

　コンポーネントの定義・作成には defineComponent/Vue.component を
　用います。

　Viewの要素とv-componentディレクティブを用いて、
　対応づけることもできます。
　
　Vue.jsで作成したUIコンポーネントは基本、カプセル化され、各々、
　独立しているため、VMオブジェクトのプロパティやメソッドを通じて、
　UIコンポーネント間でのデータのやりとりを行います。

Web Components

　Vue.jsはWeb Componentsで実現できる Model Driven View (MDV)
　を先取りしています。

Vue.js の詳細についてはリンク↓で公式サイトや紹介している記事etcを
ご覧ください。
注) リンク↓は、近々更新予定です。

他のフレームワークとの違い

　Reactとは、バックエンドにvDOM(Virtual DOM)を採用している
　点で共通しています。機能的にできることに、違いは、ほぼ、ありません。

　Reactが、JSセントリックであるのに対して、Vue.jsは
　HTMLセントリック & デザイナ・フレンドリーです。

　Reactとは異なり、デザインとロジックが明確に分離されています。

　(React.js、サーバーサイド・エンジニアが作った感あります。)

　軽量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
　(Backbone.js etc)と組合せて利用することも可能です。

ブラウザ・サポート

　Vue.jsではモダン・ブラウザ(2.xまではIE9以降、3.xからは
　IE以外)のみをサポートし、レガシー・ブラウザは非サポートと
　なっています。

　モダン・ブラウザのみをサポートすることで、モダン・ブラウザに
　搭載されたJSの新機能をフル活用すると共にブラウザ毎の差異の
　吸収を行うコードを最小限に止め実装をシンプルにすることに成功し
　高速な動作・シンプルでパワフルな構文を実現しています。

　W3CがHTML5策定を機に実装ありきの仕様策定の方針にシフトし、
　仕様内にブラウザに求める挙動の記述がある程度含まれるように
　なった結果、モダン・ブラウザはレガシー・ブラウザに比べ、
　ブラウザ間の差異が少なくなってきています。

　レガシー・ブラウザをサポートすることは一見、長所に見えますが、
　レガシー・ブラウザをサポートするということはレガシー・ブラウザを基準に
　レガシー・ブラウザで提供されている機能で実現できる範囲で設計すると
　いうことでもあります。

　既存のレガシー・ブラウザをサポートしているフレームワークの多くは、
　モダン・ブラウザにて導入されたJSまわりの新機能や改良の恩恵を充分に
　うけることができないという制約、モダン・ブラウザの新機能を利用すれば
　シンプルに実装できる機能をレガシー・ブラウザに搭載済みの機能のみで
　実現せざるをえない、レガシー・ブラウザを含むブラウザ間(バージョン間
　を含む)の差異をフレームワーク内で吸収せざるをえないせいで内部ロジックが
　複雑になるがゆえのパフォーマンス上の足枷等の短所を抱えています。

　(ブラウザの実装の違いをライブラリ？で吸収するPolyfillという実装手法
　もありますが、レガシー・ブラウザに既にある機能のみではモダン・ブラウザで
　ネイティブに実装された機能と同等の機能を実装すること、挙動をあわせる
　ことが難しいのが現実です、Polyfillは万能でも(無から有を生み出す)魔法
　でもありません。)

後発ゆえの優位性

　Vue.jsは先発のフレームワークの良いところを吸収し、また、その短所を
　反面教師とすることで、先発のフレームワークよりも洗練されています。

　メジャーバージョンアップの度に、既存のフレームワークの良いところを
　吸収し、ブラッシュアップ＆進化し続けています。

学習コスト

　初期学習コストは、それなりに掛かります、が、そこを抜けてしまえば、
　レールが敷かれている(感がある)ので、劇的に？、開発時間、及び、
　周辺ライブラリを含めた学習コスト(時間)、を圧縮できます。

AngularJS(1.x)との違い

　本文はこちら

KnockoutJSとの違い

　本文はこちら

他の VirtualDOM (VDOM) ベースFW との違い

　本文はこちら

構造

ビュー周りをコア(本体)とし、ルーター等の便利機能は本体から
切り離し、プラグインとして実装する構成を取っています。

プラグインは既存の外部のセンスの良いライブラリを実装に
利用する形で提供されています。

プラグインについては現在、公式・サードパーティのプラグイン
があります。

vue-router etc プラグインについては
実装が公開されています。

プラグイン

vue-router、vuex はv2.x、v3.0に対応済みです。

Router

vue-router (Vue0.12以降)
https://github.com/vuejs/vue-router

Resource

Kong/swrv
Vue版SWR。
v2.x & v3.x 対応。

Axiosを使うのが良さそうです。

Axios
https://github.com/mzabriskie/axios

Vue.jsとAxiosなら驚くほど簡単に作れる！外部APIを使ったWebアプリの実例
https://www.webprofessional.jp/fetching-data-third-party-api-vue-axios/

pagekit/vue-resource
PageKitというCMS向けに開発されていたvue-resource実装。v2.x対応。
一時期、公式採用されていました。
2016/11に公式→非公式になっています。

Validation

Vuelidate
v2.x & v3.x 対応。

VeeValidate
v2.x & v3.x 対応。

kazupon/vue-validator
v1.0で公式に取り込まれましたが、v2.0対応できずでパージされました。)

touch

jerrybendy/vue-touch-events
v2.xに対応しています。

vue/vue-touch
v2.0対応できず、廃止されました。

State Management (状態管理)

Pinia
Vue3.x以降

Vuex
Vue2.x

ES6 Class Style Component

Vue Class Component
v2.x対応。v3.x対応はbeta→deprecated。

(Vue.js3 de Class コンポーネント)

Vue Property Decorator
v2.x対応。

DI(Dependency Injection)

Vue.jsでは上述したとおりDI(Dependency Injection)機能は
標準搭載されていません、また、vue-diプラグインの提供予定も
ありません。

di-lite.jsやinjector.js等と組み合わせることにより、DIを
簡単に導入できます。

di-lite.js
http://nickqizhu.github.io/di.js/
injector.js
https://github.com/mizchi/injector.js
via http://d.hatena.ne.jp/mizchi/20130421/1366541175

現在

V3.0に実験的機能として導入された新機能Suspenseはv3.3で
正式版になる予定です。

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を追加した 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を利用しない戦略でのバックエンド(コンパイラ・ランタイム)が Vue Vaporの
コードネームで開発開始されています。現在は開発の初期？フェーズであり、
実装が登場するまでには時間が掛かると思われます。

https://twitter.com/_jessicasachs/status/1532283507145420801
https://twitter.com/tomoam_mat/status/1532382143460315136
https://blog.vuejs.org/posts/2022-year-in-review.html

サーバーサイドFWとの連携

RubyならRails、PHPならLaravelが良さそうです。

Railsは5.1 から Webpacker、7.0から Webpack or
esbuild を介して Vue.js をサポートしています。

Laravelは Vue.js を公式サポートしています。

Node.jsでは Nuxt.js or frourio が良さそうです。

Nuxt.js
　https://ja.nuxtjs.org
　v3.0 から v3.x対応。

frourio
　https://frourio.io
　Nuxt.js対応のフルスタックFW。

リンク

公式

vue.js
http://vuejs.org/
https://jp.vuejs.org/

Guide

http://vuejs.org/guide/
https://jp.vuejs.org/guide/

Api

パフォーマンス比較

紹介

実装まわり

[v0.10.x〜1.x]
データバインディング
http://efcl.info/2014/0209/res3658/
JavaScript フレームワークがデータバインディングを実現する４通りの手法
http://tech.nitoyon.com/ja/blog/2014/07/18/data-binding/
Backbone.jsなどのライブラリのgetter, setterがダサい理由と、その解消方法
http://qiita.com/tekkoc/items/eb5ab65524c3e5b4a11c