お気に入り機能のajax化

備忘録です！！

##ajax化とは

ajaxとは、Asynchronous JavaScript + XML の略で、非同期通信と呼ばれる通信方法のことを指します。

クライアントとサーバー間の通信においては、通常、同期通信と呼ばれる方法が用いられ、一瞬画面が白くなった後、画面が切り替わるような通信は、全てこの同期通信です。

同期通信では、

クライアント　→　サーバーを呼び出す　→　サーバー側で処理が行われる　→（クライアント側では、処理を待っている）

→　クライアントに結果を返す

非同期では、

クライアント　→　サーバーを呼び出す　→　サーバー側で処理が行われる　→（クライアント側では、処理を待たずに他の操作ができる）

→　クライアントに結果を返す

同期通信では、サーバーにリクエストを送るとページ全体の情報を返すように処理され、サーバーかの応答があるまでその結果を待機し、結果を受け取った後に画面全体を切り替える処理を行うのです。
非同期通信では、一部の情報しか返さないように処理され、ユーザーに処理待ちの時間を与えずに、裏では随時通信が行われています。

今回は、ajax化を用いて、お気に入りボタンを押した時に、画面が切り替わることなく、ボタンの色だけが変化するようにしていきます。

##remote: true

Railsにおいてajax通信を実装する場合、主に二つの方法があります。

remote: trueを指定する方法
JSファイルに任意のタイミングでajax処理を発火させるように記述を施す方法
今回は、より手軽に実装できるremote: trueを使用する方法で実装してきます。

_bookmark.html.erb

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

_unbookmark.html.erb

<%= link_to board_bookmarks_path(board.id), id: "js-bookmark-button-for-board-#{board.id}", remote: true, method: :delete do %>
  <%= icon 'fas', 'star' %>
<% end %>

お気に入りボタンをremote: trueして、ajax化しました。

ajax化していない場合、呼び出しの際、HTMLリクエストを送信します。

ターミナル

# お気に入りボタンクリック時に下記のように表示
Processing by BookmarksController#create as HTML

今回のように、ajax化すると、JSリクエストを送信します。

ターミナル

# お気に入りボタンクリック時に下記のように表示
Processing by BookmarksController#create as JS

お気に入りボタンをクリックすると、アクションを経由し、create.js.erbやdestroy.js.erbファイルに向かいます。

##bookmarkコントローラーを修正

bookmarks_controller

before_action :set_board, only: %i[create destroy]
  def create
    @bookmark = current_user.bookmarks.build(board_id: params[:board_id])
    @bookmark.save
  end

  def destroy
    current_user.bookmarks.find_by(board_id: params[:board_id]).destroy!
  end

  private

  def set_board
    @board = Board.find(params[:board_id])
  end

##create.js.erbとdestroy.js.erbの作成

ajax化したので、bookmarkコントローラーは、create.js.erbとdestroy.js.erb
に向かいます。

bookmarks/create.js.erb

$("#js-bookmark-button-for-board-<%= @board.id %>").replaceWith("<%= escape_javascript(render 'boards/unbookmark', {board: @board}) %>");

bookmarks/destroy.js,erb

$('#js-bookmark-button-for-board-<%= @board.id %>').replaceWith("<%= escape_javascript(render 'boards/bookmark', {board: @board}) %>");

以上のように設定します。

bookmarks/create.js.erbでは、
お気に入りボタン（js-bookmark-button-for-board-<%= @board.id %>）を、クリックすると、boards/unbookmarkを呼び出しますよということを設定しています。

以上で設定完了です。