非同期通信の実装（いいね機能）
非同期通信の実装
非同期通信とは
送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式を指します。
実際の例としては、Twitterのいいね機能など、いいねを押した際に画面の遷移なく押した瞬間にいいねが反映されていると思います。
そのような通信を非同期通信と言います。
逆に、今まで導入してきたようにデータ受信後タイミングに合わせて通信を行う通信方式を同期通信と言います。
実装内容
今回は、以前に作成したいいね機能・コメント機能に非同期通信を実装していきます。（この記事ではいいね機能の実装を行う。）
参考URL いいね機能 - takifugu’s blog
実装手順
ajax処理をするための記述を追加する(remote :true)
部分テンプレートを読み込む箇所にクラス名の記述
いいね機能実行後リダイレクト先を変更(favoriteコントローラ)
replace_favorite.js.erbの作成
前提条件
jQuery導入済み（yarnでインストール)
導入方法参考URL https://nomad.office-aship.info/rails-yarn-jquery/
いいね機能の非同期通信の実装
Ajax処理をするための記述を追加する(remote :true)
Ajaxについては下記URL参照。
https://developer.mozilla.org/ja/docs/Web/Guide/AJAX
いいね機能の際に作成した部分テンプレート_favorite.html.erbに記述を追加していく。
app/views/favorites/_favorite.html.erb
<% if book.favorited_by?(current_user) %>
<%= link_to book_favorites_path(book), method: :delete, remote: true, style: "color: red;" do %>#remote: true追加
<i class="fas fa-heart" aria-hidden="true"></i>
<%= book.favorites.count %>
<% end %>
<% else %>
<%= link_to book_favorites_path(book), method: :post, remote: true do %>#remote: true追加
<i class="fas fa-heart" aria-hidden="true"></i>
<%= book.favorites.count %>
<% end %>
<% end %>
remote: trueを記述することで、非同期通信処理を実行するようになります。
部分テンプレートを読み込む箇所にクラス名の記述
部分テンプレートを読み込む箇所にクラス名を記述していく。
： <td class=<%= "favorite-" + book.id.to_s %> > #クラス名の追加 <%= render 'favorites/favorite', book: book %> </td> ：
いいね機能実行後リダイレクト先を変更(favoriteコントローラ)
favoriteコントローラのcreateアクションとdestroyアクションの記述を変更する。
app/controllers/favorites_controller.rb
class FavoritesController < ApplicationController
def create
book = Book.find(params[:book_id])
@favorite = current_user.favorites.new(book_id: book.id) #インスタンス変数に変更
@favorite.save #インスタンス変数に変更
render 'replace_favorite' #記述を変更
end
def destroy
book = Book.find(params[:book_id])
@favorite = current_user.favorites.find_by(book_id: book.id) #インスタンス変数に変更
@favorite.destroy #インスタンス変数に変更
render 'replace_favorite' #記述を変更
end
end
非同期通信の状態で、renderの記述をすると、html.erbではなくjs.erbを探しにいく。
この状態では、replace_favorite.js.erbのファイルを探しにいきます。
replace_favorite.js.erbの作成
views/favoritesフォルダにreplace_favorite.js.erbファイルを作成し、記述していく。
app/views/favorites/replace_favorite.js.erb
$('.favorite-<%= @favorite.book_id %>').html("<%= j(render 'favorites/favorite', book: @favorite.book ) %>")
jQueryの基本構文
$("セレクタ").メソッド("パラメータ[引数]");
セレクタには変更する箇所のクラス名の指定をする（「id」やクラス、グループなどの記述が可能。）
今回使用するメソッドは.html()で、指定のHTMLに変更するというメソッドである。
そのため、今回であれば、実行すると下記のようにビューファイルが書き換えられる。
#実行前 <td class=<%= "favorite-" + book.id.to_s %> > <%= render 'favorites/favorite', book: book %> </td> #実行後 <td class=<%= "favorite-" + book.id.to_s %> > <%= render 'favorites/favorite', book: @favorite.book %> </td>
以上でいいね機能の非同期通信が完了。
次は、コメント機能に非同期通信を実装していく。
