完成形

https://i.gyazo.com/d3985c9345d0f6275ae5e522ffdd7bb8.gif

1.remote trueオプション

レンダリング処理をhtmlではなくjsファイルで実行するようにする

views/boards/_bookmark.html.erb
<%= link_to bookmarks_path(board_id: board.id),
            id: "js-bookmark-button-for-board-#{board.id}",
            class:"float-right",
            method: :post,
            remote: true do %>
	<%= icon 'far', 'star' %>
<% end %>
views/boards/_unbookmark.html.erb
<%= link_to bookmark_path(current_user.bookmarks.find_by(board_id: board.id)),
            id: "js-bookmark-button-for-board-#{board.id}",
            class:"float-right",
            method: :delete,
            remote: true do %>
  <%= icon 'fas', 'star' %>
<% end %>

これにより、非同期処理にすることができた!

2.bookmarks_controllerを修正

現状のままだと、redirect_toが設定されているので、これを削除する

class BookmarksController < ApplicationController
  def create
    @board = Board.find(params[:board_id])
    current_user.bookmark(@board)
  end

  def destroy
    @board = current_user.bookmarks.find(params[:id]).board
    current_user.unbookmark(@board)
  end
end

3.ブックマークの切り替え処理を追加

ブックマーク時と解除時に、ブックマークのアイコンを切り替える処理をjavascriptで実装

views/bookmarks/create.js.erb
$("#js-bookmark-button-for-board-<%= @board.id %>").replaceWith("<%= j(render('boards/unbookmark', board: @board)) %>");
views/bookmarks/destroy.js.erb
$("#js-bookmark-button-for-board-<%= @board.id %>").replaceWith("<%= j(render('boards/bookmark', board: @board)) %>");