railsで非同期いいねシステムが作動しない

この度railsを用いて非同期いいねシステムを作ろうとしたのですが以下のようなエラーが発生してしまいました。

LikesController#create is missing a template for this request format and variant.
request.formats: ["text/html"]
request.variant: []

ソースコード

上図の青字は次の図の部分テンプレート

試しに、<%= link_to "/likes/#{post.id}/create", remote: true do %>を押してみたところ上図のようなエラーが出ました。ルーティング、コントローラー、js.erbファイルは下図

コントローラー

js.erbファイル

試してみたこと
下図のように変数postが悪さをしている要素を除外するためにjs.erbファイルの２行目をコメントアウトし、３行目を追加してみました。
ブラウザを開いて所、先ほどと同じエラーメッセージが出ました。このエラーは私のあてにならない予想では、「ビューがないよ！」と怒られている気がします。

いいねは保存できているようなのでcreateアクションには行っていると思います。
なぜこのようなエラーが生じるのでしょうか？ご教授お願いします。

10/19更新

ご回答のおかげにより以下のようなコードに書き換えさせていただいたところ、図２のようなエラー？が発生しました！

次からエラー？というか失敗画像
図１
/app/viws/likes/_likesの１２行目をクリックしたところ図１から図２のようになりました！

ここで一番上のハートを押すと.....
l
l
l
図２

このようになってしまいます”！！！
解決法はあるのでしょうか？！
ご教授お願いいたします！

ruby/Gamefile
1source "https://rubygems.org"
2git_source(:github) { |repo| "https://github.com/#{repo}.git" }
3
4ruby "3.2.2"
5
6# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
7gem "rails", "~> 7.0.4", ">= 7.0.4.3"
8
9gem 'jquery-rails'
10
11gem 'bootstrap', '~> 4.4.1'
12
13gem 'googleauth'
14
15gem 'dotenv-rails'
16
17gem 'omniauth', '1.9.1'
18
19gem 'omniauth-google-oauth2' 
20
21gem 'devise'
22
23# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
24gem "sprockets-rails"
25
26# Use sqlite3 as the database for Active Record
27gem "sqlite3", "~> 1.4"
28
29# Use the Puma web server [https://github.com/puma/puma]
30gem "puma", "~> 5.0"
31
32# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
33gem "importmap-rails"
34
35# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
36gem "turbo-rails"
37
38# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
39gem "stimulus-rails"
40
41# Build JSON APIs with ease [https://github.com/rails/jbuilder]
42gem "jbuilder"
43
44# Use Redis adapter to run Action Cable in production
45# gem "redis", "~> 4.0"
46
47# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
48# gem "kredis"
49
50# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
51# gem "bcrypt", "~> 3.1.7"
52
53# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
54gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
55
56# Reduces boot times through caching; required in config/boot.rb
57gem "bootsnap", require: false
58
59# Use Sass to process CSS
60# gem "sassc-rails"
61
62# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
63# gem "image_processing", "~> 1.2"
64
65group :development, :test do
66  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
67  gem "debug", platforms: %i[ mri mingw x64_mingw ]
68end
69
70group :development do
71  # Use console on exceptions pages [https://github.com/rails/web-console]
72  gem "web-console"
73
74  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
75  # gem "rack-mini-profiler"
76
77  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
78  # gem "spring"
79end
80
81group :test do
82  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
83  gem "capybara"
84  gem "selenium-webdriver"
85  gem "webdrivers"
86end
87

JavaScript/app/javascript/application.js
1// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
2
3
4import jQuery from "jquery";
5window.$ = window.jQuery = jQuery;
6import("jquery-ui-dist")
7import("./custom/jQuery1.js")
8

JavaScript/app/javascript/custom/jQuery1.js
1$(function(){
2    $(document).ready(function() {
3        $('#login-show').click(function(){
4            $('#login-modal, #overlay').fadeIn();
5        });
6        $('#overlay, .close-modal').click(function(){
7            $('#overlay, #login-modal').fadeOut();
8        });
9    });
10});
11
12$(function(){
13    $(document).ready(function() {
14        $('#posted-show').click(function(){
15            $('#posted-modal, #posted-overlay').fadeIn();
16        });
17        $('#posted-overlay, .close-modal').click(function(){
18            $('#posted-overlay, #posted-modal').fadeOut();
19        });
20    });
21});
22
23$(function(){
24    $(document).ready(function() {
25        $('.three-dot-leader').click(function(){
26            $('.posted-detail, .posted-detail-overlay').fadeIn();
27        });
28        $('.posted-detail-overlay').click(function(){
29            $('.posted-detail-overlay, .posted-detail').fadeOut();
30        });
31    });
32});
33
34const init = 4 //初期表示数
35const more = 4 //追加表示数
36
37// 初期表示数以降のリスト内容を非表示に
38$(".more-list div:nth-child(n+" + (init+1) + ")").hide()
39
40//初期表示数以下であればMoreボタンを非表示
41$(".more-list").filter(function(){
42    return $(this).find("a").length <= init
43}).find(".more-btn").hide() 
44
45// Moreボタンクリックで指定数表示
46$(".more-btn").on("click",function(){
47    let this_list = $(this).closest(".more-list")
48    this_list.find("div:hidden").slice(0,more).slideToggle()
49
50    if(this_list.find("div:hidden").length == 0){
51        $(this).fadeOut()
52    }
53})
54
55//　３点リーダーを押したときその投稿のid保存
56
57
58// 削除項目出すやつ各々表示
59

