Rails jQueryやJavaScriptが使用できない。

Question

Rails(バージョンRails 6.0.3.5)でjQueryとJavaScriptを使用したいのですが、どうしても反映されません。
簡潔にjQueryの導入方法を解説している、
こちらhttps://www.sejuku.net/blog/57790のサイトの手順通りに進めてみましたが、
反映されませんでした。
ご回答頂けますと幸いです。

#困っていること
jQueryとJavaScriptが、railsで使用できない。
現在は、簡単なjQueryの導入を試みております。
Javascriptの導入よりも簡単？と考えたためです。

#Viewファイル

#ブラウザに、「jQuery稼働テスト(稼働中)」と表示させたいが、jQueryが反応しないため、
#pタグ内の文字列がそのまま表示されてしまう。(「jQuery稼働テスト」と表示される。)

<p>jQuery稼働テスト</p>
<script type="text/javascript">
  $(document).ready(function() {
    $("p").text("jQuery稼働テスト(稼働中)");
  });
</script>

ブラウザでのエラーメッセージとして、「edit:48 Uncaught ReferenceError: $ is not defined」が表示されています($(document).ready(function().... に対してのエラーメッセージ）

#試していること
1,Gemfileにgem 'jquery-rails'を記入して、$ bundle installコマンドを実行した。

2,app/javascript/packs/application.js内に、//= require jqueryと//= require jquery_ujsを記入

#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 jquery_ujs

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// 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)

以上の通り試したのですが、jQueryは反応せずです。(ブラウザ上に表示されるのは、「jQuery稼働テスト」という文字列です)
恐れ入りますが、解決策をご教示頂けますと幸いです。
何卒よろしくお願いいたします。

Answer 1

//= require jqueryと//= require jquery_ujsを記入

これは、/app/assets以下にあるJavaScript向けの記法です。/app/javascript/以下にあるJavaScriptでは、別のやり方を取る必要があります。

---

現在は、簡単なjQueryの導入を試みております。

Javascriptの導入よりも簡単？と考えたためです。

jQueryもJavaScriptで書かれたライブラリの1つです。

Comments

[gussan-me]

ありがとうございます！

[shinoharat]

require("turbolinks").start() と記載されているのがちょっと気になります。
もし turbolinks と jquery を併用するなら、

$(document).ready(function { ... });

ではなく、

$(document).on('turbolinks:load', function() { ... });

と記載する必要があります。

[gussan-me]

shinoharat様
なるほど。。ご確認いただきありがとうございます！
頂いた内容が勉強不足だったため、
下記の記事で勉強させていただきました。
https://techtechmedia.com/turbolinks-rails/

よろしくお願いいたします。

[shinoharat]

記事を確認しました。
分かりやすくまとまっていて良い記事ですね。

そこに書いてある通り、

・Turbolinks は画面描画を高速化させるライブラリ（デフォルトで有効になっている）

・jQueryのreadyイベントが発火しないので、
　　①「turbolinks: load」を使用する
　　③TurbolinksをOFFにする
　のどちらかが必要

です。

[gussan-me]

ありがとうございます。
大変勉強になりましたm(_ _)m