Edited at

Vue.js概要?

More than 1 year has passed since last update.


Vue.jsとは

原作者であるEvan You氏が中心となって開発中のクライアントサイド

Javascirpt(以降JS)フレームワークです。

https://jp.vuejs.org/

MVCの派生種である、GUIライブラリに適したMVVMを設計基盤として

採用し、構築されています。

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

MVVMを採用したフレームワークでは表示そのものであるView、

表示するデータ及びデータを操作する手続きをひとまとめにしたView Model

が舞台上の役者です、それらを管理するコントローラ(Controller)は

存在するものの黒子のような存在でユーザからは隠蔽されているため

コードを書く際に意識する必要はありません。

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

公式サイトでVue.jsの特徴はSimple、Fast、Compaosable、Compact、

Powerful、Module Friendlyという6つの言葉で表現されていました。

1)Simple

 HTMLを書き、JSONを掴み、View Modelを作る、Vue.jsを用いたコードを

 書く際に必要な作業はこれだけです。

2)Fast

 DOM操作をまとめ適切なタイミングで非同期更新することで高速な動作が

 実現されています。

3)Composable

 依存のない再利用可能なコンポーネントを作り、組み合わせることができます。

4)Compact

 ミニファイドかつ圧縮すると20kbとコンパクトになります。

5)Powerful

 HTMLに書く式とコンピューテッド・プロパティは依存するプロパティ(変数)が

 自動的にトラッキング(追跡)される等、ユーザにとって面倒な動作の動作の

 多くを肩代わりしてくれます。

6)Module Friendly

 Webpack etcの中から貴方好みのモジュール管理の仕組みを利用できます。


Vue.jsの概要

Vue.jsではView Model(VM)とViewの間でデータの連携を行います。

ViewとVMのひも付けをディレクティブ(Directive)で行い、

コンポーネント(Componennt)としてViewを構成するパーツを切り出す

ことで、Viewの再利用のための部品化を行えます。

VMとViewの間でやりとりするデータはフィルター(Fileter)を用いる

ことでVMに格納されているデータを変更することなく、表示用に

加工できます。


Class指向

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

 Vue.jsではClassベースのオブジェクト指向を採用しています。

 (ES6ではClass構文が導入されていますが、シンタックス・シュガーであり、

 JSのオブジェクト指向は根本的にはプロトタイプ・ベースのままです。)

 Vue.jsではClassをハッシュ(連想配列)の形で表現しています。 


View

 HTMLそのものです。基本的にはHTMLの要素にディレクティブを付加し、

 ディレクティブを通じてVMと連携させることでVMのデータをViewに

 反映させます。作成したor既存のコンポーネントを独自タグの形で利用する

 こともできます。


View Model(VM)

 VMはデータ(値)とメソッド(関数)で構成されます。

 

 VMのデータはディレクティブでViewと紐付けることで、Viewに反映させたり、

 Viewへの入力と連動させたりできます。

 VMのメソッドはディレクティブで要素のイベントと紐づけることで、Viewに

 対して操作が行われた際にひも付けられたVMのメソッドが実行されます。

 VMのメソッドはViewのイベント用のメソッドとVMのライフサイクル・イベント

 用のメソッドの2種類があります。


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コンポーネントを組合せて

 ページを構成することを前提にしています。

 コンポーネントの定義にはVue.componentを

 用います。

 Viewの要素とv-componentディレクティブを

 用いて対応づけることもできます。

 

 Vue.jsで作成したUIコンポーネントは基本、カプセル化され各々

 独立しているため、VMオブジェクトのプロパティやメソッドを通じて、

 UIコンポーネント間でのデータのやりとりを行います。


Web Components

 Vue.jsはWeb Componentsで実現できるModel Driven View (MDV)

 を先取りしています。

Vue.js の詳細についてはリンク↓で公式サイトや紹介している記事etcを

ご覧ください。

注) リンク↓は、近々更新予定です。


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

軽量AngularJS1.xとでも呼ぶべきフレームワーク(FW)と

なっています。

AngularJS1.xと表面上は似ていますが、設計思想は

似て非なるモノであり、構文は同じくMVVMを設計基盤

にするKnockoutJSに似ています。

