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

参考

jQuery

修正後

修正前のステップ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)) %>"

参考