日本語ドキュメント

満を持して本日リリースされました。めでたいですね。
Vue.js自体は、0.12の次に1.0のリリースが控えています。0.11から大幅にAPIが変更されましたので、これから安定化に向けて頑張っていくような気がします。

Vue.jsの弱点として「ViewModelが巨大化してしまい、大きな構造のアプリをどう作ればいいかわからない」点がしばしば挙げられます。宣伝だけするのも何なので、今回はVue.jsのサンプルとして最大規模の、vue-hackernewsのコードを読んでいきたいと思います。

その前に、HackerNews Cloneで多用されている「Vueify」の動きだけ、ざっと説明します。

コンポーネント化(Vueifyを使う)

Vueifyは、Vue.js用のコンポーネントのフォーマットの.vue形式をコンパイルするための、browserifyのプラグインです。詳しくは、Vue.jsでpopup componentを作ってみる | TEJI TECH BLOGを参照するといいでしょう。

ざっくりした構造は下記のように、template（HTMLの断片）とscript、styleをべったりつなげただけです。

vueファイルをrequireした上で、browserify + vueifyに通すと、下図のようにbundle.js内にべっとり埋め込まれます。

こうすることで、ViewModelを細かく部品に分けて管理することができます。最終的にはBroserifyで１ファイルにコンパイルしてしまう感じですね。

なお、Webpackでも同様のことが出来ます。vue-loaderを利用して下さい。

HackerNews Cloneの構造

DEMO

SOURCE

では、実際にHackerNews Cloneの構造を図示していきます。

ルーティング

まず、index.html内にapp.vueがロードされます。app.vue内には、.view領域があり、ニュース一覧画面、詳細画面、ユーザ情報画面があり、ルータによって切り替えられるようになっています。

ルータがやっていることは、{{view}}にビューの名称を代入しているだけです。{{view}}が変更されると、対応するビューに切り替わります。

ViewModelとModelの連携

※正確なM, VMの分類かどうかはちょっと自信ないです。間違っていたらご容赦を…

HackerNews Cloneのバックエンドは、firebaseを利用しています。雑に作るとなると「ViewModel内にfirebaseからデータをfetchする」ロジックを直書きも出来ますが、そうなるとViewModelがどんどん太ってしまいます。

HackerNews Cloneでは、store.jsというモデル内にfirebaseの操作を集約し、ViewModelから呼び出すようになっています。

ViewModelからModelを参照するには、requireを使っています。

store.js内でEmitterを作成し、メソッドを生やしたものをexportします。利用する側からはrequireします。

ViewModelからfetchするときは、Modelを呼び出すだけにします。

また、ModelをEventEmitterにすることで、Model側からViewModel側にイベント通知を行なうことが出来ます。

これで、リアルタイムにModelが更新されたとしても、ViewModelをイベントドリブンに更新することが出来ますね。

おわりに

ここまで、ソースコードを読んで構造を図示してみました。間違ったところがあれば、ぜひコメントをお願いします。

大規模開発において、どこまでVue.jsが通用するのか（向いているのか）という点については、あまり自信がない部分なので、Vueでこうしてるよ、あるいはReact + fluxの方がいいよ、などぜひコメントをいただければと思います。