後発だけあって、AngularJS1.xやKnockoutJSにある

Viewまわりの課題の多くをほぼ解消しています。

AngularJSはフルスタックのFWであり利用するならAngularJS

にどっぷり浸かるしかありませんが、Vue.jsはViewまわりに

特化しそれ以外の機能は自由に任意のライブラリを選択可能で

便利機能はプラグインとして提供のFWですので、既存の既に

利用してきたFW(Backbone.js etc)と組合せて利用する

ことも可能です。


ブラウザ・サポート  

 Vue.jsではモダン・ブラウザ(IE9以降)のみをサポートし、

 レガシー・ブラウザは非サポートとなっています。

 モダン・ブラウザのみをサポートすることで、モダン・ブラウザに

 搭載されたJSの新機能をフル活用すると共にブラウザ毎の差異の

 吸収を行うコードを最小限に止め実装をシンプルにすることに成功し

 高速な動作・シンプルでパワフルな構文を実現しています。

 W3CがHTML5策定を機に実装ありきの仕様策定の方針にシフトし

 仕様内にブラウザに求める挙動の記述がある程度含まれるように

 なった結果、モダン・ブラウザはレガシー・ブラウザに比べ、ブラウザ間の

 差異が少なくなってきています。

 レガシー・ブラウザをサポートすることは一見長所に見えますが、

 レガシー・ブラウザをサポートするということはレガシー・ブラウザを基準に

 レガシー・ブラウザで提供されている機能で実現できる範囲で設計すると

 いうことでもあります。

 既存のフレームワークの多くはレガシー・ブラウザをサポートしているために

 モダン・ブラウザにて導入されたJSまわりの新機能や改良の恩恵を充分に

 うけることができないという制約、モダン・ブラウザの新機能を利用すれば

 シンプルに実装できる機能をレガシー・ブラウザに搭載済みの機能のみで

 実現せざるをえない、レガシー・ブラウザを含むブラウザ間の(バージョン間)

 を含む差異をフレームワーク内で吸収せざるをえないせいで内部ロジックが

 複雑になるがゆえのパフォーマンス上の足枷等の短所を抱えています。

 (ブラウザの実装の違いをライブラリ?で吸収するPolyfillという実装手法

 もありますが、レガシー・ブラウザに既にある機能のみではモダン・ブラウザで

 ネイティブに実装された機能と同等の機能を実装すること、挙動をあわせる

 ことが難しいのが現実です、Polyfillは万能でも(無から有を生み出す)魔法

 でもありません。)


後発ゆえの優位性

 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

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はAngularJS1.xとは違い、既存のor新規作成した

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ではなくTypeScript)ベースと

なっています。


ブラウザー・サポート

AngularJSはレガシー・ブラウザをサポートしています。

AngularJSは2.0でレガシー・ブラウザを切り捨てていますが、高速な動作

が実現されているかは要検証です。AngularJS1.xはレガシー・ブラウザーに

特化した設計となっていて、モダン・ブラウザ向けのチューニングを

行う(モダン・ブラウザを用いて高速化できる処理を切出し、レガシー

ブラウザとモダン・ブラウザで処理を切換えられるようにする)ことが

難しい模様。


構文の違い


ディレクティブ (directive)

AngularJSとはディレクティブの定義が異なり、

Vue.jsのディレクティブは要素に付加できる独自属性

であり、この機能により、VMとViewの結びつけを行う

とともに、Vue.js組込みor独自定義したディレクティブ

を要素に付加することにより、要素を操作することが

できます。

AngularJS1.xではHTML仕様による要素の属性毎に対応した独自属性を

用意していますが、Vue.jsは要素の属性をVMのデータと対応

させるためのディレクティブv-bind(旧v-attr)のみが用意されています、

v-bindで要素の属性(複数可)とVMのデータとの対応を

記述するようになっています。

イベント操作も同様に、AngularJS1.xではHTML仕様のイベント毎に

対応した独自属性を用意していますが、Vue.jsは要素の

イベント(操作)をVMのふるまい(メソッド)と対応させるための

ディレクティブv-onのみが用意されています、v-onで

要素のイベント(複数可)とVMのメソッドとの対応を記述するよう

