Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Easy AJAX on Rails

Easy AJAX on Rails

やさしい AJAX on Rails

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

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

Ec3aedf8a29bf5f1dcace93eed9f0015?s=128

Satoshi Ebisawa

August 22, 2015
Tweet

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