⭐️ブックマークボタンのajax化

◉Ajaxとは

Ajaxとは、Webブラウザ上で非同期通信を行い、ページ全体の再読み込み無しにページを更新する方法のことです。

同期通信

同期通信では、クライアントはwebページ全体の情報(HTMLとそれに紐づくcss,js,imageなどのアセット)をサーバーから受け取って、ページを一から作り直します。
例えばページの一部を変更するだけなのに、他の部分も組み立て直すってことはその分ページの表示に時間がかかっちゃいます。(サーバー側の処理を待つことになる)

しかも、このリクエスト〜レスポンスの処理を行っている間は、他の処理を行わずにサーバーからレスポンスが返ってくるのを待ち続ける必要があります(よくあるのが画面が真っ白になって何もできない状態)。

そこでAjaxのような非同期通信を使用すれば、ページ遷移無しに、高速で更新処理を行い、尚且つ、リクエスト〜レスポンスの処理を行っている間も他の処理が行えます。

非同期通信の方法は2種類

この便利なAjaxによる非同期通信を行う方法としては、
①remote:true形式
②ajax関数を使った形式

今回はremote: true形式を使ってajax化していきます。

✅手順

1 . ブックマークコントローラを修正
2 . ブックマークボタンをajax化
3 . ブックマークボタンの切り替え処理を追加

・1 . ブックマークコントローラを修正

redirect先の指定 をコメントアウト

・2 . ブックマークボタンをajax化

ブックマークボタンのコードを記載している
app/views/boards/_bookmark.html.erb

app/views/boards/_unbookmark.html.erb

の
<%= link_to 略　%>に
remote: trueを追加。

# app/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 %>

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

上記の
id: "js-bookmark-button-for-board-#{board.id}"
を使って、下記viewファイルを作成。

# app/views/bookmarks/create.js.erb  

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

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

replaceWithは要素を置換するメソッド。

$(置換対象).replaceWith(置換後の要素)
パーシャルを読み込んで、置換している

j()はescape_javascriptのエイリアス

🟢総括

今回の課題を通して、Ajaxとは何かが分かりました。
自分が日頃、身近で使っているアプリでもよく搭載されているので、
次の課題を通してAjaxについてもっと理解を深めていきたいと思いました。
また、Javascriptの記法に対しても理解を深めていきたいです。