【Rails】ajax化とは

##ajax化とは
Asynchronous JavaScript + XML の略で、非同期通信と呼ばれる通信方法のこと。
Webブラウザ上で非同期通信を行い、ページ全体の再読み込み無しにページを更新する。

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

ページが一瞬真っ白になってから表示されるまでの間は、ユーザーは他の操作を何もする事が出来ない。また、同期通信はページ全体を１から作成して表示させているので、どうしても表示までの時間がかかる。

◆非同期通信
一方、非同期通信では、クライアントからのリクエスト送信後、サーバーの処理中にも、ページ遷移無しに他の作業を行うことができる。

##Railsにおけるajax化の方法
非同期通信の方法は2種類あり、
①remote:true形式
②ajax関数を使った形式
の2パターンが存在するが、今回はremote:true形式を記載。

例として、掲示板のお気に入り(いいね)ボタンを押した時に、お気に入りの登録、解除を行うという仕組みをajax化していく。

1.コントローラーの設定
redirect先の指定をコメントアウト。

bookmarks_controller.rb

class BookmarksController < ApplicationController
    def create
        @board = Board.find(params[:board_id])
        current_user.bookmark(@board)
        # redirect_back fallback_location: root_path,success: t('user_sessions.boards.bookmarks.create.success')
    end

    def destroy
        @board = current_user.bookmarks.find(params[:id]).board
        current_user.unbookmark(@board)
        # redirect_back fallback_location: root_path,success: t('user_sessions.boards.bookmarks.destroy.success')
    end

end

2.ブックマークボタンをajax化
ブックマークボタンのコードを記載している
app/views/boards/_bookmark.html.erb
app/views/boards/_unbookmark.html.erb
この２つのコード内の<%= link_to ~　%>にremote: trueを追加。

remote: trueを指定することによって、AjaxでHTTPリクエストを送信するように設定される。
更に、html.erbファイルではなくjs.erbファイルをレンダリングしてくれる。

3.ブックマークボタンの切り替え処理を追加
指定したid属性を持つ部分を置き換える。それぞれブックマーク登録・解除に置き換えるよう記述。

$(置換対象).replaceWith(置換後の要素)
replaceWithは要素を置換するメソッド。

app/views/bookmarks/create.js.erb

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

app/views/bookmarks/destroy.js.erb

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

##参考記事
⭐️ブックマークボタンのajax化
【Rails】remote:true形式でAjax通信を行う(お気に入り登録機能のajax化)
【IT用語】 Ajaxとは？初心者向けに豊富な画像で仕組みを解説