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

2,415 views
2,351 views

Published on

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

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,415
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
16
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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な設計で 管理すると一貫性が出て開発効率の向上につながる

×