概要
Vue.jsは、MVVMというMVCの派生種を設計基盤として構築されたクライアントサイドJSフレームワークです。AngularJSと表面上は似ていますが、設計思想は全く異なるもので、作成したUIコンポーネントを組合せてページを構成することを前提にしています。
「Vue.jsで遊んでみた」のような記事はよく見るのですが、実際にプロジェクトとして走らせる場合に、アプリケーション構成からテストまで、どのようにするのがベストなのかを、まとめました。
SPAをベースに、サーバーサイド言語上で動かすときの構成も調べています。
ブラウザサポート
- yyx990803/vue - Vue.jsはレガシー・ブラウザをサポートしていません。
参考記事
大きめのアプリケーション構成について
ガイドライン
より大きなアプリケーション構成をつくるためのガイドラインが、Building Larger Apps - vue.jsとしてドキュメントに記してあり、内容を以下に簡潔にまとめます。基本的には、このガイドラインに従ってアプリケーションを作成してゆくのがよいと考えています。
モジュール化
AngularJsのようにもとからモジュール化の仕組みはないので、BrowserifyかWebpackをつかいます。
1ファイルコンポーネント
Vueify等をつかい、コンポーネントは1ファイルにします。
ここがAngularJsとは性質を全く別にするところで、Vue.jsは、基本的にコンポーネントを組み合わせてスクリプトをつくってゆきます。
ルーティング
マニュアルでもできますが、Page.jsやDirectorなどのライブラリを使ったほうがより簡単に実装できます。
サーバーとの通信
Vue instanceが自動的にjson型にシリアライズされた$dataオブジェクトをもっています。場合によってはSuperagentなどを使ってもよいでしょう。
ユニットテスト
CommonJS pre-processorを用いてKarmaを使うのを推奨。
実例
ハッカーニュースのクローンをSPAで。Browserify + Vueifyをコードのモジュール化に使い、Director.jsをルーティングに、Firebase APIをバックエンドに使ったもの。
Railsにて動かす際の決め事
asset/javascriptには書かず別ファイルをつくり、全JSファイルをバンドルしたコードを読み込む。
良質な資料
- Vue.js資料まとめ - はてぶ140
- Vue.js note(v0.10.3) - はてぶ93
- 体で覚えるVue.js - グローバルメソッド編 〜 JSおくのほそ道 #025 - Qiita - （シリーズで）はてぶ60程
- Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita - はてぶ126
- JavaScript - シンプルな MVVM ライブラリ『Vue.js』の環境構築と使ってみた感想 - Qiita - はてぶ8
- [Rails4] Vue.js の導入手順 ＆ DBデータを表示する方法 - Qiita - はてぶ13
- browserify + debowerify + vueifyを使ったvue.js component開発 - Qiita - はてぶ34
- vue.jsとmilkcocoaを使ってアカウント機能付きメモアプリを作ってみた - Qiita - はてぶ5
※はてぶ数と記事の質は相関なし。
疑問点
よく調べきれていない点、ご教授願いたい点です。
- 仮にRailsプロジェクトの場合、管理はgemでやるのがよいのか？フロントエンドのコードだけでも、bower、もしくはnpmでやるのがよいか？
- GruntやGulpは入れたほうがよいのか？
- Karmaを実装するまでの具体的な手順は？
- Vueifyは、component内のDOMを、どのようにコンパイルするのか？
追記
疑問の答えをこちらにまとめました=>Vue.js on Railsパーフェクトガイド