Vue.js概要?

  • 623
    いいね
  • 0
    コメント

Vue.jsとは

MVVMというMVCの派生種を設計基盤として構築された
クライアントサイドJS(Javascript)フレームワーク
です。

軽量AngularJSとでも呼ぶべきフレームワーク(FW)と
なっています。

AngularJSと表面上は似ていますが、設計思想は似て非なる
モノであり、構文は同じくMVVMを設計基盤にする
KnockoutJSに似ています。

後発だけあって、AngularJSやKnockoutJSにある
Viewまわりの課題の多くをほぼ解消しています。

AngularJSはフルスタックのFWであり利用するならAngularJS
にどっぷり浸かるしかありませんが、Vue.jsはViewまわりに
特化しそれ以外の機能は自由に任意のライブラリを選択可能で
便利機能はプラグインとして提供予定のFWですので、既存の
既に利用してきたFW(Backbone.js etc)と組合せて利用する
ことも可能です。

Vue.js の詳細についてはリンク↓で紹介している記事を
ご覧ください。

AngularJS1.xとの違い

設計の違い

AngularJSはMVC(厳密にはMVW?)、対してVue.jsはMVVM、Viewと
Controllerの間にView Model(VM)を挟み、AngularJSのように
Controllerと画面(View)を対応させるのではなく、
VMと画面(厳密には画面のUIコンテナ(コンポーネント))を
対応させています。

Vue.js(というかMVVM)ではControllerは隠蔽されており、
隠蔽されたControllerとは別にControllerを作成して
使用するかは利用者の判断に委ねられています。

AngularJSはController駆動(ドリブン)、Vue.jsはModel駆動
といえると思います。

AngularJSは大規模アプリを想定しているため、中小規模アプリでは
高コストすぎる機能も本体に含んでいますが、Vue.jsは必要な機能
のみを組合せて利用することを前提としているのか、いらない機能は
本体に含まず、本体はViewまわりのみの最少構成を維持する方向と
なっています。

(上記はMVC・MVVMの解説ではありません、Vue.jsとAngularJSの
しくみの違いについて書いているのみです。MVC・MVVMについて
詳しく知りたければ、Wikipedia等をあたるのが正解です。)

MVVM

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

DI(Depecdency Injection)とバインディング

AngularJSではControllerとViewのバインディングを行っています
が、Vue.jsはView Model(VM)とViewでバインディングを行っています。

AngularJSではデータと振る舞いがControllerとModelに分離されて
いるため、画面のUIコンテナ(コンポーネント)のルート要素にController
を紐付けた上でController経由でModelを画面と紐付ける形になり
ますが、Vue.jsではVMにデータと振る舞いを一元化しているので、
画面のUIコンテナ(コンポーネント)にView Modelを紐付るだけで済みます。

ViewとVMのバインディングはVue.jsにより管理されるため、
View Modelを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

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

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とは違い、既存のor新規作成したUIコンポーネント
を組合せてページを構成することを前提にしています。

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

Class指向

AngularJS1.xはClassベースではありませんが、
Vue.jsはClassベースとなっています。

AngularJS1.xについてはAngular Classy を被せることにより
Classベースでの開発(現在はControllerまわりのみ)が
行えるようになります。

Angular Classy
http://davej.github.io/angular-classy/

AngularJSは2.0(リリース日未定)でClass(ES6)ベースとなっています。

ブラウザー・サポート

Vue.jsはAngularJSとは異なり、モダン・ブラウザ(IE9以降)のみを
サポートし、レガシー・ブラウザは非サポートとなっています。

Vue.jsはモダン・ブラウザに特化することで高速な動作を実現しています。
Vue.jsはモダン・ブラウザの採用しているES5の機能を前提として
設計されています。

(レガシー・ブラウザをサポートするということはレガシー・ブラウザで
提供されている機能で実現できる範囲で設計するということでも
あります、レガシー・ブラウザー基準の設計はモダン・ブラウザに
搭載されたJSの新機能の恩恵のほとんどを放棄する行為であり、
パフォーマンス上の足枷にもなります。)

AngularJSは2.0でレガシー・ブラウザを切り捨てますが、高速な動作
が実現されているかは不明です。AngularJS1.xはレガシー・ブラウザーに
特化した設計となっていて、モダン・ブラウザ向けのチューニングを
行う(モダン・ブラウザを用いて高速化できる処理を切出し、レガシー
ブラウザとモダン・ブラウザで処理を切換えられるようにする)ことが
難しい模様。

