質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.96%

railsのjs.erbを用いて非同期対応したいいね機能の実装

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 263

score 0

前提・実現したいこと

Ruby on Rails使って開発しています。

ruby '2.6.5'
gem 'rails', '~> 6.0.0'
gem 'mysql2', '>= 0.4.4'

非同期通信を用いた「いいね」機能の実装

具体的には
未「いいね」をクリックするとLikesテーブルにデータがcreateされます。
既「いいね」をクリックするとLikesテーブルのデータがdeleteされます。

これらの処理を非同期で行いたいです。

各モデルのアソシエーションは下記です。

  has_many :posts
  has_many :comments
  has_many :likes

  def liked_by?(post_id)
    likes.where(post_id: post_id).exists?
  end
  belongs_to :user
  has_many :likes, dependent: :destroy
  has_many :comments, dependent: :destroy
  has_one_attached :image
  belongs_to :user
  belongs_to :post


likeテーブルにはシンプルにuser_idとpost_idのみ付与しています。

下記ルーティングです。

Rails.application.routes.draw do
  devise_for :users
  root to: 'posts#index'
  resources :users, only: [:show]
  resources :posts, only: [:new, :create, :show, :edit, :update, :destroy] do
    resources :comments, only: [:create]
  end
  post 'like/:id' => 'likes#create', as: 'create_like'
  delete 'like/:id' => 'likes#destroy', as: 'destroy_like'
end
class LikesController < ApplicationController

  before_action :post_params

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

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

  private

  def post_params
    @post = Post.find(params[:id])
  end
end

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

ローカルサーバー上で出ているエラー文です

エラーメッセージ
ActionView::Template::Error (Missing partial posts/_post with {:locale=>[:en],
 :formats=>[:js, :html, :text, :css, :ics, :csv, :vcf, :vtt, :png, :jpeg, :gif,
 :bmp, :tiff, :svg, :mpeg, :mp3, :ogg, :m4a, :webm, :mp4, :otf, :ttf, :woff, :woff2,
 :xml, :rss, :atom, :yaml, :multipart_form, :url_encoded_form, :json, :pdf, :zip, 
:gzip], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :jbuilder]}. 
Searched in:
  * "/Users/name/projects/moovook/app/views"
  * "/Users/name/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/devise-4.7.3/app/views"
  * "/Users/name/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/actiontext-6.0.3.4/app/views"
  * "/Users/name/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/actionmailbox-6.0.3.4/app/views"
):
    1: <%# alert('いいねを解除できている!'); %>
    2: document.getElementById('post_<%= @post.id %>').innerHTML = '<%= j(render @post) %>'

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

該当のソースコード

下記viewファイル

<ul class="contents">
  <% @posts.each do |post| %>
    <li class="content" id="post_<%= post.id %>">
      <%= link_to image_tag(post.image,size: '180x250'), post_path(post.id),method: :get %>
      <div class="book-name">
      <%= post.book_name %>
      </div>
      <div class="category-name">
      <%= post.category.name %>
      </div>
      <div class="user-name">
      <%= post.user.name %>
      </div>
      <div id="like-btn-<%= post.id %>">
      </div>
      <% if current_user.liked_by?(post.id) %>
        <td><%= link_to 'いいね外す', destroy_like_path(post), method: :DELETE, remote: true %> <%= post.likes.count %></td>
      <% else %>
        <td><%= link_to 'いいねする', create_like_path(post), method: :POST, remote: true %> <%= post.likes.count %></td>
      <% end %>
    </li>
  <% end %>
</ul>
<div class="wrap">
  <%= render "posts" %>
</div>

下記js.erbファイル

document.getElementById('post_<%= @post.id %>').innerHTML = '<%= j(render @post) %>'
document.getElementById('post_<%= @post.id %>').innerHTML = '<%= j(render @post) %>'

試したこと

テンプレートのエラーだと思い、<li class="content" id="post_<%= post.id %>">から下層のコードをindex.hyml.erbに外部テンプレートとして呼び出したりしましたが、エラー分は変わりませんでした。
コンソールを見ると、node.jsの方でエラーが起きていたりするので、単純にrailsのバージョンの問題でしょうか...

恐れ入りますがご回答いただけると幸いです...

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

下記のブログを参考にいいね機能の実装をしていました。

https://techtechmedia.com/favorite-function-rails/#i-6

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.96%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る