Railsによる個人サービス supplebox.tokyo ではお気に入りの追加・削除機能をAjaxを利用して実現しています。
この非同期用のJavaScript用の埋め込みRuby（.js.erb）ファイルでは、jQueryを使っていました。
jQueryを利用しているのは、Rails Tutorialを始め、私の周りの学習教材ではjQueryが利用されていたためでした。
しかし、ここ最近しっかりとJavaScriptを学習しはじめると、わざわざjQuery使わなくても素のJavaScript(Vanila JS)でもできるんじゃないの?と思いたち、実際にできたため、書き方を記事にまとめます。
なお、本記事では.js.erbファイルのみに焦点を当てているため、Ajaxを使った機能自体の詳細については、 Rails Tutorialや参考記事をご参考ください。
修正前
修正前も修正後もapp/views/likes/create.js.erbとapp/views/likes/destroy.js.erbの記述内容は同一なので、app/views/likes/create.js.erbについてのみ言及します。
app/views/likes/create.js.erb
var product_id = <%= @product.id %>
$(`#product-${product_id}`).html("<%= escape_javascript(render('likes/like_small_button', product: @product)) %>")
このファイルでやっていることを端的にまとめます。
- ステップ1.
product_idに@product.idを代入する - ステップ2.
#product-${product_id}の要素を取得している - ステップ3. ステップ2で取得した要素の中身を
<%= escape_javascript(render('likes/like_small_button', product: @product)) %>に置き換える
もう少し細かく分解してみると、下記と同じことになります。
app/views/likes/create.js.erb
var product_id = <%= @product.id %> // ステップ1
var element = $(`#product-${product_id}`) // ステップ2
element.html("<%= escape_javascript(render('likes/like_small_button', product: @product)) %>") // ステップ3
参考
修正後
修正前のステップ1~3を素のJavaScriptに置き換えていきます。
app/views/likes/create.js.erb
var product_id = <%= @product.id %> // ステップ1(ここは変更なし)
var element = document.getElementById(`product-${product_id}`)
// ステップ2
element.innerHTML = "<%= escape_javascript(render('likes/like_small_button', product: @product)) %>" // ステップ3
以上で完了です。
もちろん、メソッドチェーンを使って下記のように書くこともできます。
app/views/likes/create.js.erb
document.getElementById("product-<%= @product.id %>").innerHTML = "<%= escape_javascript(render('likes/like_small_button', product: @product)) %>"
参考