jqueryが読み込まれない

前提・実現したいこと

jqueryを読み込んで、console.logでデバックができるようにしたい。

現在jqueryでコードを書いているんですが、コードが正しいかどうか確認するために検証でconsole.logを実行してみたところ、jqueryがうまく読み込まれていないのか、コードが機能していない状況です。

バージョン
ruby '2.5.7', 'rails', '~> 5.2.4', '>= 5.2.4.3'です

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

検証画面でconsole.logを実行したときに表示されるエラー文

GET http://localhost:3000/credit_cards/credit_cards.js net::ERR_ABORTED 500 (Internal Server Error)

該当のソースコード

application.html

ruby
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>SampleApp</title>
5    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
6    <script>{src="https://js.pay.jp", type="text/javascript"}</script>
7    <script src="credit_cards.js"></script>

jqueryで表示させたい

let hello = 'こんにちは';
console.log(hello);

本来は以下のコードで、cardが定義されているか確認したかったのです。
そこで、console.logを実行したところ、undefinedエラーが出たためにエラー原因を探っていると、そもそもjqueryが読み込まれていないのではないかとなりました。

$(function() {
  Payjp.setPublicKey('pk_test_d9d5358cfdfab733fb8af0ef');
  $("#cardForm").on('click', function(e) {
    e.preventDefault();

    let card = {
      number: $('#card-number').val(),
      cvc: $('#cvc').val(),
      exp_month: $('#card-month').val(),
      exp_year: $('#card-year').val()
    };

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

試したこと

jqueryが読み込まれるようにscriptした

<script src="credit_cards.js"></script>

このコードにどうやら問題あるみたいだが、なぜ？かわからない
gem 'jquery-rails'は導入している

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

回答2件

ベストアンサー

gem 'jquery-rails'は導入している

とのことなので、適切な形でjquery3を読み込めるか確認ください。
参考：jquery-rails公式　https://github.com/rails/jquery-rails

ruby
1# app/assets/javascripts/application.js
2
3//= require rails-ujs
4//= require activestorage
5//= require turbolinks
6//= require_tree .
7//= require jquery3 # ←追加
8//= require jquery_ujs # ←追加
9
10console.log('you did it!') # ←追加(テスト用)

ruby
1# application.html
2
3# 下記を削除
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
5# 下記はタイポなのでしょうか？
6<script>{src="https://js.pay.jp", type="text/javascript"}</script>
7

上記を実行してconsoleでyou did itが表示されるか確認してみてください。

またannnaPandaさんもおっしゃっているように、turbolinksを利用する場合は、必ず下記を利用してください。

jQuery
1document.addEventListener("turbolinks:load", function(){
2    ...ここに$(function() {})を記載する
3})

投稿2020/08/25 13:26

no1knows

総合スコア3365

susume

2020/08/25 14:16

ご回答いただきありがとうございます。上記を実行し、you did it!が読み込まれることを確認いたしました。 <script>{src="https://js.pay.jp", type="text/javascript"}</script> タイポ？とはタイプミスという認識でよろしいでしょうか？こちらは、payjpを利用するために記事を参考にしてコードを書いています。コピペしたので、タイプミスではないと思うのですが... また、console.logでyou did it!は確認されましたが、質問にあるようにlet cardで定義された内容を確認したいが、 ``` let card = { number: $('#card-number').val(), cvc: $('#cvc').val(), exp_month: $('#card-month').val(), exp_year: $('#card-year').val() }; console.log(card); ``` このようにしてもデバックできなかったので、どのようにcardのデータをデバックすれば良いのかご教示いただきたいです。

no1knows

2020/08/25 14:49

> こちらは、payjpを利用するために記事を参考にしてコードを書いています。あぁ、こういう書き方があるのですね。ありがとうございます。勉強になります。ひとまず、let cardのコードをapplication.jsに記載してみてください。またcredit_cards.jsの読み込みはできているのでしょうか？（パスは合っていますか？）

susume

2020/08/25 15:30 編集

>ひとまず、let cardのコードをapplication.jsに記載してみてください。 application.jsでは、cardのデータは取り出せました。 ``` let card = { number: $('#card-number').val(), cvc: $('#cvc').val(), exp_month: $('#card-month').val(), exp_year: $('#card-year').val() }; console.log(card); ``` application.jsに記述するとcard情報が正しくデバックできますが、credit_cards.jsでデバックするとうまくデバックできないので、credit_card.jsのパスが正しく設定できていないようです。 application.html.erbには、bodyタグ内に <script src="app/javascripts/credit_cards.js"></script> こちらを記述してcredit_cards.jsが読み込まれるように設定しているのですが、うまく読み込んでくれません。ファイル名とsrcの名前は一致しているので、問題ないかとは思うのですが... パスとは、ファイル名とsrcで読み込む名前が一致しているかということでしょうか？

no1knows

2020/08/25 22:59 編集

パスが問題のようですね。パスとは：https://wa3.i-3-i.info/word1166.html <script src="credit_cards.js"></script>で読み込むなら、public/credit_cards.jsにファイルを設置するとうまくいくはずです。またRails5であれば、アセットパイプラインを利用して実装するのがおすすめです。 app/assets/javascripts/以下にcredit_cards.jsを配置。（javascriptフォルダーがない場合は作成）ヘッダーの<script src="credit_cards.js"></script>を削除。なぜアセットパイプラインが良いかはご自身で調べてみてください。

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