restful apiとしてのrailsとクライアントとしてのjavascript
DESCRIPTION
RailsにおけるRESTfulなURL設計勉強会 千駄ヶ谷.rb #12 #sendagayarbhttp://www.zusaar.com/event/324057の資料。qiita版はhttp://qiita.com/private/df25ae6134adb8f45f9aTRANSCRIPT
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な設計で管理すると一貫性が出て開発効率の向上につながる