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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

1023閲覧

jqueryが本番環境で動作しない

tarotarotarotar

総合スコア41

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/11/21 04:24

大変お世話になっております。

こちらのページを参照しながら「いいね」機能を実装したものの、本番環境でjqueryが上手く動作せず解決できないでおります。
https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker/

いいねボタンを押すとハートマークが赤く光り、カウントが増えるというシンプルなものです。
また、EC2にてデプロイしております。
本番環境ではコンソールにて

GET http://54.248.141.122/packs/js/application-90b30bbd2543e35280af.js net::ERR_ABORTED 404 (Not Found)

というエラーが吐かれており、いいねボタンを押すと404エラーが発生します。
開発環境では問題なく動作しているのになぜでしょうか・・・

なお以下の手順でjqueryをインストールしております。

$ yarn add jquery

webpack/environment.js を編集

const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery' }) ) module.exports = environment

【app/javascript/packs/application.js】を編集

require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery") //←これを追記 require("../delete")

以上です。

どなたかお力を貸して頂ければ幸いです。

以下ご参考までに各コードです。

いいねボタンを実装するインデックスファイル

【index.html】

〜 <%= render partial: 'likes/like', locals: { nutrition: nutrition} %> 〜

【views/likes/_like.html.erb】

<div class="like-link" id="like-link-<%= nutrition.id %>"> <% if current_user.likes.find_by(nutrition_id: nutrition.id) %> <%= link_to unlike_path(nutrition.id), method: :delete, remote: true do %> <div class = "iine__button">❤️<%= nutrition.likes.count %></div> <% end %> <% else %> <%= link_to like_path(nutrition.id), method: :post, remote: true do %> <div class = "iine__button">♡️<%= nutrition.likes.count %></div> <% end %> <% end %> </div>

【views/likes/like.js.erb】

$("<%= @id_name %>").html("<%= j(render partial: 'likes/like', locals: {nutrition: @nutrition}) %>");

【views/likes/unlike.js.erb】

$("<%= @id_name %>").html("<%= j(render partial: 'likes/like', locals: {nutrition: @nutrition}) %>");

【app/javascript/packs/application.js】

// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. //= require jquery //= require rails-ujs //= require turbolinks //= require_tree . require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("../delete") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true)

ご指導頂ければ幸いです。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問