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