構文の違い

ディレクティブ (directive)

AngularJSとはディレクティブの定義が異なり、
Vue.jsのディレクティブは要素に付加できる独自属性
であり、この機能により、VMとViewの結びつけを行う
とともに、Vue.js組込みor独自定義したディレクティブ
を要素に付加することにより、要素を操作することが
できます。

AngularJS1.xではHTML仕様による要素の属性毎に対応した独自属性を
用意していますが、Vue.jsは要素の属性をVMのデータと対応
させるためのディレクティブv-attrのみが用意されています、
v-attrの値として要素の属性(複数可)とVMのデータとの対応を
記述するようになっています。

イベント操作も同様に、AngularJS1.xではHTML仕様のイベント毎に
対応した独自属性を用意していますが、Vue.jsは要素の
イベント(操作)をVMのふるまい(メソッド)と対応させるための
ディレクティブv-onのみが用意されています、v-onの値として
要素のイベント(複数可)とVMのメソッドとの対応を記述するよう
になっています。

Vue.jsのディレクティブで用いられるhtmlに要素に追加する
独自属性のプリフィックスv-についてはVue.configに設定
することでdata等html5標準のプリフィックスdata-(v-)等
に変更することが可能となっています。

独自のディレクティブ(カスタム・ディレクティブ)を定義し
利用することも可能です。

独自のディレクティブを定義して利用する場合には
Vue.directiveを用います、View上の一つの要素に
対するDOM操作のみを行えます。

コンポーネント(component)

AngularJSのディレクティブに相当する機能、
UIコンポーネントの再利用に用い、独自タグを
作成できます。

Viewの要素とv-componentディレクティブを
用いて対応づけることもできます。

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

KnockoutJSとの違い

Vue.jsと同じく、MVVMを設計基盤とした先発のフレームワークに
KnockoutJSがあります。

Vue.jsに対するKnockoutJSの唯一のアドバンテージはレガシー・ブラウザ
のサポートです。

レガシー・ブラウザにあわせて設計されていることもあり、KnockoutJSの
記法や構文は若干シンプルではありません。

後発のVue.jsのほうが記法や構文を含め、洗練されています。

KnockoutJSはMS勤務の開発者により開発・メンテンスされ、
Visual Studioでも採用されているため、数多くの企業内業務
システムで採用されていると考えられます、企業内業務システム
では稼働しているシステムの動作環境の変更が許可されることは
ないため、レガシー・ブラウザが淘汰されるまでレガシー・
ブラウザのサポートが継続されることはほぼ確実であり、企業内
業務システムの開発エンジニアが保守的傾向が強く変化を好まない
こともあり、構文や記法が今以上にシンプルになることはないと
思われます。

設計の違い

ブラウザー・サポート

KnockoutJSはとは違い、Vue.jsはレガシー・ブラウザをサポートしていません。

レガシー・ブラウザをサポートすることは一見長所に見えますが、
レガシー・ブラウザをサポートしているためにモダン・ブラウザにて
導入されたJSまわりの新機能の恩恵を充分にうけることができない
という制約、モダン・ブラウザの新機能を利用すればシンプルに実装
できる機能をレガシー・ブラウザに搭載済みの機能のみで実現せざるを
えないせいで内部ロジックが複雑になるがゆえのパフォーマンス上の足枷
等の短所を抱えることでもあります。

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

Class指向

KnockoutJSはClass指向にふれていますが、オーソドックスなスタイルの
名残が所々にあります。例えば、クラスの設計において何をプロパティとして
扱い何をメソッド(メンバー関数)の引数として扱うかが整理されていないよう
にみえます。

Vue.jsはClass指向で設計されているため、クラスの設計はKnockoutJSより
洗練されています。

記法の違い

Vue.jsはモダン・ブラウザのみをターゲットにすることにより、
KnockoutJSよりも記法をシンプルにすることに成功しています。

VMとバインディング

KnockoutJSではプロパティ(変数)は追加時or後、バインディングできる
プロパティであることを用意された関数を呼び出す形で明示する(より正確
にはES5で導入された機能を利用できないためにプロパティにセットする
オブジェクトに対して(値の変更のトラッキング機能と)セッター・ゲッター
を付加する専用の関数を呼び出す)必要があります、Vue.jsではプロパティ
はVMに追加するだけでバインディング可能になります。

