こんにちわ、プログラマの川口です。今回はBackbone.jsをCoffeeScriptで記述し、Ruby on Railsと組み合わせて利用する簡単なパターンを試してみました。CoffeeScriptは非常に簡潔にJavaScriptを記述できる上に学習コストも低いのでおすすめです。最近はJavaScriptがプロジェクト全体のコードに占める割合が大きくなってきていますし、それに比例してやはりメンテナンス性や可読性が下がっていくこともあり事前に対応策が必須です。
Backbone.jsとは・・・とかは別にいいデスヨネ？dwangoさんのBackbone.js記事を見てください(完全にネタかぶりです、本当にありがとうございました)。
前準備
バージョンはこんな感じ。
- Ruby on Rails 3.1.1.rc1
- CoffeeScript version 1.1.2
- Backbone.js 0.5.3
- Underscore.js 1.2.0
セットアップまでを淡々と(´・ω・`) まずは今回利用するテーブルをサクッと作成します。 (今回は名前だけでおk)
次にRESTfulにusersテーブルにアクセスするためのController/Modelを作成します。
Controller
※Backbone.js側からアクセスされた際に結果を全てJSON形式で返すようにしています。
Model
表示画面作成
実際にブラウザからアクセスする画面も作っておきます。
ルーティング追加
Backbone.js組み込み
Backbone.jsと依存しているUnderscore.jsを組み込みます。下記の2つのページよりスクリプトをダウンロードして[app/assets/javascripts]へ保存します。
rails-3.1はデフォルトでSprocketsのrequireディレクティブによって自動的にJavaScriptファイルを読み込むように設定されいます。が、Backbone.jsはUnderscore.jsに依存しているのでSprocketsがファイル名順に読み込むとエラーとなるので少し修正が必要。
Backbone.js実装
実装は下記の通り。
この状態で[home/index]へアクセスしてusersテーブルに対して追加・削除を試してみてください。
ここまでを実装したコードをこちらにおいておきます。実際に動作させる場合はsqliteを利用しているので'bundle install' / 'migrate'後にサーバーを起動すれば無問題のはずですが自環境以外で試してないので動作の保証はできません。自己責任でどうぞ m9( ﾟдﾟ)
今回は単純な構造で紹介しましたがこのようにバックエンドをRails・フロントエンドをjQuery+CoffeeScriptとすることで分業やテストもより簡単に書けそうですね。フレームワークを利用することによるメンテナンス性向上はもちろん上記のような設計によってRailsアプリがよりRESTfulな設計となり非常にスマートになる効果も期待できそうです。
