$30 off During Our Annual Pro Sale. View Details »

Easy AJAX on Rails

Easy AJAX on Rails

やさしい AJAX on Rails

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

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

Satoshi Ebisawa

August 22, 2015
Tweet

More Decks by Satoshi Ebisawa

Other Decks in Technology

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