KnockoutJSではバインディング可能なプロパティに対するアクセサが
専用の関数を呼び出すことにより自動生成されます、モダン・ブラウザの
サポートするES5以降の機能を利用できないためにアクセサは関数と
なっています。

Vue.jsでもプロパティに対する(トラッキング機能と)アクセサは
自動生成されます、ES5の機能を利用して自動生成されたアクセサ
はプロパティへのダイレクト・アクセスのように扱えます。

KnockoutJSでもKnockout-ES5プラグインを導入すれば、プロパティを
追加するだけでバインディング可能、かつ、アクセサをプロパティへの
ダイレクト・アクセスにできますが、Knockout-ES5プラグインはモダン
・ブラウザ用であり、レガシー・ブラウザを切り捨てられない場合は
利用できません。
(Knockout-ES5プラグインはプロパティまわりをES5の機能を用いて
置き換えるだけで、内部構造にはタッチしませんので、導入しても
モダン・ブラウザに導入されたJS(ES5)の他の新機能の恩恵を受けられる
わけではありません。)

Knockout-ES5: a plugin to simplify your syntax
http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-plugin-to-simplify-your-syntax/

バインディング

KnockoutJSのバインディングに相当する機能をVue.jsでは
ディレクティブとよびます。

KnockoutJSではViewに記述するバインディングの記法も
Vue.jsのディレクティブほどシンプルではなく、種類別の
整理も行なわれていません。

Vue.jsのディレクティブでは種類毎に独自属性が用意され、
KnockoutJSよりも見通しがよくなっています。

KnockoutJSのカスタム・バインディングに相当する機能は
Vue.jsではカスタム・ディレクティブです。

Vue.jsのカスタム・ディレクティブはKnockoutJSの
カスタム・バインディングと機能的には同等ですが、
作成が楽になっています。

テンプレート

KnockoutJSではtemplateバインディングを用いて、
指定した要素の中身をテンプレートで差し替えることが
できますが、AngularJSのディレクティブに相当する
機能は用意されていません。

Vue.jsには、AngularJSのディレクティブに相当する、
独自タグを定義できる機能、コンポーネント(component)
があります。

学習コスト

KnockoutJSは学習コストがAngularJS1.xよりかなり少ないですが、
Vue.jsはより少ないです。

学習コストはAngular >> Knockout > Vue.js です。

今はVue.jsの日本語情報がまだ少ないため、Vue.js > Knockout.js
に一時的にみえています。

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

Virtual DOM(VDOM)とは?

直訳すると仮想DOMとなりますが、DOMとは実はあまり関係がありません。
なので、勘違いしてしまいそうな名前ですが、DOMを置き換えるものでは
ありません。端的に表現すると、HTMLのサーバーサイド・レンダリングを
クライアントサイドにもってきて、HTMLの再構築前後の差分のみ抽出し
DOMを用いて適用するようにした仕組み、となります。

DOMの更新タイミング

VDOMベース・フレームワークでは任意のタイミングで用意された差分
抽出・適用の関数を呼び出してDOMの差分適用を行うことができますが
、Vue.jsではDOMの更新はフレームワークにより管理され自動でバッチ
更新されるようになっています、手動で行うことはできません。
VDOMベース・フレームワークでは差分のみのDOMへの適用により
ブラウザでのUIレンダリングが走る頻度を少なくしているのに対し、
Vue.js1.xまではDOM処理のまとめてバッチ適用によりブラウザでの
UIレンダリングの走る頻度を少なくしています。

VDOMベース・フレームワークが有効なケースとは?

VDOMベース・フレームワークは今のところ、一般的なケース全てで
有用なフレームワークではありません。HTMLがリアルタイムで変化し、
UIレンダリングの発生頻度が問題になるアプリ、主にリアルタイムで
画面が変化するゲームアプリで、威力を発揮する気がします。

VDOMベース・フレームワークの課題?

VDOMではHTMLの構築をDOMとはわけて行うので、差分を取るアルゴリズム
が優秀でないとダメな気がします、差分管理の多くを手動で行う必要が
ある?現状では万人向けとはいえないと思います。
React.jsもReactive.jsも万人向けといえるほどには熟れていない
と感じています。

VDOMベース・フレームワークのこれから

