Vue.jsで手軽じゃないアプリケーション構築

# **概要**

Vue.jsは、MVVMというMVCの派生種を設計基盤として構築されたクライアントサイドJSフレームワークです。AngularJSと表面上は似ていますが、設計思想は全く異なるもので、作成したUIコンポーネントを組合せてページを構成することを前提にしています。

「Vue.jsで遊んでみた」のような記事はよく見るのですが、**実際にプロジェクトとして走らせる場合に、アプリケーション構成からテストまで、どのようにするのがベストなのか**を、まとめました。

SPAをベースに、サーバーサイド言語上で動かすときの構成も調べています。

## ブラウザサポート
* <a href="https://github.com/yyx990803/vue#browser-support" target="_blank">yyx990803/vue</a> - Vue.jsはレガシー・ブラウザをサポートしていません。

## 参考記事
* <a href="http://vuejs.org/guide/" target="_blank">Getting Started - vue.js</a>
* <a href="http://qiita.com/asip2k25/items/bd4bdccd5201d542953c" target="_blank">Vue.js概要？ - Qiita</a> - はてぶ200

# **大きめのアプリケーション構成について**

## **ガイドライン**

より大きなアプリケーション構成をつくるためのガイドラインが、<a href="http://vuejs.org/guide/application.html" target="_blank">Building Larger Apps - vue.js</a>としてドキュメントに記してあり、内容を以下に簡潔にまとめます。基本的には、このガイドラインに従ってアプリケーションを作成してゆくのがよいと考えています。

### モジュール化

AngularJsのようにもとからモジュール化の仕組みはないので、<a href="http://browserify.org/" target="_blank">Browserify</a>か<a href="http://webpack.github.io/" target="_blank">Webpack</a>をつかいます。

### 1ファイルコンポーネント

<a href="https://github.com/vuejs/vueify" target="_blank">Vueify</a>等をつかい、コンポーネントは1ファイルにします。

ここがAngularJsとは性質を全く別にするところで、Vue.jsは、基本的にコンポーネントを組み合わせてスクリプトをつくってゆきます。

### ルーティング

マニュアルでもできますが、<a href="http://visionmedia.github.io/page.js/" target="_blank">Page.js</a>や<a href="https://github.com/flatiron/director" target="_blank">Director</a>などのライブラリを使ったほうがより簡単に実装できます。

### サーバーとの通信

Vue instanceが自動的にjson型にシリアライズされた$dataオブジェクトをもっています。場合によっては<a href="https://github.com/visionmedia/superagent" target="_blank">Superagent</a>などを使ってもよいでしょう。

### ユニットテスト

CommonJS pre-processorを用いてKarmaを使うのを推奨。

### 実例

* <a href="https://github.com/yyx990803/vue-hackernews" target="_blank">yyx990803/vue-hackernews</a>

ハッカーニュースのクローンをSPAで。Browserify + Vueifyをコードのモジュール化に使い、Director.jsをルーティングに、<a href="https://www.firebase.com/" target="_blank">Firebase API</a>をバックエンドに使ったもの。

## **Railsにて動かす際の決め事**

### asset/javascriptには書かず別ファイルをつくり、全JSファイルをバンドルしたコードを読み込む。

* <a href="https://speakerdeck.com/kazupon/vuejs-meetup" target="_blank">Railsで作られたサービスにVue.jsを導入したというお話 // vuejs-meetup // Speaker Deck</a> - はてぶ53


# **良質な資料**
* <a href="https://gist.github.com/hashrock/f575928d0e109ace9ad0" target="_blank">Vue.js資料まとめ</a> - はてぶ140
* <a href="https://gist.github.com/koba04/9776792" target="_blank">Vue.js note(v0.10.3)</a> - はてぶ93
* <a href="http://qiita.com/setzz/items/8f06f2fe6049173b17f9" target="_blank">体で覚えるVue.js - グローバルメソッド編 〜 JSおくのほそ道 #025 - Qiita</a> - （シリーズで）はてぶ60程
* <a href="http://qiita.com/icoxfog417/items/49f7301be502bc2ad897" target="_blank">Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita</a> - はてぶ126
* <a href="http://qiita.com/hkusu/items/8af744662999de618bb8" target="_blank">JavaScript - シンプルな MVVM ライブラリ『Vue.js』の環境構築と使ってみた感想 - Qiita</a> - はてぶ8
* <a href="http://qiita.com/hkusu/items/64cfd8bf4b4c8391e454" target="_blank">[Rails4] Vue.js の導入手順 ＆ DBデータを表示する方法 - Qiita</a> - はてぶ13
* <a href="http://qiita.com/tejitak/items/54eccf0d6067d40acccd" target="_blank">browserify + debowerify + vueifyを使ったvue.js component開発 - Qiita</a> - はてぶ34
* <a href="http://qiita.com/technicalrockstarsinc/items/2368d9948cee8306ecf6" target="_blank">vue.jsとmilkcocoaを使ってアカウント機能付きメモアプリを作ってみた - Qiita</a> - はてぶ5

※はてぶ数と記事の質は相関なし。

# **疑問点**

よく調べきれていない点、ご教授願いたい点です。

* 仮にRailsプロジェクトの場合、管理はgemでやるのがよいのか？フロントエンドのコードだけでも、bower、もしくはnpmでやるのがよいか？
* GruntやGulpは入れたほうがよいのか？
* <a href="http://vuejs.org/guide/application.html#Unit_Testing" target="_blank">Karmaを実装するまでの具体的な手順</a>は？
* Vueifyは、<a href="http://vuejs.org/guide/application.html#Single_File_Components" target="_blank">component内のDOM</a>を、どのようにコンパイルするのか？


# 追記

疑問の答えをこちらにまとめました=><a href="http://qiita.com/okmttdhr/items/58be840c3cc64c5ff460" target="_blank">Vue.js on Railsパーフェクトガイド</a>