ajaxのhtmlとreplaceWithメソッドの違い

ajaxのhtmlとreplaceWithメソッドの違い

htmlとreplaceWithを使った際の違いを、デベロッパーツールで確認していこうと思います。

前書き

  • htmlメソッド

    指定したタグの中身をhtmlタグ付きで変える

  • replaceWithメソッド

    指定したタグの中身をhtml付きで変えて、タグ自体も変える

※タグとは、pはh1、h2など

今回検証するベースは以下になります。

bookmarks_controller.rb

def create                                                            
  @board = Board.find(params[:board_id])                              
  current_user.bookmark(@board)                                       
end                                                                   
                                                                      
def destroy                                                           
  @board = current_user.bookmarks.find_by(board_id: params[:id]).board
  current_user.unbookmark(@board)                                     
end

_board.html.erb

<%= render 'bookmarks/bookmark_area', board: board %>

_bookmark_area.html.er

<% if current_user.bookmark?(board) %>                 
  <%= render 'bookmarks/unbookmark', board: board %>   
<% else %>                                             
  <%= render 'bookmarks/bookmark', board: board %>     
<% end %>

_bookmark.html.erb

<li class="list-inline-item">                                                                                            
  <%= link_to board_bookmarks_path(board), id: "js-bookmark-button-for-board-#{board.id}", method: :post, remote: true do
 %>                                                                                                                   
    <%= icon("far", "star") %>                                                                                           
  <% end %>                                                                                                              
</li>

_unbookmark.html.erb

<li class="list-inline-item">                                                                                          
  <%= link_to bookmark_path(board), id: "js-bookmark-button-for-board-#{board.id}", method: :delete, remote: true do %>
    <%= icon("fas", "star") %>                                                                                        
  <% end %>                                                                                                            
</li>

今回は、以下のファイルをメインに検証します。

create.js.erb

destroy.js.erb

※bookmarks_controller.rbのcreate処理が終わった後、create.js.erbが読み込まれます。

（destroyも然り）

その際の、挙動を確認する記事になります。

htmlメソッドを使用した場合

まず、一覧に表示されているスターのHTMLは以下になります。

<a id="js-bookmark-button-for-board-20" data-remote="true" rel="nofollow" data-method="post" href="/boards/20/bookmarks">
    <i class="far fa-star"></i>
</a>

create.js.erb

$("#js-bookmark-button-for-board-<%= @board.id%>").html("<%= j(render 'bookmarks/bookmark_area', board: @board) %>");

destroy.js.erb

$("#js-bookmark-button-for-board-<%= @board.id%>").html("<%= j(render 'bookmarks/bookmark_area', board: @board) %>");

実際に画面からスターボタンを押してみます。

<div id="js-bookmark-button-for-board-20">  <li class="list-inline-item">
  <a id="js-bookmark-button-for-board-20" data-remote="true" rel="nofollow" data-method="delete" href="/bookmarks/20">
    <i class="fas fa-star"></i>
</a></li>

</div>

変化しましたね。冒頭で記載した、「指定したタグの中身をhtmlタグ付きで変える」ように

aタグのidを判別して、ネストした形で記載されているのがわかります。

replaceWithメソッドを使用した場合

create.js.erb

$("#js-bookmark-button-for-board-<%= @board.id%>").replaceWith("<%= j(render 'bookmarks/bookmark_area', board: @board) %>");

destroy.js.erb

$("#js-bookmark-button-for-board-<%= @board.id%>").replaceWith("<%= j(render 'bookmarks/bookmark_area', board: @board) %>");

実際に画面からスターボタンを押してみます。

<a id="js-bookmark-button-for-board-20" data-remote="true" rel="nofollow" data-method="post" href="/boards/20/bookmarks">
    <i class="far fa-star"></i>
</a>

こうですね、冒頭で書いた通り「指定したタグの中身をhtml付きで変えて、タグ自体も変える」ため

ネストした状態ではなく、指定したタグ含めて全体が変わったことがわかります。

まとめ

それぞれの仕組みを理解して、RailsはHTMLを意識して書いていくときれいなWebアプリが作れるなと

実感しました。

参考リンク