Vue.js概要？

## Vue.js とは

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

https://jp.vuejs.org/

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

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

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

http://ja.wikipedia.org/wiki/Model_View_ViewModel

公式サイトで 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のプロパティに格納されているデータを
変更することなく、表示用に加工できます。

::: note info 
2.xまで、フィルター(Filter)を用いることで同様のことが
可能でした、3.0.0からフィルターは廃止されました。  
フィルターを利用している場合、3.0.0以降、算出(Computed)
プロパティに書き換える必要がなります。
:::

#### オブジェクト指向

Vue.jsでは(内部的に)オブジェクト指向を採用しています。

::: note info
オブジェクト指向では、手続き(関数)とプロパティ(変数)を
まとめて扱います。
:::

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

::: note info
JavaScript(JS)は、プロトタイプ・ベースのオブジェクト指向 を
採用しています、

ES6では、Class構文が導入されていますが、シンタックス
シュガーであり、JSのオブジェクト指向は、根本的には、
プロトタイプ・ベースのまま、です。
:::

::: note info
オブジェクト・リテラル も、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 上に実装されています。  

::: note info
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では、コンポーネントでアプリケーションを構成します。

::: note info
ルートとなるコンポーネントを登録し、そのコンポーネント内で
他のコンポーネントを呼び出す形です。
:::

#### Web Components

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

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

https://ja.wikipedia.org/wiki/Vue.js


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

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

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

### 後発ゆえの優位性

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

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

### 学習コスト

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

## 現在

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

v3への移行を容易にするための移行パスが追加されたv2.7が
2021 Q2にリリースされています。

https://github.com/vuejs/vue-next/releases/tag/v3.0.0

MSがIE(&旧Edge)のフェードアウトを決定したこともあり、v3.x以降は  
IE11サポートは行われず、IE11に対応する最後のバージョンとなるv2.7  
へのv3.x互換機能のバックポートにより多くの開発リソースが割り当て  
られることになりました。  

::: note info
v3.0.0リリース時点では、時間的制約により見送られたIE11サポート
が3.0.x or 3.1以降で追加される予定でした。)
:::

https://github.com/vuejs/rfcs/discussions/296

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md

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

::: note info
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にてリリースされる予定となっています。。

::: note info
Vapor Mode は、&lt;script setup&gt; +
Composition API で記述されたコンポーネント
(SFC)のみ、サポートします。
:::

https://twitter.com/_jessicasachs/status/1532283507145420801


https://blog.vuejs.org/posts/2022-year-in-review.html

Vue3.6では、リアクティビティまわりの内部実装が自前の実装から
Johnson Chu 氏開発のalien-signalsに変更されます。

https://zenn.dev/comm_vue_nuxt/articles/about-alien-signals#signalsというインターフェイス


## AngularJS(1.x)との違い

https://qiita.com/asip2k25/items/e3147c8745a4c58cc215

## KnockoutJSとの違い

https://qiita.com/asip2k25/items/5c74c2cff5e0faa3ca52

## 他の VDOMベースFW との違い

https://qiita.com/asip2k25/items/5dffabc4fc3536e66a6e

## 構造

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

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

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

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

## プラグイン

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

### Router

https://github.com/vuejs/vue-router

### Validation

https://reglejs.dev

https://zenn.dev/comm_vue_nuxt/articles/74a2deb49465a5

https://vuelidate.js.org

https://vee-validate.logaretm.com/v3

### touch

https://github.com/robinrodricks/vue3-touch-events

for 3.x

https://github.com/jerrybendy/vue-touch-events

for 2.x

### State Management (状態管理)

https://pinia.vuejs.org

3.x対応

https://vuex.vuejs.org/ja/

2.x対応

### ES6 Class Style Component (Deprecated)

https://github.com/vuejs/vue-class-component

v2.x対応。v3.x対応はbeta→deprecated。

https://github.com/kaorun343/vue-property-decorator

v2.x対応。

https://qiita.com/asip2k25/items/ae013af6561839ed0c43

### WEB API連携

プラグインとしては提供されていません。

Axios etc と組み合わせることにより、容易に連携できます。

https://github.com/mzabriskie/axios

https://github.com/TanStack/query

https://github.com/Kong/swrv

### DI(Dependency Injection)

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

::: note info
3.xの provide/inject 機能は依存性注入を
行えますが、機能は限定されています。
:::

TSyringe etc と組み合わせることにより、DIを簡単に
導入できます。

https://github.com/microsoft/tsyringe

https://qiita.com/JDM/items/179b44eea9ed5723d90c

## サーバーサイド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をビルトインサポートしています。

https://nuxt.com

v3.0 から v3.x対応。

Vue.js は、任意のサーバーサイドFW で作成されたWEB API(バックエンド)と
容易に連携できます。

## リンク

### 公式

https://jp.vuejs.org/

### Guide

https://ja.vuejs.org/guide/introduction

### API

http://vuejs.org/api/

### エグザンプル

http://vuejs.org/examples/

### パフォーマンス比較

http://vuejs.org/perf/

### 紹介



### 実装まわり

[v0.10.x〜1.x]
データバインディング

http://efcl.info/2014/0209/res3658/

http://tech.nitoyon.com/ja/blog/2014/07/18/data-binding/

http://qiita.com/tekkoc/items/eb5ab65524c3e5b4a11c

### TypeScript

###環境まわり

### 他のFWとの比較



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

### 他のJSライブラリとの連携

http://qiita.com/asip2k25/items/920567d957ea1aacc2d3

### コンポーネント集

https://qiita.com/asip2k25/items/8b235b11187dfd9fe88e

## 採用企業

https://whatweuse.dev/tool/vuejs

https://whatweuse.dev/tool/nuxt

https://github.com/chibivue-land/japanese-companies-using-vuejs

### 採用サイト

LINEスケジュール

https://schedule.line.me/

via

http://codezine.jp/article/detail/8363

### イベント・勉強会

## Vue.jsを推す理由

https://qiita.com/asip2k25/items/2fa0caddda441156d027

## 最後に

この記事は常？にβです、内容は随時更新する予定です。
間違い等があれば、ご指摘ください。
指摘いただいた間違いについては間違いと判断すれば、修正します。