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)
   

   View Slide

2. お話しすること
   • SPA じゃないです
   • がんばらない方の AJAX のやり方
   • jQueryバリバリバリ〜
   • 対象読者:
   • Rails で AJAX ってどうやるんだっけ？って人
   • あんまり JS をガリガリがんばりたくない人
   

   View Slide

3. お話の流れ
   • 簡単なひとこと掲示板を、AJAX 化します
   • https://github.com/satococoa/easy-js-on-rails
   • master ブランチが非 AJAX の元のアプリです
   

   View Slide

4. サンプル:ひとこと掲示板
   QPTUTJOEFY
   

   View Slide

5. 非 AJAX
   • 新規投稿が…
   • 成功したらリダイレクト
   • 失敗したらエラーメッセー
   ジを表示しつつ、入力値を
   保持
   

   View Slide

6. 投稿が成功したらテーブルの1行目に
   新規投稿内容だけを追加すれば良いよね
   

   View Slide

7. フォームの AJAX 化
   ʊਓਓਓਓਓਓਓਓʊ
   ʼɹ remote: trueɹ ʻ
   ʉY^Y^Y^Y^Y^Y^Yʉ
   ίϨ͚ͩ
   

   View Slide

8. リクエストを送る側は remote: true で
   じゃあ、レスポンスの扱い方は？
   いくつかやり方を見てみましょう
   

   View Slide

9. *.js.erb
   • JavaScript のコードを返す
   と Rails が勝手に実行もして
   くれる
   • 古き良き RJS の時代を彷彿
   とさせる書き方

   (独自のメソッドがあるわけじゃ
   なく、jQuery をそのまま使っ
   てるだけですが)
   ※ エラーメッセージは手抜きです
   

   View Slide

10. *.js.erb
    9.-)UUQ3FRVFTU
    +BWB4DSJQU
    ࣗಈ࣮ߦ
    

    View Slide

11. *.js.erb
    • 簡単〜 だけど…
    • テンプレートに JS ベタ書きはちょっとね…
    • JS のコードが app/assets/javascripts/ と app/
    views/ に散らばってつらい
    • なのであんまりこれって最近見ないです
    

    View Slide

12. partial on JSON
    • ajax:success, ajax:error と
    いうrails-ujsが発火するイベ
    ントを使う
    • jsonとしてサーバサイドでレ
    ンダリングしたpartialを返し、
    そのままDOMにはめ込む
    

    View Slide

13. partial on JSON
    9.-)UUQ3FRVFTU
    ͋ͱ͸KTͰ
    Ͳ͏ʹ͔͢Δʂ
    

    View Slide

14. partial on JSON
    • posts.coffeeにちゃんとクライアントサイドの

    ロジックが集まる
    • JSONにHTMLをまるっと入れてるのがちょっと気
    持ち悪い？
    • レンダリング結果をそのままはめ込むとか、元の
    DOMとそっくり入れ替えるとかそういうケースで
    はオススメ
    

    View Slide

15. object on JSON
    • ajax:success, ajax:error と
    いうrails-ujsが発火するイベ
    ントを使う
    • jsonとして@postオブジェク
    トを返し、クライアントサイ
    ドでDOMを組み立てる
    

    View Slide

16. data on JSON
    9.-)UUQ3FRVFTU
    KTͰ%0.Λ࡞Δʂ
    

    View Slide

17. data on JSON
    • posts.coffeeにちゃんとクライアントサイドの

    ロジックが集まる
    • 必要なデータだけを返すようになっているので

    転送量節約
    • DOMの組み立てが複雑になる場合は何らかの
    view 用のライブラリ (vue.js、react) とか使っ
    た方がよさげ
    

    View Slide

18. おまけ
    • 他の ajax:* イベント
    • ajax:before
    • ajax:complete
    • ajax:beforeSend
    

    View Slide

19. 例) 送信中にローディングを出してみたり
    

    View Slide

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
    

    View Slide