Rails6におけるいいねの非同期処理のエラー

Question

ご覧いただきありがとうございます。
長文で大変申し訳無いのですが、以下のエラーで困っており、
ご教授いただければ幸いです。

用途の都合上、roadという名前にしていますが、機能的には投稿機能です。

前提・実現したいこと

Ruby/Railsでいいね機能を実装しており、
機能自体は実装できたのですが、一つだけバグがあり修正方法がわからないでおります。

投稿の一覧画面(index)/詳細画面(show)において、いいねボタン(ハートアイコン)を押すと非同期でいいねボタンが色付き/色なしに切り替わる機能を実装したい。

発生している問題・エラーメッセージ

index/showページで「いいね」を押しても反応がないが、ページリロードで反映される。
押したとき、コンソール上で以下のエラーが発生している。

Started DELETE "/roads/1/likes" for ::1 at 2021-07-11 22:05:31 +0900
Processing by LikesController#destroy as JS
  Parameters: {"road_id"=>"1"}
  User Load (1.4ms)  SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 2], ["LIMIT", 1]]
  Like Load (1.4ms)  SELECT "likes".* FROM "likes" WHERE "likes"."user_id" = $1 AND "likes"."road_id" = $2 LIMIT $3  [["user_id", 2], ["road_id", 1], ["LIMIT", 1]]
  ↳ app/controllers/likes_controller.rb:12:in `destroy'
  TRANSACTION (0.9ms)  BEGIN
  ↳ app/controllers/likes_controller.rb:12:in `destroy'
  Like Destroy (1.0ms)  DELETE FROM "likes" WHERE "likes"."id" = $1  [["id", 7]]
  ↳ app/controllers/likes_controller.rb:12:in `destroy'
  Road Update All (1.1ms)  UPDATE "roads" SET "likes_count" = COALESCE("likes_count", 0) - $1 WHERE "roads"."id" = $2  [["likes_count", 1], ["id", 1]]
  ↳ app/controllers/likes_controller.rb:12:in `destroy'
  TRANSACTION (1.4ms)  COMMIT
  ↳ app/controllers/likes_controller.rb:12:in `destroy'
  Road Load (1.0ms)  SELECT "roads".* FROM "roads" WHERE "roads"."id" = $1 LIMIT $2  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/likes_controller.rb:13:in `destroy'
  Rendering likes/destroy.js.erb
  Rendered likes/destroy.js.erb (Duration: 5.0ms | Allocations: 4573)
Completed 500 Internal Server Error in 26ms (ActiveRecord: 8.3ms | Allocations: 10942)



