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メソッドを使用するとネストする構造になります。
実際のブラウザのデペロッパーツールでボタンを押した際の挙動を確認してみましょう。
htmlメソッドでは指定した元のタグの中身が切り替わっていますが、元のタグはそのまま残っています。それに対してreplaceWithはタグ自体が変わっているのを確認できます!
今回は以上となります!