Easy AJAX on Rails

やさしい AJAX on Rails

SPA じゃない rails のアプリケーションで Ajax ってどう実装するんだっけ？のまとめ

サンプルコード
https://github.com/satococoa/easy-js-on-rails

Transcript

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