ActionView::Template::Error (undefined local variable or method `road' for #<ActionView::Base:0x0000000000aca8>
Did you mean?  @road):
    1: document.getElementById('road-<%= road.id %>').innerHTML = '<%= j render("roads/dislike") %>'

app/views/likes/destroy.js.erb:1

該当のソースコード

<#% index.html.erb %>

<h1>投稿一覧</h1>
<%= link_to '新規投稿', new_road_path, class: 'btn' %>

<% @roads.each do |road| %>
  
　　　（略）

  <%= render partial: 'road', locals: {road: road} %>

  (略)
  <% end%>
<% end %>

<#% show.html.erb %>

 (略)
<%= render 'road', {road: @road} %>
 (略)

<#% _road.html.erb %>

<p id="road-<%= @road.id %>">
  <% if road.liked_by?(current_user) %>
    <%# 「いいね！」済み %>
    <%= render "like", road: road %>
  <% else %>
    <%# 「いいね！」していない %>
    <%= render "dislike", road: road %>
  <% end %>
</p>

<%# _like.html.erb %>

<%= link_to road_likes_path(road), class: "like-link", method: :delete, remote: true do %>
  <i class="fas fa-heart unlike-btn"></i>
<% end %>
<%= road.likes_count %>

<%#  _dislike.html.erb %>

<%= link_to road_likes_path(road), class: "like-link", method: :post, remote: true do %>
  <i class="far fa-heart like-btn"></i>
<% end %>
<%= road.likes_count %>

## Road.rb

class Road < ApplicationRecord
  has_many_attached :road_images
  has_many :comments
  has_many :likes, dependent: :destroy
  has_many :liked_users, through: :likes, source: :user
  belongs_to :user

  def liked_by?(user)
    likes.any?{ |like| like.user_id == user.id }
  end
end

## like.rb

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :road, counter_cache: :likes_count

  validates :user_id, uniqueness: {
    scope: :road_id,
    message: "は同じ投稿に2回以上いいねはできません",
  }
end

// create.js.erb
document.getElementById('road-<%= @road.id %>').innerHTML = '<%= j render("roads/like") %>'

// destroy.js.erb
document.getElementById('road-<%= @road.id %>').innerHTML = '<%= j render("roads/dislike") %>'

# roads_controller.rb

class RoadsController < ApplicationController

  def index
    @roads = Road.includes(:user, :likes).order(:created_at)
  end

  def show
    @road = Road.find(params[:id])
    @comments = @road.comments
    @comment = Comment.new
  end

  def new
    @road = Road.new
  end

  def create
    @road = Road.create(road_params)
  end

  def edit
    @road = Road.find(params[:id])
  end

  def update
    road = Road.find(params[:id])
    if params[:road][:road_image_ids]
      params[:road][:road_image_ids].each do |road_image_id|
        image = road.road_images.find(road_image_id)
        image.purge
      end
    end
    if road.update(road_params)
      flash[:success] = "編集しました"
      redirect_to roads_url
    else
      render :edit
    end
  end

  def destroy
    road = Road.find(params[:id])
    road.destroy
  end

  private
    def road_params
      params.require(:road).permit(:title, :description, :latitude, :longitude, :content, road_images: []).merge(user_id: current_user.id)
    end
end

# likes_controller.rb

class LikesController < ApplicationController
  def create
    current_user.likes.create!(road_id: params[:road_id])
    @road = Road.find(params[:road_id])
  end

  def destroy
    
    current_user.likes.find_by(road_id: params[:road_id]).destroy!
    @road = Road.find(params[:road_id])
  end
end

試したこと

エラーの指示通りにjs.erbのroadを@roadに修正修正すると、
以下のエラーが発生。

ActionView::Template::Error (undefined local variable or method `road' for #<ActionView::Base:0x0000000000b040>
Did you mean?  @road):
    1: <%= link_to road_likes_path(road), class: "like-link", method: :delete, remote: true do %>
    2:   <i class="fas fa-heart unlike-btn"></i>
    3: <% end %>
    4: <%= road.likes_count %>

_like.html.erbと_dislike.html.erbのroadを@roadに修正すると、
index.html.erbを開いた時に以下のエラー画面になる。
*showは正常に表示され、いいねボタンも非同期で動作するようになる。

ActionController::UrlGenerationError in Roads#index
Showing /Users/hiroto/Desktop/Portfolio/Tamari-Ba/app/views/roads/_like.html.erb where line #1 raised:

No route matches {:action=>"destroy", :controller=>"likes", :road_id=>nil}, possible unmatched constraints: [:road_id]
Did you mean?  road_likes_url

Extracted source (around line #1):

<%= link_to road_likes_path(@road), class: "like-link", method: :delete, remote: true do %>
  <i class="fas fa-heart unlike-btn"></i>
<% end %>
<%= @road.likes_count %>

Trace of template inclusion: #<ActionView::Template app/views/roads/_road.html.erb locals=["road"]>, #<ActionView::Template app/views/roads/index.html.erb locals=[]>

補足情報（FW/ツールのバージョンなど）

Ruby: 2.7.2
Rails: 6.1.3

Comments

[winterboum]

controller載せて

[husqy]

ありがとうございます！
controllerを載せさせて頂きました！
お手数をおかけしますが、ご確認お願いします。

Answer 1

js.erbの引数の書き方が間違ってました。

Answer 2

いいねを押したとき というのでそのつもりで質問を読んでいたら エラーでは destroy になっている。 いいねを外すときのエラーですね？

def destroy の road を @road にしてください

Comments

[husqy]

ご回答ありがとうございます！

説明が下手で申し訳ありません。
正確に言うと、いいね/いいね外し共に非同期が作動しません。
ページリロードすると反映されます。

> def destroy の road を @road にしてください
こちらはlikes_controllerのことでしょうか？
すでに@roadとなっておりますが、上記のように非同期処理が作動しません。

お手数をおかけしますが、ご確認いただければ幸いです。

[winterboum]

def destroy
road = Road.find(params[:id])
road.destroy
end
なってません

[husqy]

原因、自己解決できました！
アドバイスを頂いてありがとうございました！