Tweet
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