ruby/app/config/importmap.rb
1# Pin npm packages by running ./bin/importmap
2
3pin "application", preload: true
4pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"
5pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"
6pin_all_from 'app/javascript/custom', under: 'custom'
7

参考によろしくお願いします！！！

10/22更新

試しに<%= turbo %> 部分をコメントアウトしてみたのですが表示画面が同様に図2になりました泣

10/23更新

以下のサイトを参考にturboを用いてコードを書き換え図１のハートボタンを押したところ図３のようなビューに移行しました。

参考サイト
https://blog.aiandrox.com/posts/tech/2021/09/10/

https://zenn.dev/shita1112/books/cat-hotwire-turbo/viewer/turbo-streams-fetch

図３

変更したコード

erb/app/viws/likes/_likes
1<% if @posted %>
2    <% post = @posted %>
3<% end %>
4<%# turbo_stream.update :like_buttons do %>
5    <turbo_stream id="like_buttons">
6    <% if Liker.find_by(content: session[:user_id],content2: post.id) %>
7        <%= link_to "/likes/#{post.id}/destroy" do %>
8            <span class="fa fa-heart liked-btn"></span>
9        <% end%>
10    <% else %>
11        <%# link_to "/likes/#{post.id}/create", remote: true do %>
12        <%# 下記リンクをクリックしたとき、`like_buttons ` という名前の Turbo Frame を更新する %>
13        <%= link_to "/likes/#{post.id}/create" do %>
14            <span class="fa fa-heart unliked-btn"></span>
15        <% end %>
16    <% end %>
17    <div>
18        <%= Liker.where(content2: post.id).count %>
19    </div>
20    </turbo-frame>
21<%# end %>

ruby/app/controllers/likescontroller
1class LikesController < ApplicationController
2    before_action :authenticate_user
3    def create
4        @posted = Posted.find_by(id: params[:post_id])
5        @posts = Posted.all.order(created_at: :desc)
6        if  !Liker.find_by(content: session[:user_id], content2: params[:post_id])
7            @like = Liker.new(
8                content: session[:user_id],
9                content2: params[:post_id]
10            )
11            @like.save
12        end
13        render turbo_stream: turbo_stream.update(
14            'like-buttons',
15            partial: 'likes/likes',
16            locals: { post: @posted}
17        )
18        #format.html { render :_likes }
19        #render :_likes
20    end
21
22    def destroy
23        @like = Liker.find_by(
24            content: session[:user_id],
25            content2: params[:post_id]
26        )
27        @like.destroy
28        redirect_to("/")
29    end
30
31end

10000字をオーバーするため質問を改めます

FKM

2023/10/10 05:37

postという変数が悪さをしてるっぽいです。これだとMethodのpostと誤認識してるような。

ninjawanko3d

2023/10/12 10:06

コメントありがとうございます！どこのpostが悪さをしているでしょうか？！

FKM

2023/10/13 00:06 編集

検証はしきれていないんですが、render関数の部分でしょうか。ルーティングではgetになっていますけど、どうも命令している処理はpostっぽい気がします。上記エラーはミスタイプやメソッド違いなどでパスが存在しない場合に発生するものなので。

shinoharat

2023/10/13 07:09

タグは Rails 5 になってますが、実は Rails 7 を使っているんじゃないかなと思います。 Rails 7 の想定で回答を書きましたが、もし早とちりだったらすみません。

ninjawanko3d

2023/10/13 10:35

@FKM //上記エラーはミスタイプやメソッド違いなどでパスが存在しない場合に発生するものなので。コメントありがとうございます！そうなんですね！やはりパスが存在しないのですか.... 命令している処理がpostの場合なぜエラーが出るのでしょうか？！

ninjawanko3d

2023/10/13 10:37

@shinoharat コメントありがとうございます！ほんとだ！rails 7です！！！！なぜわかったのか、圧倒的知識量感謝します！！！

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

回答1件

ベストアンサー

エラーメッセージに request.formats: ["text/html"] とあるので、（Ajax リクエストではなく）通常の HTML リクエストになっているんだと思います。
つまり、いいねボタンの link_to につけた remote: true オプションが効いてなくて、普通のリンクになっているんじゃないかな、と。

その場合 create.js.erb ではなく create.html.erb を使おうとするので、「そんなファイルないよ！」とエラーになってしまいます。

