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