Vue.jsについては以前「VDOMに対する対応を行う予定はない」と
作者であるEvan You氏がIssueにて明言し、
「VDOM対応すると、別物になってしまう」とのことでしたので、
DOMと同じレベルのレイヤーでDOMとの互換性の高いVDOM
ライブラリが出てくれば対応が行われるかもしれません、と書いていました。
軽量な低レベルVDOM実装snabbdom
がリリースされたことで状況が変化し、
snabbdomの採用により、内部的には
VDOMを採用しながらも、利用者はVDOMを意識しなくても使用できる形で実装されたVue.js2.0の開発が進められ、まもなくリリースされます。

KnockoutJSではVDOM対応が検討されているらしいです。
(VDOMについては現状の高レベル・レイヤでの実装ではなく、
より低レベル・レイヤでの実装が出てきて、フレームワークで
共通に利用されるようにでもならない限り一般化してはいかない
ような気がします。)

構造

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

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

プラグインについては現在開発中です。

モバイル・ブラウザでのタッチイベントまわりのプラグイン
vue-touch は初期?実装がリリース済みです。

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

プラグイン

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

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

Router

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

vue-routerの他に
ロードマップ↓で紹介されたことのあるrouter or directorか
ロードマップ↓のコメントで紹介されているDispatch.jsか
Router.js、Warden.js を使うのも良さそうです。

router
https://github.com/ianstormtaylor/router
director
https://github.com/flatiron/director
Dispatch.js
https://github.com/olav/dispatch.js
Router.js
http://www.ramielcreations.com/projects/router-js/

Warden.js
https://github.com/mizchi/warden
via Vue.jsの足りない機能を補うために死活管理付きのルーター作った
http://mizchi.hatenablog.com/entry/2014/05/03/181642

vueui-router
https://github.com/vueui/router

Resource

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

PageKitというCMS向けに開発されていた
vue-resource実装が採用されました。
(https://github.com/yyx990803/vue/issues/859)

vue-resourceの代わりに
Guide#Building Larger Appsで
紹介されている Super Agent を
使うのも良さそうです。

Super Agent
https://github.com/visionmedia/superagent
ForbesLindesay/ajax
https://github.com/ForbesLindesay/ajax

jQuery.ajaxの代わりにSuperAgentを使う
http://qiita.com/hashrock/items/3113690bb3de5bba639b

vueui-resource
https://github.com/vueui/resource

Validation

公式
https://github.com/vuejs/vue-validator
(kazupon/vue-validatorを取り込んで
公式リリースされました。)

validate.js
http://rickharrison.github.io/validate.js/
validator.js
https://github.com/guillaumepotier/validator.js

Firebase + Validation Example
http://vuejs.org/examples/firebase.html

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

現在

バックエンドにVirtual DOMを採用したv2.0
がRCフェーズを経て、リリースされています。

(v1.0でObject.observe対応が囁かれていましたが、ECMA Scriptの
策定において、進捗が芳しくないこともあり、見送られました。
現在はO.oの提案者であるGoogleが提案の取り下げを行い、O.o自体が
仕様から消滅しています。)

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/)

v0.11以前はレガシーとなっています。
http://legacy.vuejs.org/

v2.0では、バックエンドへのVDOMの採用に
より、構文の変更・拡張が行われています。
https://github.com/vuejs/vue/issues/2873

今後

WebComponents(仕様)対応(仕様との同調?)が
予定されています。

ロードマップ

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

RubyならRails、Node.jsならLoopbackが良さそうです。

Loopbackフレームワーク入門
http://www.gologo13.com/2014/12/09/nodejs-loopback/

リンク

公式

vue.js
http://vuejs.org/

Guide

http://vuejs.org/guide/

はじめよう Vue.js
http://qiita.com/kitfactory/items/9c9b9312ace03e731b33

お手軽データバインディングライブラリ「Vue.js」を使いこなそう
(基礎編)
http://codezine.jp/article/detail/8363

JS 奥の細道 体で覚えるVue.js
http://qiita.com/setzz/items/ad9a9c99a4fda041a563#%E4%BD%93%E3%81%A7%E8%A6%9A%E3%81%88%E3%82%8Bvuejs

Vue.js資料まとめ
https://gist.github.com/hashrock/f575928d0e109ace9ad0

Api

http://vuejs.org/api/

パフォーマンス比較

