読者です 読者をやめる 読者になる 読者になる

ボクココ

サービス開発を成功させるまでの歩み

理想的な Rails, AngularJS 環境の構築

Rails AngularJS

ネットでRails x AngularJSで調べると、AssetsにAngularJSを追加してやるのが普通的なことをよく見る。でも、この方法だとYeomanや、Grunt.jsが使えず、Rails x AngularJSでKarmaでテストを書いたりといったことができないし、AngularJSの作法にのっとった開発ができないのがとてもモヤモヤしていた。
angularjs



てことで、もうこれはAsset Pipelineを使わない方向で行くのがベストなんじゃないのか、という方向で色々探し回っていたら、同じようなことを考えていた方がいたようで,これを参考にしてもっとベーシックな枠組みを作ってみた。
Asset Pipeline の機能が使えなくなる?ご心配なく。Grunt.jsがJSコードの圧縮、SCSS, CoffeeScriptのコンパイル、さらにLiveloadの恩恵, 画像の圧縮、テストの自動実行もできる。


基本的な仕組みとしては、{RAILS_ROOT}/ngapp を作り、そこでyo angular でAngularの枠組みを作る。Grunt.js内で、yeomanConfigのdistを ../public にすることで、ビルドするとRailsの静的ファイルとして表示させるようにする。さらに、開発中はLiveLoadの恩恵を受けたいので、connectの部分にProxyとしてlocalhostをさすようにしてlocalhost:3000/api/にアクセスしに行くようにすれば、AngularのリクエストがRailsAPIへ飛んで、連携がうまくできる仕組みになる。
つまり、 rails s と、 grunt server の2つを起動して開発していくスタイルになる。


Grunt.jsのおかげで、SCSSやCoffeeScriptも普通のRailsアプリを書くときと同じように書けるし、変更はリアルタイムで更新される。
いやー何より、自分はAngularのテストが書ける!っていうだけでそれだけで嬉しい。
これを発展させて、より開発効率の高いベースを構築していく予定。


P.S. AngularJS使ってるのに、RailsのERB使うなんて、論外なんだからね!
Railsは完全にAPIサーバ専用にする。そうするとスマホアプリ開発でも同じAPIを使ってアクセスできる。
Rails-API っていうGemがあるみたいなので、これでRailsフルスタック構成から必要最低限のモジュールだけをとってきた軽いRailsアプリになるので、そっちに移す予定。
そうすればRailsの開発効率とAngularJSの効率をダブルでかねそろえた理想的な環境ができあがる!