はじめに
AngularJS(1.x)との違い
設計の違い
AngularJSはMVC(厳密にはMVW?)、対してVue.jsはMVVM、Viewと
Controllerの間にView Model(VM)を挟み、AngularJSのように
Controllerと画面(View)を対応させるのではなく、
VMと画面(厳密には画面のUIコンテナ(コンポーネント))を
対応させています。
Vue.js(というかMVVM)ではControllerは隠蔽されています。
AngularJSはController駆動(ドリブン)、Vue.jsはModel駆動
といえると思います。
AngularJSは大規模アプリを想定しているため、中小規模アプリでは
高コストすぎる機能も本体に含んでいますが、Vue.jsは必要な機能
のみを組合せて利用することを前提としているのか、いらない機能は
本体に含まず、本体はViewまわりのみの最少構成を維持する方向と
なっています。
(上記はMVC・MVVMの解説ではありません、Vue.jsとAngularJSの
しくみの違いについて書いているのみです。MVC・MVVMについて
詳しく知りたければ、Wikipedia等をあたるのが正解です。)
MVVM
DI(Dependency Injection)とバインディング
AngularJSではControllerとViewのバインディングを行っています
が、Vue.jsはView Model(VM)とViewでバインディングを行っています。
AngularJSではデータと振る舞いがControllerとModelに分離されて
いるため、画面のUIコンテナ(コンポーネント)のルート要素に
Controllerを紐付けた上でController経由でModelを画面と紐付ける
形になりますが、Vue.jsではVMにデータと振る舞いを一元化している
ので、画面のUIコンテナ(コンポーネント)にVMを紐付るだけで済みます。
ViewとVMのバインディングはVue.jsにより管理されるため、
VMを隠蔽されたControllerとは切り離して考えることができます。
Vue.jsではフォームの入力系要素の値はVMとViewの
間で適切に紐付けを行っていると、VM⇔View間で自動的に
同期されます。
AngularJSではデータと振る舞いが別々に存在し、それらとView
を繋ぐ糊が必要であるため、DI(Dependency Injection)機能を
標準搭載していますが、Vue.jsではViewとVMの間でデータと振る舞い
の紐付けを完結できるので、DI機能は標準搭載されていません。
Modelの扱い
AngularJSではModelは基本、振る舞いを持たないデータの入れものに
すぎませんが、Vue.jsのView Modelはデータと振る舞いを
持っています。
Web Components
PolymerとWebComponents
http://steps.dodgson.org/b/2013/05/19/polymer-and-web-components/
AngularJS(1.x)はWeb Components仕様及びそのPolyfill実装
であるPolymerを考慮していないため、組合せての利用では
問題があることが指摘されていて、2.0でWeb Components仕様
及びPolymer(のPlatform.js?)への対応が予定されていました。
Vue.jsでは0.11.xでWeb Components最新？仕様との同調？が予定
されていました。
コンポーネント指向
Vue.jsはAngularJS(1.x)とは違い、既存のor新規作成した
UIコンポーネントを組合せてページを構成することを前提に
しています。
オブジェクト指向
AngularJS(1.x)はClassベースではありませんが、
Vue.jsはオブジェクト指向となっています。
AngularJS(1.x)についてはAngular Classy を被せることにより
Classベースでの開発(Controllerまわりのみ)が
行えるようになります。
Angular Classy
http://davej.github.io/angular-classy/
Angular(JS)は2.0以降でClass(ES6ではなくTypeScript)ベースと
なっています。
ブラウザー・サポート
AngularJS(1.x)はレガシー・ブラウザをサポートしています。
Angular(JS)は2.0以降でレガシー・ブラウザを切り捨てていますが、
高速な動作が実現されているかは要検証です。
AngularJS(1.x)はレガシー・ブラウザーに特化した設計となっていて、
モダン・ブラウザ向けのチューニングを行う(モダン・ブラウザを用いて
高速化できる処理を切出し、レガシーブラウザとモダン・ブラウザで
処理を切換えられるようにする?)ことが難しい模様。
構文の違い
ディレクティブ (directive)
AngularJSとはディレクティブの定義が異なり、
Vue.jsのディレクティブは要素に付加できる独自属性
であり、この機能により、VMとViewの結びつけを行う
とともに、Vue.js組込みor独自定義したディレクティブ
を要素に付加することにより、要素を操作することが
できます。
AngularJS(1.x)ではHTML仕様による要素の属性毎に対応した独自属性を
用意していますが、Vue.jsは要素の属性をVMのデータと対応させるための
ディレクティブv-bind(旧v-attr)のみが用意されています、v-bindで
要素の属性(複数可)とVMのデータとの対応を記述するようになっています。
イベント操作も同様に、AngularJS(1.x)ではHTML仕様のイベント毎に
対応した独自属性を用意していますが、Vue.jsは要素のイベント(操作)を
VMのふるまい(メソッド)と対応させるためのディレクティブv-onのみが
用意されています、v-onで要素のイベント(複数可)とVMのメソッドとの
対応を記述するようになっています。
独自のディレクティブ(カスタム・ディレクティブ)を定義し
利用することも可能です。
コンポーネント(component)
Vue.jsのComponentはAngularJSのディレクティブに相当する
機能です。
Angular2.0開発の迷走
2.0発表時の設計資料から察せられる通り、Angular(JS)
は2.0でかなり手が入り、1.xとはだいぶ変わること、が
確定していました。
既に大きなフルスタックフレームワークであり、2.0の
開発が どうなるかは未知数、革新ではなく下位互換に
重点を置きすぎる、と開発が停滞する可能性も
ありました...。
Angular2.0は、ES6＋ES7の一部＋α という、当時まだ
フル実装の存在していないJS仕様をターゲットに開発が
行なわれていたため、Angular(JS)の開発者にとっては
挑戦として面白かったのかもしれませんが、リリース
までには長い時間が必要となる懸念がありました。
ES6の実行環境の実装によっては、ある程度、実装が
進んだ段階で 大きな手戻りが必要になるリスクも
懸念されていました。
ES6→ES5の Traceur Compiler はあったものの、
ES6の実行環境が存在しなかったこともあり、実用
レベルには達しておらず、ES6 をフル？実装した
主要ブラウザが出揃うまで、正式版がリリース
されない可能性を高めていました。
ES6、仕様自体はfreezeされていたものの、仕様の
発行がレビュー及び実装からのフィードバックを反映
するため2015/06 に延期されたりもしました。
Object.oberve等、ES6では入らずES7以降へ持ち越し
となっていた機能のいくつかが、前倒しになる可能性が
限りなく低いです がありはしました。その後、
Object.oberve は仕様から取り下げられています。
フルスタックでありながら、ほんの数人のエンジニア
だけで開発されていることも開発の長期化を予感
させました。
2.0では、Web Comopnents仕様対応かつ自律した
UIコンポーネントを作成できることがGoogleブランドで
あり続けるためには外せないであろうことも、開発期間
の長期化を予感させました。
発表時点でリリース時期未定 となっていたことからも、
1.xとは大幅に変わるのは ほぼ確実でした が、
Angular(JS)2.0を1.xとそれほど大きく変えず、
早期リリースの実現を目指すことも考えられました。
その場合、Angular(JS)2.0は淘汰され消えていた
でしょう、変化を許容できないFWは生き残れません。
2015/03に Angular2.0の開発において大幅？な変更が
ありました。
当初、Traceur Compiler ベースでの ES6→ES5 変換を
利用してのES6ベースでの開発が予定されていましたが、
Traceurが期待するほどの変換能力を実現できていない
ことから、AtScriptという名前でES5ベースにES6の
一部機能をツッコんだAltJSを開発する方向に方針を
変更、更に、独自に開発していては開発に時間が掛かる
上に枯れて問題なく利用できるレベルに達するのにも
時間を要するためか、AtScriptの開発をMS主体で開発が
進められているTypeScriptに合流することが決定
されました。
Traceur Compiler(Google) → AtScript(Google) ⇨ TypeScript(MS)...。
Angular2.0開発における一番？の懸念材料であった
ES5・ES6両対応のための足回りの問題がこれで解消に
向かいました。
この開発方針の変更に合わせ、Angular2.0のリリース
時期も2015/03時点で来年と発表されました。
他の懸念材料は残っていましたが、GoogleがAngularに
投入している人的リソースから考えると、妥当な判断
だったのではないかと思います。Angular2.0はそれまで
大風呂敷を広げすぎていて、人的リソースから考える
と、開発期間が長期化せざるをえない状況に
ありました。
Angular2.0は、この発表時点で、設計段階か初期
プロトタイプ・フェーズにあったようなので、
この発表以降もリリース時期を守るためには予断を
許さなかった のではないかと思います。
AngularJS(1.x)のように、マニアックで場当たり的な
(そのようにみえる)設計にしてしまうと、もたらされる
恩恵に比べて 学習コストが非常に高くつくモノ、と
なってしまいます。
(以前書いた)上記の懸念もありましたが、2016/09/14、
Angular2.0がリリースされました。
2.0での開発の迷走が大きく影響しているのか、Angularは
2.0以降、革新的な機能の追加はないようにみえます。
2.0の仕様案？では予定されていた？vDOMの導入は、
早期リリース のために？見送られました。
Angularでは、結局、vDOM対応は行われず、代わりに、
バージョン9（2020/12リリース）から
Incremental DOMが導入されています。
Incremental DOM は 仮想DOM 同様、変更のみ
(DOMに)反映するための技術です。
Angular16(2023/05/03リリース)にて Solid.jsの
Signalにインスパイアされた機能 Angular Signals
も導入されています。