http://vuejs.org/perf/

紹介

※注意
v0.11.0で構文に変更が行われたため、下記のリンクの
中のv0.10.x用のサンプルの多くはv0.11.x
以降ではそのままでは動作しなくなって
います。

いかにして我々はフロントエンドに秩序をもたらそうとしてきたか
http://glide.so/mizchi/9635965
https://gist.github.com/mizchi/9635965
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた
http://mizchi.hatenablog.com/entry/2014/02/13/153742
AngularJSそっちのけで、Vue.jsについて所感
http://havelog.ayumusato.com/develop/javascript/e587-vuejs_impressions.html
軽量MVVMフレームワークのVue.jsを試してみた
http://safx-dev.blogspot.com/2014/02/mvvmvuejs.html
噂のVue.jsをさわってみた
http://lealog.hateblo.jp/entry/2014/02/19/221447
WebでもBindingしたい!Vue.jsを使ってMVVMしてみる。
気分でMVVMライブラリ(?)のvue.jsを試してみた。
http://arata.hatenadiary.com/entry/2014/04/24/232935
http://c-mitsuba.hatenablog.com/entry/2014/03/16/190323
AngularJSよりもお手軽!Vue.jsで超簡単データバインディング
http://qiita.com/tekkoc/items/f81a3fca0641a398fa35
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由
http://www.infiniteloop.co.jp/blog/2014/06/5min_vuejs/
Vue.jsの基礎まとめ
http://qiita.com/kyota/items/0b41952c8abcd37e0aef
Vue.js(紹介) - SpeakerDeck
https://speakerdeck.com/kazupon/vue-dot-js

実装まわり

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

簡易リファレンス

Vue.js note(v0.10.3)
https://gist.github.com/asip/342d458986b44240f742
vue.js book
http://koba04.github.io/vuejs-book/
Vue.js v0.10.4の変更点まとめ
http://qiita.com/koba04/items/275b50e78a270cc86ea7
Vue.js v0.10.5の変更点まとめ
http://qiita.com/koba04/items/e2555d2967964bc4760e
Vue.js v0.11の変更点(予定)まとめ
http://blog.koba04.com/post/2014/10/07/vue-js-v011-changes/

他のFWとの比較

Vue.js vs Knockout.js
http://togetter.com/li/638454
データバインディングについてVue.jsと Backbone.stickitを比較する
http://mizchi.hatenablog.com/entry/2014/02/18/163721
Backbone.jsを使っている人間がVue.jsを触ってみました。
http://catcher-in-the-tech.net/801/
AngularJSからVue.jsに移行するガイド
http://qiita.com/hashrock/items/e31b36248f3011ff7853
Angular.JS について
http://ssig33.com/text/Angular.JS%20%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

エグザンプル

vue.js/Examples
http://vuejs.org/examples/
Vue.jsでチェックされたら or 入力されたら送信可能にするボタンを実装する方法
http://tech.ewdev.info/tag/vue-js/
vue.jsでタグ・エディターを作ってみた
http://qiita.com/hnakamur/items/a73ff28621e06193a228
Vue.js • TodoMVC
http://todomvc.com/labs/architecture-examples/vue/
nuwk!とvue.jsでらくらくデスクトップtodoアプリ
http://qiita.com/airtoxin/items/c028bd913ded1d04ad1e
vue.jsで簡単な計算機を作る
http://qiita.com/thrakt/items/784027621a961b209b6d
Vue.js向けのi18nなplugin作ってみた
http://blog.kazupon.jp/post/84838488618/vue-js-i18n-plugin

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

RailsとJS(vue.js)の連携
http://blog.uu59.org/2014-07-01-rails-vue-js.html
既存のRailsアプリケーションにVue.jsを採用した話
http://blog.spicelife.jp/entry/2015/04/30/152006

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

Vue.jsでView ModelにjQueryプラグインを統合する
http://qiita.com/asip2k25/items/920567d957ea1aacc2d3

AltJS連携

VueTS (TypeScript) via https://github.com/yyx990803/vue/issues/208
https://github.com/diverted247/vuets

環境まわり

ChromeAppとかExtensionsでVue.jsを使うために
http://qiita.com/koki_cheese/items/f568f15556fadc939ef3

採用サイト

CasperBox via https://twitter.com/casperboxapp/status/493898834188460033
http://casperbox.com/
LINEスケジュール
https://schedule.line.me/ via
http://codezine.jp/article/detail/8363

