はじめに

いいね機能を非同期化する目的として、リアルタイムなフィードバックを行うこととユーザーエクスペリエンスの向上をあげると思ったのでこの記事を書こうと思いました。

開発環境(ざっくりと書きます)

ruby 3.2.0
Rails 7.0.8

やることの手順

1.gem "jquery-rails"を導入します

application.jsのファイル

//= require jquery
//= require rails-ujs
ここにもしbootstrapなど呼び込みの記述があってリンク先が邪魔しないように記述(自分の場合は最後に記述)

Gemfaileにgem "jquery-rails"を導入しbundle installを実行

2.まずいいね機能のrenderで呼び出す記述を書いておきます

_like.html.erb

<% if user_signed_in? && article.liked_by?(current_user)%>
  <%=link_to article_likes_path(article.id), method: :delete, class: "article_likes btn btn-outline-danger", remote: true do %>
    <i class="bi bi-heart-fill"></i>
  <% end %>
<% else %>
〜以下略

Rails7では非同期にしたい部分を動作した後、ログでページを見たときに~Controller#create as TURBO_STREAMとでたときに Rails 7.0 で導入された TurboDriveではdata: { turbo_method: :delete }と記述します。

今回はJSフォーマットが上記のdata: { turbo_method: :delete }じゃ自分の場合上記のエラーが出ました。 自分はそこをmethod: :deleteに変更後remote: trueを追加してas JSと送信したときにlikesのファイル内にあるcreate.js.erbとdestroy.js.erbを呼び出すために記述を変更してます。(createの場合はpost)

3.create.js.erbの中に部分的にページ更新せずに変化させたい部分の値を検証で確認してここに記述します。

create.js.erb

("#favorite_btn_<%= @article.id %>").html~以下略

上記のように記述することによりいいねボタンを押すとlikes_controllerのcreateアクションとdestroyアクションを行うとこのjsのファイルが呼び出されるようなアクションがログで確認できてページが更新されずに非同期でいいね機能が実装できます。(ボタンのidの値を検証で持ってくる必要あり。)

最後に

いいね機能のlikes_controllerの中身の記述方法などは省いていますがわかってなかった部分を記述したかったのでこのくらいにしておきます。(随時また違った場合は修正)

参考にした記事
Rails いいね機能の非同期通信化(Ajax)