replaceWithとhtmlメソッドの違い(Rails 総復習1ヶ月チャレンジ 17日目)

こんにちは!チャレンジ17日目です!
今回はlike機能の実装を勉強していた際に気になったメソッドについて調べてみました!

前提

jqueryを用いてajaxで実装しています。
likes_controller.rbでリダイレクトやレンダーを記載していないのは、like.html.erb・unlike.html.erb内のlink_to内でremote: trueを記載しajax通信を行うようにしているからです。こうすることでcreate.js.erbとdestroy.js.erbを使ってレスポンスが生成されます。

#likes_controller.rb
class LikesController < ApplicationController

  def create
    @mutter = Mutter.find(params[:mutter_id])
    current_user.like(@mutter)
  end

  def destroy
    @mutter = Mutter.find(params[:id])
    current_user.unlike(@mutter)
  end
end
#_like.html.erb
<%= link_to likes_path(mutter_id: mutter.id), id: "js-like-button-for-mutter-#{mutter.id}", class:"float-right", method: :post, remote: true do %>
  <%= icon 'far', 'star' %>
<% end %>
#_unlike.html.erb
<%= link_to like_path(current_user.like_mutters.find_by(id: mutter.id)), id: "js-like-button-for-mutter-#{mutter.id}", class:"float-right", method: :delete, remote: true do %>
  <%= icon 'fas', 'star' %>
<% end %>
#create.js.erb
$("#js-like-button-for-mutter-<%= @mutter.id %>").replaceWith("<%= j(render('likes/unlike', mutter: @mutter)) %>");
#destroy.js.erb
$("#js-like-button-for-mutter-<%= @mutter.id %>").replaceWith("<%= j(render('likes/like', mutter: @mutter)) %>");

なお j(render は escape_javascript(renderのエイリアスです。

escape_javascript (ActionView::Helpers::JavaScriptHelper) - APIdock
escape_javascriptについてはこちら

replaceWithとhtmlメソッド

今回はlikeボタンが押された時にhtmlタグを切り替えるようにする為、replaceWithを用いています。なおreplaceWithと似たメソッドとしてhtmlメソッドがあり、replaceWithで実装している部分をhtmlメソッドで実装しても同じ挙動をします。ではそれぞれのメソッドの違いについては何か調べてみましょう。

replaceWith

replaceWith()は指定したタグの中身をhtml付きで変えることができます。更に指定したタグ自体も変えてしまいます。

html

html()は指定したタグの中身をhtmlタグ付きで変えることができますが、指定したタグ自体は変わりません。

上記を踏まえて今回の実装を見ると、like.html.erbと unlike.html.erbファイル内に"#js-like-button-for-mutter-<%= @mutter.id %>"が含まれており、htmlメソッドを使用するとネストする構造になります。
実際のブラウザのデペロッパーツールでボタンを押した際の挙動を確認してみましょう。

replaceWithの場合
Image from Gyazo

htmlの場合
Image from Gyazo

htmlメソッドでは指定した元のタグの中身が切り替わっていますが、元のタグはそのまま残っています。それに対してreplaceWithはタグ自体が変わっているのを確認できます!

今回は以上となります!

参考:

replaceWith()の使い方〜jQuery | IT工房|AI入門とWeb開発