イベント・勉強会

Vue.js Meetup
http://connpass.com/event/10862/

Vue.jsを推す理由

AngularJS1.xの設計の古さ

AngularJS1.xはクライアントサイドにサーバーサイドの設計を
そのまま持ってきている感があります。

データをグローバルな変数で扱うスコープ($scope)がその証左
の一つだと考えています。

AngularJSのCotroller駆動よりVue.jsのModel駆動のほうが
クライアントサイド(UIアプリ)では理に適っています。

AngularJS1.xは中・大規模開発には適さないと
思っています、大規模開発を指向してはいるものの中・大規模
開発に向いていないのです。

AngularJS1.xは2009年に発表され、発表時の設計で2012年に
1.0.0がリリースされたFWです、2009年当時とは2012年にあった
WebComponents仕様のW3Cでの策定開始でもわかるようにWEB開発
の世界的な潮流が変化しています、AngularJS1.xの設計は既に
現在のニーズとは乖離しているのです。

AngularJSがRailsに例えられることへの疑問

AngularJSはRailsによく例えられますが自分はそうは
思いません。

似ているのは、フルスタック・フレームワークである点、
そのぶん勉強が大変な点だけです。

Railsは初期学習コストはそれなりに大きいですが、それを乗り越え
レールにのってしまえば、劇的?に開発時間を短縮できます。

対して、AngularJSはそうではありません、初期学習コストを
乗り越えてもレールが敷かれていないため、劇的な開発時間の
短縮は望めないのです。

Railsは2.0まではAngularJSと同様に1から10まで開発チームが
面倒をみ、構成する各種モジュールと密接に結びついていました
が、3.0でのDHHの英断による軽量Railsと目されていたMerbとの
統合もありフルスタックであることは変わらないもののプラガブル
となり、外部で開発されているモジュールとの柔軟な組合せ、構成
するおジュールの取捨選択が可能となっています、3.0以降、外部
で開発されたライブラリが次々とRailsに採用されてもいます。

対して、AngularJS1.xは完全に一枚岩です、他のフレームワークや
ライブラリと柔軟に踏み合わせて、利用することは想定されていません。

Vue.jsはフル・スタックではありませんが、FWとしてのスコープを絞り、
Viewまわりにのみ特化し、Viewまわり以外については
目的に応じた専用のライブラリと組合せて使うことを前提に
していて、組み合わせるライブラリを柔軟に取捨選択できます。

AngularJSのGoogleブランドかつコミュニティ駆動という虚像

「神様、仏様、Google様」なGoogle信者がセンスの良さよりもブランドで
持ち上げている気がしてならないです。

AngularJSはデバッグ以外1から10まで開発チームというか
少数のGoogleエンジニアが面倒をみ、構成するモジュールも
基本的に少数のGoogleエンジニアが設計・開発を行っている、
Google製フレームワークといっても差し支えないモノと
なっています。

つまり、AngularJSはコミュニティ駆動ではなく
Google駆動なんです。

個人的にはAngularJSは現在Google内でGWT(Java→JS)の
後継的位置づけなのではではないか?と思っています、
と書きましたが、Google IO 2014の基調講演から考えると、
それは以前の話で今はGoogle内ではPolymerがGWTの後継的
位置づけのようです。

AngularJS2.0の設計資料も1.xの課題と2.0に向けた設計指針が
示されているだけで、開発コミュニティを交えてオープンに
仕様を議論しようとしている雰囲気は感じられません。

2.0でもGoogle駆動は変わらないでしょう。

AngularJSの今後について1つの懸念があります。

GoogleはAngularJSの自社内での位置づけを下方修正している
ようにみえることです。

AngularJSはGoogleにとって戦略的に重要なプロダクトでは
なくなっているようにみえます。

GoogleがAngularJSの開発に今まで以上に開発リソースを
割くことは最早ないと思われます。

AngularJSはGoogle駆動であり続けているようには
みえます。

Google IO 2014の基調講演でのWeb Components仕様プッシュ
を考慮すると、AngularJSが2.xでWebComponents仕様との
高い親和性を実現できなければ、GoogleはAngularJSをステる
かもしれません。