になっています。

独自のディレクティブ(カスタム・ディレクティブ)を定義し

利用することも可能です。


コンポーネント(component)

Vue.jsのComponentはAngularJSのディレクティブに相当する

機能です。


KnockoutJSとの違い

Vue.jsと同じく、MVVMを設計基盤とした先発のフレームワークに

KnockoutJSがあります。

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

のサポートです。

レガシー・ブラウザにあわせて設計されていることもあり、KnockoutJSの

記法や構文は若干シンプルではありません。

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

KnockoutJSはMS勤務の開発者により開発・メンテンスされ、

Visual Studioでも採用されているため、数多くの企業内業務

システムで採用されていると考えられます、企業内業務システム

では稼働しているシステムの動作環境の変更が許可されることは

ないため、レガシー・ブラウザが淘汰されるまでレガシー・

ブラウザのサポートが継続されることはほぼ確実であり、企業内

業務システムの開発エンジニアが保守的傾向が強く変化を好まない

こともあり、構文や記法が今以上にシンプルになることはないと

思われます。


設計の違い


ブラウザー・サポート

KnockoutJSはレガシー・ブラウザをサポートしています。


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 です。


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も万人向けといえるほどには熟れていない

と感じています。


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)

2016/11にPageKitのvue-resource実装は公式→非公式

になっています。

https://jp.vuejs.org/2016/11/03/retiring-vue-resource/

vue-resourceの代わりに

AxiosやGuide#Building Larger Appsで

紹介されている Super Agent を

使うのが良さそうです。

Axios

https://github.com/mzabriskie/axios

Super Agent

https://github.com/visionmedia/superagent

ForbesLindesay/ajax

https://github.com/ForbesLindesay/ajax

Vue.jsとAxiosなら驚くほど簡単に作れる!外部APIを使ったWebアプリの実例

https://www.webprofessional.jp/fetching-data-third-party-api-vue-axios/

jQuery.ajaxの代わりにSuperAgentを使う

http://qiita.com/hashrock/items/3113690bb3de5bba639b


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(O.o)対応が囁かれていましたが、

ECMA Script(ES)の策定において、進捗が芳しくないこともあり、

見送られました。現在はO.oの提案者であるGoogleが提案の

取り下げを行い、O.o自体がES仕様から消滅しています。)

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、

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

Railsは5.1からWebPackerを介してVue.jsを

公式サポートしています。

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

Loopbackフレームワーク入門

http://www.gologo13.com/2014/12/09/nodejs-loopback/


リンク


公式

vue.js

http://vuejs.org/

https://jp.vuejs.org/


Guide

http://vuejs.org/guide/

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

[v0.10.x1〜1.x]

はじめよう 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

以降ではそのままでは動作しなくなっています。

1.x→2.xも構文に変更が行われたので、同様です。

[v0.10.x〜1.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


実装まわり

[v0.10.x〜1.x]

データバインディング

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


簡易リファレンス

[v0.10.x〜1.x]

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との比較

[v0.10.x〜1.x]

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/

[v0.]

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との連携

[v2.x]

Laravel 5.4で Vue.js開発環境を手軽に作る

http://blog.asial.co.jp/1496

[v0.10.x〜1.x]

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


UIフレームワーク

25+ Best Vue.js Frameworks » CSS Author

https://cssauthor.com/vuejs-frameworks/


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の現在のロードマップでは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駆動にはならないと思います。

Vue.jsが個人プロジェクトであることを引き合いに出して、

その将来に不安があるかのように文章を書く方もいらっしゃるよう

ですが、Linuxが元々、個人プロジェクトであったことを知らないのか

と思います。Evan You氏に何かがあったとしても、開発を引き継ぐ

個人なり企業なりが現れると思っています。

企業が主導しているOSSは安心だと思っている方がいるようですが、

企業は営利目的なので、主導していたにしても経営判断により

手を引くケースは往々にしてあり、そして、手を引かれた

OSSは開発・メンテナンスする人材がおらず、衰退・消滅していきます。)

現時点では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との連携 更新

xxxx/xx/xx:ちょこちょこ更新

2017/08/05:諸々更新

2018/05/01:Vue.jsの概要 追加etc