Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

RESTful APIとしてのRailsとクライアントとしてのJavaScript

RailsにおけるRESTfulなURL設計勉強会 千駄ヶ谷.rb #12 #sendagayarb
http://www.zusaar.com/event/324057

の資料。qiita版は
http://qiita.com/private/df25ae6134adb8f45f9a

  • Login to see the comments

RESTful APIとしてのRailsとクライアントとしてのJavaScript

  1. 1. RESTful APIとしてのRailsとクライアントとしてのJavaScriptsednagaya.rb / ppworks
  2. 2. 自己紹介✤ @ppworks✤ Ruby On Rails, Backbone.js, Objective-C✤ sendagaya.rb
  3. 3. よくあるAjaxを利用したページの例✤ Sedndagaya.rbというグループへ投稿出来るサイトがあ るとします。✤ この時、グループのページにアクセスすると、グループ の詳細情報と、グループへ投稿された記事が表示されま す。
  4. 4. どんなことが行われているのか✤ 通常のリクエストに対するレスポンスの描写✤ 非同期のリクエストに対するレスポンスの描写✤ DOM要素のイベントに対するレスポンスの描写
  5. 5. 通常のリクエストに対するレスポンスの描写
  6. 6. 通常のリクエストに対するレスポンスの描写✤ エンドユーザーがあるURIをブラウザ経由でアクセスす る。 たとえば、 http://example.com/groups/1 にHTTP GETリクエストを送信してアクセスする。✤ Webサーバー(アプリケーション・サーバー)が対応する HTMLを返す。この例の場合、 /groups/1 に対応するリ ソースを返す。✤ ブラウザがHTMLをレンダリングする。
  7. 7. 通常のリクエストに対するレスポンスの描写
  8. 8. 非同期のリクエストに対するレスポンスの描写
  9. 9. 非同期のリクエストに対するレスポンスの描写✤ パスが /groups/1 の場合、特定の JavaScript が実行され るようにしておく。✤ その JavaScript が /groups/1 に関連するリソースを非同 期のHTTP GETリクエストを送信し、その結果をHTML 内の特定のDOM要素へ差し込む。
  10. 10. 非同期のリクエストに対するレスポンスの描写
  11. 11. 非同期のリクエストに対するレスポンスの描写
  12. 12. DOM要素のイベントに対するレスポンスの描写
  13. 13. DOM要素のイベントに対するレスポンスの描写✤ UIにイベントを付与する。
  14. 14. DOM要素のイベントに対するレスポンスの描写✤ ボタンをクリックすると投稿フォームを表示する。
  15. 15. どんなHTTPリクエストを送信したか✤ GET /groups/1✤ GET /groups/1/posts✤ GET /groups/1/posts/new
  16. 16. POSTリクエストも考えてみる✤ /group/1/posts へ 非同期のHTTTP POSTリクエスト
  17. 17. POSTリクエストも考えてみる✤ リクエスト後、複数の処理を javascript で実行
  18. 18. 必要な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などと連携しやすい
  19. 19. JavaScriptの重要性
  20. 20. JavaScriptの重要性✤ 通常のHTTP GETリクエストの処理と合わせた非同期処 理を行う際に JavaScript は必須✤ このJavaScript をどこにどのように書く?
  21. 21. JavaScriptの実行Routing✤ 先の例のように通常のHTTPリクエストの後に、 ✤ 非同期のHTTPリクエストを行いたい ✤ 特定のDOM要素のイベントをハンドリングしたい✤ といった要件は、通常URIごとに異なります。
  22. 22. ひとつの.jsファイルに全部書く例$(function() { // user pageで使います $(.user a.follow).click(function(e) { e.preventDefault(); // ajaxでフォロー処理をします }); // グループページで使います。 $(.group a.new_post).click(function(e) { e.preventDefault(); // グループに投稿する記事フォームを表示 }): // … とにかく続く // ウゲェ});
  23. 23. ひとつの.jsファイルに全部書く例✤ たまたま```JavaScript``` の制御に利用するclass名やid名 を追加したり削除したりすると悲惨✤ そのページに関係ある処理とそうでない処理が分かりづ らい
  24. 24. 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(); });
  25. 25. *.js.erb✤ /groups/:id/posts への非同期のHTTP GETアクセス時に の JavaScript 処理を、app/views/posts.js.erb に直接書 く方法もあります。✤ この方法は、JavaScript の記述がapp/assets/javascripts/ * と app/views/*.js.erb に散らばり見通しが悪くなる
  26. 26. JavaScriptのMVCフレームワークの利用✤ spine.js✤ backbone.js ✤ model: リソース1つの操作をRESTfulに管理する ✤ collection: リソース複数の操作をRESTfulに管理する ✤ router: どのURIで何をするかを管理する ✤ view: どのDOM要素で何をするかを管理する
  27. 27. まとめ✤ このように通常のHTTPリクエストと、非同期のHTTPリ クエストの組み合わせのページを作ることが多い昨今、 RESTful APIとしてのRailsとクライアントとしての JavaScriptとの関係をどう記載するのかが重要となって きています。✤ その際、通常のHTTPリクエストと非同期HTTPリクエス トを同じ統一インターフェースであるRESTfulな設計で 管理すると一貫性が出て開発効率の向上につながる

×