(Googlerが開発しているからGoogle駆動なのではありません。
Googleにより(戦略的意図のもと?)後援されOSSコミュニティ
から切り離して開発され製品がβテスト・フェーズになるまで
公開されないからGoogle駆動なのです。

Google駆動のOSSプロダクトは基本的にβテスト・フェーズに
入るまで公開されません、このフェーズでは設計は既に固まって
おり、OSSコミュニティが設計にタッチすることはまずできません。
GoogleにとってOSSコミュニティはテスター・デバッガーにすぎない
のではないかと思っています。(GoogleはOSSに対して非常に理解が
あるように思われていますが、プロダクトをOSSとして公開している
他の企業と何ら変わりはありません。。。))

AngularJS2.0の開発長期化の懸念

設計資料から察するに、AngularJSは2.0でかなり手が入り1.xとは
だいぶ変わるでしょう、既に大きなフルスタックフレームワーク
であり、今後2.0の開発がどうなるかは未知数、革新でではなく
下位互換に重点を置きすぎると開発が停滞する可能性も。。。

AngularJS2.0はES6+ES7の一部+αという、まだフル実装の存在
していないJS仕様をターゲットに開発が行なわれているため、
AngularJSの開発者にとっては挑戦として面白いのかもしれません
が、リリースまでには長い時間が必要となります。

ES6の実行環境の実装によっては、ある程度、実装が進んだ段階で
大きな手戻りが必要になるかもしれません。

ES6→ES5のTraceur Compilerはあるものの、ES6の実行環境が
存在しないこともあり、実用レベルには達しておらず、ES6を
フル?実装した主要ブラウザが出揃うまで正式版がリリース
されない可能性を高めています。

ES6、仕様の発行がレビュー及び実装からのフィードバックを反映する
ために来年6月に延期となっています、仕様自体はfreezeされています。
(Object.oberve等ES6では入らずES7以降へ持ち越しとなっていた機能
のいくつかが前倒しになる可能性は限りなく低いですがありはします。)

ECMAScript 6 実装状況
http://kangax.github.io/es5-compat-table/es6/
traceur-compiler 入門
http://yosuke-furukawa.hatenablog.com/entry/2014/07/31/093041

フルスタックでありながら、ほんの数人のエンジニア
だけで開発されていることも開発の長期化を
予感させます。

2.0ではWeb Comopnents仕様対応かつ自律したUI
コンポーネントが作成できることがGoogleブランドで
あるためには外せないであろうことも、開発期間の
長期化を予感させます。

リリース時期未定となっていることからも1.Xとは大幅に
変わるのはほぼ確実ではありますが、AngularJS2.0を
1.xとそれほど大きく変えず、早期リリースの実現を目指す
ことも考えられます、その場合、AngularJS2.0は淘汰され
消えていくでしょう、変化を許容できないFWは生き残れません。

Angular2.0の開発において大幅?な変更が入ったので。追記します。

当初、Traceur CompilerベースでのES6→ES5変換を利用して
ES6ベースでの開発が予定されていましたが、Traceurが期待するほど
の変換能力を実現できていないことから、AtScriptという名前で
ES5ベースにES6の一部機能をツッコんだAltJSを開発する方向に
方針が変更されていましたが、独自に開発していては開発に時間が
掛かる上に枯れて問題なく利用できるレベルに達するのにも時間を
要するためか、AtScriptの開発をM$主体で開発が進められている
TypeScriptに合流することが決定されました。

AngularJS2.0開発における一番?の懸念材料であったES5・ES6
両対応のための足回りの問題がこれで解消されることになるはずです。

この開発方針の変更に合わせ、AngularJS2.0のリリース時期も
来年(2015年時点)と発表されています。

GoogleのAngular2はマイクロソフトのTypeScriptで開発されると発表
http://www.publickey1.jp/blog/15/googleangular_2typescripttypescript_15ecmascript_6.html

他の懸念材料は残っていますが、GoogleがAngularに投入している
人的リソースから考えると、妥当な判断だったのではないかと
思います。Angular2.0は今まで大風呂敷を広げすぎていて
人的リソースから考えると開発期間が長期化せざるをえない
状況にありました。

Angular2.0は未だ設計段階か初期プロトタイプ・フェーズに
あるようなので、今後も予断を許さないのではないかと
思います。

Angular1.xのように、マニアックで場当たり的な(そうみえる)
設計にしてしまうと、モタラされる恩恵に比して学習コストが
非常に高くつくモノとなってしまいます。

