やさしい AJAX on Rails
SPA じゃない rails のアプリケーションで Ajax ってどう実装するんだっけ?のまとめ
サンプルコード https://github.com/satococoa/easy-js-on-rails
やさしいAJAX on Rails〜がんばらない AJAX の話〜株式会社イグニス海老沢 聡 (@satococoa)
View Slide
お話しすること• SPA じゃないです• がんばらない方の AJAX のやり方• jQueryバリバリバリ〜• 対象読者:• Rails で AJAX ってどうやるんだっけ?って人• あんまり JS をガリガリがんばりたくない人
お話の流れ• 簡単なひとこと掲示板を、AJAX 化します• https://github.com/satococoa/easy-js-on-rails• master ブランチが非 AJAX の元のアプリです
サンプル:ひとこと掲示板QPTUTJOEFY
非 AJAX• 新規投稿が…• 成功したらリダイレクト• 失敗したらエラーメッセージを表示しつつ、入力値を保持
投稿が成功したらテーブルの1行目に新規投稿内容だけを追加すれば良いよね
フォームの AJAX 化ʊਓਓਓਓਓਓਓਓʊʼɹ remote: trueɹ ʻʉY^Y^Y^Y^Y^Y^YʉίϨ͚ͩ
リクエストを送る側は remote: true で じゃあ、レスポンスの扱い方は?いくつかやり方を見てみましょう
*.js.erb• JavaScript のコードを返すと Rails が勝手に実行もしてくれる• 古き良き RJS の時代を彷彿とさせる書き方 (独自のメソッドがあるわけじゃなく、jQuery をそのまま使ってるだけですが)※ エラーメッセージは手抜きです
*.js.erb9.-)UUQ3FRVFTU+BWB4DSJQUࣗಈ࣮ߦ
*.js.erb• 簡単〜 だけど…• テンプレートに JS ベタ書きはちょっとね…• JS のコードが app/assets/javascripts/ と app/views/ に散らばってつらい• なのであんまりこれって最近見ないです
partial on JSON• ajax:success, ajax:error というrails-ujsが発火するイベントを使う• jsonとしてサーバサイドでレンダリングしたpartialを返し、そのままDOMにはめ込む
partial on JSON9.-)UUQ3FRVFTU͋ͱKTͰͲ͏ʹ͔͢Δʂ
partial on JSON• posts.coffeeにちゃんとクライアントサイドの ロジックが集まる• JSONにHTMLをまるっと入れてるのがちょっと気持ち悪い?• レンダリング結果をそのままはめ込むとか、元のDOMとそっくり入れ替えるとかそういうケースではオススメ
object on JSON• ajax:success, ajax:error というrails-ujsが発火するイベントを使う• jsonとして@postオブジェクトを返し、クライアントサイドでDOMを組み立てる
data on JSON9.-)UUQ3FRVFTUKTͰ%0.Λ࡞Δʂ
data on JSON• posts.coffeeにちゃんとクライアントサイドの ロジックが集まる• 必要なデータだけを返すようになっているので 転送量節約• DOMの組み立てが複雑になる場合は何らかのview 用のライブラリ (vue.js、react) とか使った方がよさげ
おまけ• 他の ajax:* イベント• ajax:before• ajax:complete• ajax:beforeSend
例) 送信中にローディングを出してみたり
参考 URL• http://guides.rubyonrails.org/working_with_javascript_in_rails.html• https://github.com/rails/jquery-ujs/wiki/ajax• https://github.com/rails/jquery-ujs/blob/master/src/rails.js