Rails3にbackbone.jsを導入する - リア充爆発日記

JavaScript(CoffeeScript)をどうやって、疎に、DRYに保つか、ということはいつも考えながらも、最終的にはムスビのコトワリに導かれゆく結末をたどってきたのですが、近頃ではJSにも各種フレームワークが浸透してきており、その中でもデファクトの地位を確立しつつある（？）backbone.jsの導入により、人修羅への道を切り開くことを試みることにした。

backbone.jsを知るにあたって参考にしたサイト等は、ここにまとめた。
backbone.jsについて調べたときのメモ
とにかく、イメージがなんとなく掴めるまでたくさんの情報を仕入れたほうがいいかも。

で、今回はとりあえず、細かい話は抜きにして、「おー！」とカンタンに思えるところまでを追ってみる。

backbone-on-rails の導入

Railsで扱うならGemだよねー、ということで探してみると、２，３メジャーどころがあるようだけど、どれも似たようなもんで、最終的にRailscastにチュートリアル（有料）があったbackbone-on-railsを採用することにした。
https://github.com/meleyal/backbone-on-rails

インストールとかは、上のギッハブのREADME.mdを読んでください。これができなかったらもうこの先絶対にムリなので導入を諦めるが吉。

適当にscaffoldしてみる

rails g backbone:scaffold hoge

そうすると、railsみたいにhogeリソースをベースにした各種スクリプトがassets/javascripts配下に生成される。

backbone.js側のModelをいじる

assets/javascripts/models/hoge.js.coffee
class YourApp.Models.Hoge extends Backbone.Model
  urlRoot: '/hoges'

こんな感じに、リソースを指定する。こんだけ。

サーバサイドにAPIを用意する

今度はrails側で同じくhogeでscaffoldするなりする。とりあえずこの際Jsonで返さなくていいの、とかそういうのは無視する。
データも１件、適当に入れてください。

つまり、ブラウザで/hoge/1を表示できるようにしてください。

javascriptコンソールで感動する

safariでもchromeでも、なんでもいいので、Javasciprtコンソールを開いてbackbone.jsのModelがすごいことを確認する。

hoge = new YourApp.Models.Hoge({id:1})
hoge.fetch()

これでObjectが返ってきていて、その中身のresponseTextには、ブラウザで/hoge/1を表示したときを同じデータが入っているのが確認できる。

まとめ

まだ細かいことはよくわからないけど、なんだかすごそうだ。

追記）
もっと丁寧で参考になるサイトを後で見つけたので、上記はなかったことにして、こちらを参考にするがよかろう。
Rails3.2とBackbone.jsでToDoアプリを作ってみた〜backbone-on-rails