以前書いた上記の懸念もありましたが、先日、
AngularJS2.0がリリースされました。

2.0の仕様案?では予定されていた?VDOM対応
は早期リリースのために見送られました 。

AngularJSの学習コストの費用対効果

学習コストが高いこともAngularJSのネックの1つです。

AngularJSは囲い込み型のFWなので、学習コストを掛けても
AngularJSを離れるとAngularJSの勉強で得た知識はほとんど
役に立ちません。

Angular1.xとは別物であり、1.xの知識やノウハウが
ほとんど役に立たない2.0がリリースされ、移行コスト
が高くつくことはまず、間違いないです。

既にAngularJS1.xで仕事してるor仕事することが決まっている
のでもなければ、今からAngular1.xを勉強するのは時間のムダです。

これから仕事に活かすために勉強するのなら、Angular1.xを勉強
するのではなく、2.xを勉強するか、別のこと
を勉強しておいたほうがずっと有意義のはず。

AngularJS1.xは高い学習コストを掛けることに見合うほどに
魅力的では最早なくなっています。

(世の中には「学習コストが高いモノを態々選んで勉強する
(複雑な××を理解できている俺・私って偉いと思っている?)
方もいらっしゃるようですが、必要もないのに学習コストが
高いモノを選ぶのは時間のムダです。)

そこでVue.js

そこで、ライブラリとしてのデザインが好みであり、
AngularJSライクでAngularJSより開発者がコミュニティ・
フレンドリーに感じるVue.jsを応援しています。

Vue.jsの開発者であるEvan You氏は元Googlerではありますが、
Vue.jsの開発は氏の個人プロジェクトです。

(公式サイトのどこにも"Powered by Google"の文字はありません。
Polymerにもありませんが、こちらはGoogle I/Oで発表された
とおりGoogleの戦略的プロジェクトでGoogle駆動です。

最近のGoogleは秘密主義なので、Google駆動ならGoogle I/O等で
(大々的?に)発表されるまで外部に漏れることはまずありません。

AngularJS及びPolymerと機能や用途が被っているので、
Evan You氏がGoogleを去った(出戻りはありえる)こともあり、
Vue.jsはGoogle駆動にはならないと思います。)

現時点ではAngularJSのほうが先行かつフルスタックで
あるぶん人気がありますが、AngularJSは内でとじているぶん、
2.0の開発に時間が掛かりました。

AngularJS2.0はまだ安定しているとは
いえず、学習コストも高いため、AngularJSと
比べて欠けていた機能をプラグインで補い進化
してきたVue.jsが人気でしのぐことも
ありうると感じています。

最後に

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

更新履歴

2014/04/25:初版 公開
2014/04/26:Web Components セクション 追加
2014/04/29:Resource セクション、リンク#Guide 追加
2014/04/30:AngularJSとの設計の違い#Class指向 追加
2014/05/02:リンク#簡易リファレンス ページ追加
2014/05/04:Router セクション 編集
2124/05/12:Vue.jsを推す理由 加筆
2014/05/15:リンク#他のFWとの比較 追加
2014/05/15;AngularJSとの設計の違い#ブラウザー・サポート 追加
2014/05/17;AngularJSとの記法の違い セクション 追加
2014/05/24;AngularJSとの設計の違い#DIとバインディング 加筆
2014/05/24:DI 追加
2014/05/29;リンク#パフォーマンス比較 追加
2014/06/29:Vue.jsを推す理由 編集
2014/06/30:Resourceセクション編集
2014/06/30:Validatorセクション編集
2014/07/05;リンク#実装まわり 編集
2014/07/08:リンク#サーバーサイドFWとの連携 追加
2014/07/09:AngularJSとの記法の違い#ディレクティブ、コンポーネント 加筆
2014/07/11:リンク#他のJSライブラリとの連携 追加
2014/07/11:リンク#Vue.jsを推す理由 修正
2014/07/16:KnockoutJSとの違い 追加
2014/07/29:リンク#採用サイト 追加
2015/01/15:リンク#採用サイト 追記
2015/01/31:リンク#イベント・勉強会 追加
2115/02/12:プラグイン#Validation 更新
2015/02/26:リンク#Guide 更新
2015/02/28:リンク#Guide 更新
2015/03/02:Resourceセクション編集
2015/04/30:リンク#サーバーサイドFWとの連携 更新