remote: true というオプションを使うには、 @rails/ujs という JavaScript ライブラリが必要です。
このライブラリは、Rails 7 より前であれば、デフォルトで Rails に同梱されていました。
逆に言えば、 Rails 7 以降の場合は、手動で @rails/ujs を有効化しなければ remote: true を使えません。

Rails の API ドキュメントにも以下の解説が載っています。

Deprecated: Rails UJS Attributes

Prior to Rails 7, Rails shipped with a JavaScript library called @rails/ujs on by default. Following Rails 7, this library is no longer on by default. This library integrated with the following options:

(中略)

remote: true - This will allow @rails/ujs to make an Ajax request to the URL in question instead of following the link.

（引用元：ActionView::Helpers::UrlHelper#link_to | Rails API ）

Rails 7 で ujs を有効にする方法は、調べれば詳しい記事が出てくると思いますので、ここでは割愛させていただきます。

@rails/ujs を使わず、Rails 7 風の書き方（ Turbo ）に変えるという手段もあります。
非推奨となった ujs をわざわざ復活させるより、デフォルトで用意されている Turbo に乗っかる方がメリットが大きいと思いますので、大きな問題がなければこちらの方法をオススメします。

１・ ajax で書き換えたい箇所を `turbo_frame_tag` で囲う

diff
1### app/views/likes/_likes.html.erb ###
2
3+ <%# 第一引数の `like_buttons` は名前なので何でもOKです %>
4+ <%= turbo_frame_tag :like_buttons do %>
5    <% if Liker.find_by ... %>
6
7    ...(中略)...
8
9    </div>
10+ <% end %>

２・いいねボタンクリック時に Turbo Frame を更新するよう、オプションを追加

diff
1### app/views/likes/_likes.html.erb ###
2
3  <%= turbo_frame_tag :like_buttons do %>
4    <% if Liker.find_by ... %>
5      <%= link_to "/likes/#{post.id}/destroy" do %>
6        ...
7      <% end %>
8    <% else %>
9-     <%= link_to "/likes/#{post.id}/create", remote: true do %>
10+     <%# 下記リンクをクリックしたとき、`like_buttons ` という名前の Turbo Frame を更新する %>
11+     <%= link_to "/likes/#{post.id}/create", data: { turbo_frame: :like_buttons } do %>
12        ...
13      <% end %>
14    <% end %>
15
16    <div>
17      ...
18    </div>
19  <% end %>

３・create アクション後に更新する view を指定

diff
1### app/controllers/likes_controller.rb ###
2
3  def create
4    ...(中略)...
5
6+   render :_likes
7  end

４・不要なファイルを削除

上記１～３の変更を加えれば、今の create.js.erb は削除して大丈夫です。

おまけ

get でデータの作成・更新・削除を行うと、CSRF の脆弱性が生まれます。
create アクションなら post を、 destroy アクションなら delete を使うのがセキュリティ上安全です。

diff
1### routes.rb
2
3- get '/likes/:post_id/create' => 'likes#create'
4- get '/likes/:post_id/destroy' => 'likes#destroy'
5+ post '/likes/:post_id/create' => 'likes#create'
6+ delete '/likes/:post_id/destroy' => 'likes#destroy'

diff
1### app/views/likes/_likes.html.erb ###
2
3-     <%= link_to "/likes/#{post.id}/destroy" do %>
4+     <%= link_to "/likes/#{post.id}/destroy", data: { turbo_method: :delete } do %>
5
6-     <%= link_to "/likes/#{post.id}/create", data: { turbo_frame: :like_buttons } do %>
7+     <%= link_to "/likes/#{post.id}/create", data: { turbo_frame: :like_buttons, turbo_method: :post } do %>

以上です。
分からないことがあればまたコメントください。

投稿2023/10/13 07:07

編集2023/10/19 04:42

shinoharat

総合スコア1685

ninjawanko3d

2023/10/19 10:45

ご回答誠にありがとうございます！！！は～～～～rails7ではそういう手法があるのですね！！！ teratailでの文書の書き方もとても勉強になりますご回答通り編集させていただきましたところ編集したような画面になってしまいました泣

shinoharat

2023/10/19 13:42

追記ありがとうございます。『rails/ujs：無効　／　Turbo：有効』というのが私の見立てでしたが、症状を見る限り Turbo も有効になっていない気がします。お手数ですが、以下のファイルを質問文に追記していただけますか？・Gemfile ・app/javascript/ 配下の js ファイルすべて・config/importmap.rb

ninjawanko3d

2023/10/20 09:51

更新させていただきました！！！ご参考になれば幸いです

ninjawanko3d

2023/10/23 11:43

数々のアドバイス本当にありがとうございました！shinoharat様のご回答が私のモチベーションとなりました。残念ながらこちらの質問が１００００文字を超えてしまうため、こちらでの質問は閉鎖します。改めてありがとうございます！！！！！

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