[Ruby on Rails] いいね機能のハートマークが非同期通信されない

前提・実現したいこと

投稿した記事にいいね❤️をつけられるアプリを制作しております。

いいね❤️ボタンを押すと、非同期にてハートの色が黒♡から赤❤️に変化し
いいねの数も変動するように設定したいです。

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

show.html.erb

Console

POST http://localhost:3000/articles/1/likes 500 (Internal Server Error)
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.ajax @ rails-ujs.js:216
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.handleRemote @ rails-ujs.js:652
(anonymous) @ rails-ujs.js:172

いいね機能を配置している投稿の詳細画面にて、ハートが黒の状態でいいねボタンを押すとconsole上でこのように表示されて、ボタンに変化は起きません。

しかしリロードボタンを押すと、ハートの色もいいねの数も更新されます。
likesテーブルにも、いいねを押したuser_idや、いいねされた記事のidなどしっかり保存されています。

またいいねされている状態のボタンを、再度押すと
今度は非同期でハートの色が黒に戻り、いいねの数も1つ減少します。

つまり現状、いいねボタンを黒から赤に変え、いいねの数を増やすcreateアクションは非同期化されてなく
赤から黒に変え、いいねの数を戻すdestroyアクションは非同期化できているという状態です。

現状の動画

いいね機能に関するソースコード

create_likes_rb

class CreateLikes < ActiveRecord::Migration[6.0]
  def change
    create_table :likes do |t|
      t.references :user,    foreign_key: true
      t.references :article, foreign_key: true
      t.timestamps
    end
  end
end

※いいねの数をカウントする"likes_count"カラムは、articlesテーブルに追加しています。

各モデル

user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_many :articles
  has_many :comments, dependent: :destroy
  has_many :likes, dependent: :destroy
  has_many :like_articles, through: :likes, source: :article 
end

article.rb

class Article < ApplicationRecord
  belongs_to :user
  has_many :comments, dependent: :destroy
  has_many :likes, dependent: :destroy
  has_many :liking_users, through: :likes, source: :user
end

like.rb

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :article, counter_cache: :likes_count
end

ルーティング

routes.rb

Rails.application.routes.draw do
  devise_for :users, controllers: {
    registrations: 'users/registrations'
  }
  root to: "articles#index"
  resources :articles do
    resources :comments, only: [:create, :destroy]
    resources :likes, only: [:create, :destroy] ##追記部分##
    collection do
      get 'search'
    end
  end
  resources :users, only: [:show, :edit, :update]
end

コントローラー

likes_controller.rb

class LikesController < ApplicationController
  before_action :set_variables, only: [:create, :destroy]

  def create
    like = current_user.likes.new(article_id: @article.id)
    like.save
  end

  def destroy
    like = current_user.likes.find_by(article_id: @article.id)
    like.destroy
  end

  private 

  def set_variables
    @article = Article.find(params[:article_id])
    @id_name = "#like-link-#{@article.id}"
  end
end

部分テンプレート

views/articles/show.html.erb

<%= render partial: 'articles/articles', locals: { article: @article } %>

views/articles/_articles.html.erb

<%= render 'likes/like', article: article %>

views/likes/_like.html.erb

<% if user_signed_in? %>
  <div class="like-link" id="like-link-<%= article.id %>">
    <% if current_user.likes.find_by(article_id: article.id) %>
      <%= link_to article_like_path(article.id), method: :delete, remote: true do %>
          <div class = "iine__button">❤️<%= article.likes.count %></div>
      <% end %>
    <% else %>
      <%= link_to article_likes_path(article.id), method: :post, remote: true do %>
          <div class = "iine__button">♡️<%= article.likes.count %></div>
      <% end %>
    <% end %>
  </div>
<% end %>

ajaxを使った非同期化

views/likes/create.js.erb

$("<%= @id_name %>").html('<%= escape_javascript(render("likes/like", article: @article  )) %>');

views/likes/destroy.js.erb

$("<%= @id_name %>").html('<%= escape_javascript(render("likes/like", article: @article  )) %>');

各applicationファイル

javascript/packs/application.js

require("@rails/ujs").start()
//= require jquery3     ##追記部分##
//= require rails-ujs        ↓
//= require_tree .           ↓
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('../preview')

views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>GetReadySauna</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all'%>
    <%= javascript_pack_tag 'application' %>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>  ##追記部分##
  </head>

  <body>
    <%= yield %>
  </body>
</html>

試したこと

jQueryをGemfileに導入し、bundle installをしたのち、application.jsにjQueryを使用するための必要事項と思われるものを記載しました。

しかし非同期通信が行われなかったので、application.html.erbに ##追記部分## を記述したところ
destroyアクションだけは非同期で動くようになりましたが、createアクションは変わらず非同期では動きません。

どうすればcreateアクションも非同期になるのかわからず、路頭に迷っています。。。
どうかお力添えのほど、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

自己解決

スクール同期の方々にご教授いただき、解決することができました。

まず、jQueryのインストール方法から違いました。

【Rails6】Webpackerを用いてjQueryをインストールする手順を簡単にまとめてみた

上記の記事を参考にして、インストールをし直しました。

コントローラー

likes_controller.rb

class LikesController < ApplicationController
  before_action :set_variables, only: [:create, :destroy]

  def create
    Like.create(user_id: current_user.id, article_id: params[:id])
  end

  def destroy
    Like.find_by(user_id: current_user.id, article_id: params[:id]).destroy
  end

  private 

  def set_variables
    @article = Article.find(params[:id])
  end
end

部分テンプレート

views/articles/show.html.erb

<div class="like-link" id="like-link-<%= @article.id %>">
    <%= render partial: 'likes/like', locals: { article: @article } %>
</div>

views/likes/_like.html.erb

<% if user_signed_in? %>
  <% if current_user.likes.find_by(article_id: @article.id) %>
    <%= link_to destroy_like_path(@article.id), method: :delete, remote: true do %>
        <div class = "iine__button">❤️<%= @article.likes.count %></div>
    <% end %>
  <% else %>
    <%= link_to create_like_path(@article.id), method: :post, remote: true do %>
        <div class = "iine__button">♡️<%= @article.likes.count %></div>
    <% end %>
  <% end %>
<% end %>

jsファイル

views/likes/create.js.erb
views/likes/destroy.js.erb

$('#like-link-<%= @article.id %>').html("<%= j(render partial: 'likes/like', locals: { article: @article }) %>");

applicationファイル

javascript/packs/application.js

require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('../preview')
require('jquery')

views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>GetReadySauna</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all'%>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

他にも訂正したところがありますが、大きく変更を加えたのはこの辺りです。
ほとんどのファイルの記述をシンプルにして、部分テンプレートのインスタンス変数の定義場所なども改めて記述し直しました。

あとはコントローラーの、Likeをlikeと頭文字を小文字にしていたのもエラーの原因の1つでした。。
解決に協力してくださった方々、本当にありがとうございました！！

投稿2021/03/23 11:11

akayoshi

総合スコア0