RailsとBackbone.js触った

最近はやりのjsクライアントサイドMVCフレームワーク乱立していますけど、いろいろググってるとBackboneがなんだかんだ無難というか事例が多いというかStackoverflowもそこそこ記事がある印象・・・というゆるふわな理由でBackbone導入しました。サーバーサイドはRailsなので、かなり前例が多い組み合わせで、轍を行くだけのはずですが、いちおう作業ログとかググりログを書き残します。

gems

rails-backbone

gem "rails-backbone"

よくあるassetsロードパスに追加してくれるgemです。backbone本体をリポジトリに含めずに済みます。そんなに大きいソースではないですけどね。この他に、このgemはgeneratorが使えます。

$ rails g backbone:install
$ rails g backbone:model
$ rails g backbone:router
$ rails g backbone:scaffold

僕はscaffoldで吐き出されるソースを読んで勉強しました。RESTの全アクションを含む動くサンプルソースとしては使えますが、railsのscaffoldほどは役に立たないと思います。

ruby-haml-js

俺もうhamlしか書けない。

gem "ruby-haml-js"

backboneの標準テンプレートエンジンはejsですが、これをhaml形式で記述することができます。このgemの優れている点は、サーバー側でjst.hamljsファイルをjstにして出力するので、クライアントサイド側にhamlエンジンを組み込む必要が無いという点です。

<<<<<<<<<<< UPDATED at 20013/04/05

railsでhoge.html.hamlなファイルを編集していると、endを省略できますから細かいこと考えずに済みますが、jsではブロックのとじカッコをどう書けばいいのか若干迷ったので書いときます。

.items
  - if(items.length == 0){
    なにもありません
  - }

て感じ。

<<<<<<<<<<<

haml_coffee_assets

gem "haml_coffee_assets"

これはhamlとcoffeeでテンプレートを書くものなので最高なのですが、クライアントサイドにhamlテンプレートエンジンを要求します。まぁ入れればいいんですけどね。backboneをrailsの上でcoffeeで書きテンプレートエンジンを変えるとなるといろいろ依存しまくりなのでいいかげんruby-haml-jsまでにして、haml_coffee_assetsは見送りました。

jquery-rails

bundled

通常jqueryは、DOM操作、イベントハンドリング、Ajax通信、アニメーションその他の役割を担うけど、backboneが使える状況だと、DOM操作とか、アニメーションとかの仕事くらいしかなくなっちゃう。

coffee-rails

bundled

本格的にcoffeeとかjsとか書くの初めてでした。

• class, extends, constructor, superなどのクラスベースっぽい機能
• @ が this. と等価
• 無名関数 arrow
• コールバック用 fat arrow
• nullチェックの「?」演算子

とか理解してからが早かったと思います。

あと、今までrubyしか書いてなかった自分としては、coffeeで引数取らないメソッド呼ぶときによくカッコわすれて!?ってなります。

@model.save

じゃなくて、

@model.save()

って書かないといけませんよねそうですよね。3時間ェ・・・

JavaScript libraries

backbone-relational

backboneのmodel間のhas_one, has_many関連を定義しやすくするやつ。似た名前のやつがもうひとつあったと思うけど、こっちを採用した。理由はわすれました。

githubのreadmeを読めばだいたいわかると思います。あとbackbone-relationalとかで検索すると使い方の記事が結構でるので、あんまり導入は詰んだりしなかった。

Tips

ActiveRecord::Base#as_json

Rails4ではjbuilderというFactoryGirlのjson版の様なものがあるので、そちらを使いましょう。

jbuilder

json組み立てのDSL。上述のas_json使ってる時は、APIのテスト書くときになんでModelのテスト書かなきゃいけないんだろ、とか思ってERBでjson書こうと思ったけどjsonってカンマつけたりするのめんどくさくて、なんだかなぁとか思ってました。まぁgrapeというgemを使う手もありましたが知ったのは最近でした。Rails4にはjbuilderがあるからこれでいいでしょ。

Routing

最近思ったのですが、ふつうに書いてると以下のようになるコード。

resources :companies do
  resources :people do
    resources :items
  end
end

これって、こうしたほうがいいんじゃないか、とか思った。

resources :companies do
  resources :people
end

resources :people, only: [] do
  resources :items
end

itemを作成するときに、親の親であるcompanyのidって実際不要。この辺はAPI書き始めてからこういう風になってきた。Backbone.jsのModelにしても、iPhone, Android向けのAPIにしても、親の親のidからURLを作らなきゃいけないのはめんどくさすぎると思う。

Event

jsのイベントについて全然知らなかったんでパーフェクトjavascriptのイベントの章読んで勉強しました。

event.stopPropagation()
event.preventDefault()

の意味理解してからなんか開発すすんだです。

感想

これについてはbackbone本体の話なので書きませんでしたがビューの@$elとか@$が便利で、マークアップするときのid名をビュー内でユニークにすればいいので、その点楽でした。いままでのrailsのapp/assets/javascriptのファイル内のjQueryのイベントにbindするコード書くとid名が全アクション内でユニークにしなくちゃいけなかったのが局所化できてよかったです。

たぶんapp/javascript/companies.js.coffeeみたいなのにゴリゴリ書いて動かすこともできるでしょうけど、backboneでファイル分割されているとなんか正しい頑張り方みたいな感じで精神衛生上よい。

ビューの命名規則とかは模索してるところです。

---

(2013/12/19 追記)

・・・もうgruntとかbrunchとかでnpm系でjs書けばいいんじゃないかな。フロント開発とサーバーサイド開発分けたい。