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