RESTful APIとしてのRailsとクライアントとしてのJavaScriptsednagaya.rb / ppworks

自己紹介

✤ @ppworks

✤ Ruby On Rails, Backbone.js, Objective-C

✤ sendagaya.rb

よくあるAjaxを利用したページの例✤ Sedndagaya.rbというグループへ投稿出来るサイトがあるとします。

✤ この時、グループのページにアクセスすると、グループの詳細情報と、グループへ投稿された記事が表示されます。

どんなことが行われているのか✤ 通常のリクエストに対するレスポンスの描写

✤ 非同期のリクエストに対するレスポンスの描写

✤ DOM要素のイベントに対するレスポンスの描写

通常のリクエストに対するレスポンスの描写

通常のリクエストに対するレスポンスの描写✤ エンドユーザーがあるURIをブラウザ経由でアクセスする。 たとえば、 http://example.com/groups/1 にHTTP GETリクエストを送信してアクセスする。

✤ Webサーバー(アプリケーション・サーバー)が対応するHTMLを返す。この例の場合、 /groups/1 に対応するリソースを返す。

✤ ブラウザがHTMLをレンダリングする。

通常のリクエストに対するレスポンスの描写

非同期のリクエストに対するレスポンスの描写

非同期のリクエストに対するレスポンスの描写✤ パスが /groups/1 の場合、特定の JavaScript が実行されるようにしておく。

✤ その JavaScript が /groups/1 に関連するリソースを非同期のHTTP GETリクエストを送信し、その結果をHTML内の特定のDOM要素へ差し込む。

非同期のリクエストに対するレスポンスの描写

非同期のリクエストに対するレスポンスの描写

DOM要素のイベントに対するレスポンスの描写

DOM要素のイベントに対するレスポンスの描写✤ UIにイベントを付与する。

DOM要素のイベントに対するレスポンスの描写✤ ボタンをクリックすると投稿フォームを表示する。

どんなHTTPリクエストを送信したか✤ GET /groups/1

✤ GET /groups/1/posts

✤ GET /groups/1/posts/new

POSTリクエストも考えてみる✤ /group/1/posts へ 非同期のHTTTP POSTリクエスト

POSTリクエストも考えてみる✤ リクエスト後、複数の処理を javascript で実行

必要なHTTPメソッドと対応するURIを洗い出す✤ GET http://example.com/groups/1

✤ GET http://example.com/groups/1/posts

✤ POST http://example.com/groups/1/post

✤ GET http://example.com/groups/new

✤ RESTfulの指向で考えると統一されたインターフェースから導けば良い

✤ RESTfulに作るとbackbone.jsなどと連携しやすい

JavaScriptの重要性

JavaScriptの重要性✤ 通常のHTTP GETリクエストの処理と合わせた非同期処理を行う際に JavaScript は必須

✤ このJavaScript をどこにどのように書く？

JavaScriptの実行Routing✤ 先の例のように通常のHTTPリクエストの後に、

✤ 非同期のHTTPリクエストを行いたい

✤ 特定のDOM要素のイベントをハンドリングしたい

✤ といった要件は、通常URIごとに異なります。

ひとつの.jsファイルに全部書く例$(function() { // user pageで使います $('.user a.follow').click(function(e) { e.preventDefault(); // ajaxでフォロー処理をします });

// グループページで使います。 $('.group a.new_post').click(function(e) { e.preventDefault(); // グループに投稿する記事フォームを表示 }):

// … とにかく続く // ウゲェ});

ひとつの.jsファイルに全部書く例✤ たまたま```JavaScript``` の制御に利用するclass名やid名を追加したり削除したりすると悲惨

✤ そのページに関係ある処理とそうでない処理が分かりづらい

jQuery-Routerを使った例$.route( { path: /\/users/, func: function() { $('.user a.follow').click(function(e) { e.preventDefault(); // ajaxでフォロー処理をします }); } }, { path: /\/groups/, func: function() { $('.group a.new_post').click(function(e) { e.preventDefault(); }); } },);

*.js.erb

✤ /groups/:id/posts への非同期のHTTP GETアクセス時にの JavaScript 処理を、app/views/posts.js.erb に直接書く方法もあります。

✤ この方法は、JavaScript の記述がapp/assets/javascripts/* と app/views/*.js.erb に散らばり見通しが悪くなる

JavaScriptのMVCフレームワークの利用✤ spine.js

✤ backbone.js

✤ model: リソース1つの操作をRESTfulに管理する

✤ collection: リソース複数の操作をRESTfulに管理する

✤ router: どのURIで何をするかを管理する

✤ view: どのDOM要素で何をするかを管理する

まとめ

✤ このように通常のHTTPリクエストと、非同期のHTTPリクエストの組み合わせのページを作ることが多い昨今、RESTful APIとしてのRailsとクライアントとしてのJavaScriptとの関係をどう記載するのかが重要となってきています。

✤ その際、通常のHTTPリクエストと非同期HTTPリクエストを同じ統一インターフェースであるRESTfulな設計で管理すると一貫性が出て開発効率の向上につながる