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

Satoshi Ebisawa

August 22, 2015
Tweet

More Decks by Satoshi Ebisawa

Other Decks in Technology

Transcript

  1. お話しすること • SPA じゃないです • がんばらない方の AJAX のやり方 • jQueryバリバリバリ〜

    • 対象読者: • Rails で AJAX ってどうやるんだっけ?って人 • あんまり JS をガリガリがんばりたくない人
  2. *.js.erb • JavaScript のコードを返す と Rails が勝手に実行もして くれる • 古き良き

    RJS の時代を彷彿 とさせる書き方
 (独自のメソッドがあるわけじゃ なく、jQuery をそのまま使っ てるだけですが) ※ エラーメッセージは手抜きです
  3. *.js.erb • 簡単〜 だけど… • テンプレートに JS ベタ書きはちょっとね… • JS

    のコードが app/assets/javascripts/ と app/ views/ に散らばってつらい • なのであんまりこれって最近見ないです
  4. partial on JSON • ajax:success, ajax:error と いうrails-ujsが発火するイベ ントを使う •

    jsonとしてサーバサイドでレ ンダリングしたpartialを返し、 そのままDOMにはめ込む
  5. partial on JSON • posts.coffeeにちゃんとクライアントサイドの
 ロジックが集まる • JSONにHTMLをまるっと入れてるのがちょっと気 持ち悪い? •

    レンダリング結果をそのままはめ込むとか、元の DOMとそっくり入れ替えるとかそういうケースで はオススメ
  6. object on JSON • ajax:success, ajax:error と いうrails-ujsが発火するイベ ントを使う •

    jsonとして@postオブジェク トを返し、クライアントサイ ドでDOMを組み立てる
  7. data on JSON • posts.coffeeにちゃんとクライアントサイドの
 ロジックが集まる • 必要なデータだけを返すようになっているので
 転送量節約 •

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