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

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

新規登録して質問してみよう
ただいま回答率
85.49%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

Q&A

解決済

1回答

623閲覧

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

ninjawanko3d

総合スコア5

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

1グッド

2クリップ

投稿2023/10/09 08:59

編集2023/10/23 20:43

この度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ファイルの2行目をコメントアウトし、3行目を追加してみました。
ブラウザを開いて所、先ほどと同じエラーメッセージが出ました。このエラーは私のあてにならない予想では、「ビューがないよ!」と怒られている気がします。
イメージ説明


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


10/19更新

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

次からエラー?というか失敗画像
図1
/app/viws/likes/_likesの12行目をクリックしたところ図1から図2のようになりました!
イメージ説明

ここで一番上のハートを押すと.....
l
l
l
図2
イメージ説明


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


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// 3点リーダーを押したときその投稿の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を用いてコードを書き換え図1のハートボタンを押したところ図3のようなビューに移行しました。

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

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

図3
イメージ説明


変更したコード

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字をオーバーするため質問を改めます

shinoharat👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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です!!!!なぜわかったのか、圧倒的知識量感謝します!!!
guest

回答1

0

ベストアンサー

エラーメッセージに 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 に乗っかる方がメリットが大きいと思いますので、大きな問題がなければこちらの方法をオススメします。

1・ 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 %>

2・ いいねボタンクリック時に 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 %>

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

diff

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

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

上記1~3の変更を加えれば、今の 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

総合スコア1674

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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様のご回答が私のモチベーションとなりました。 残念ながらこちらの質問が10000文字を超えてしまうため、こちらでの質問は閉鎖します。 改めてありがとうございます!!!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問