##Railsの初期セットアップでJQueryが読み込まれない
jQueryを使いたい場合は、head内でjQueryを記述するjsファイルを読み込む必要がありますが、RailsではデフォルトでjQueryが使えるようになっているため、特に何かする必要はありません。のはずが、JQueryを実装してみたところコンソール画面にこのようなエラーが
Uncaught ReferenceError: $ is not defined
JQueryのコードはこちら
window.addEventListener("load", function () {
$("li").on("click", function () {
$("li.selected").removeClass("selected");
$(this).addClass("selected");
});
});
JS自体は動作確認できていたのでおそらくJQueryが正しくローディングされていないようです。
##解決方法
###application.jsの見直し
Railsが自動で読み込んでくれないので手動で直していきます。
まずこちらのファイルを確認。
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
ここに次のコードを追加
//= require jquery
//= require jquery.turbolinks
ただ注意したいのが読み込まれる順番です。require_tree .の下に追加すると読み込みでまたエラーが出る可能性があるので上に足します。
//= require jquery
//= require jquery.turbolinks
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
###gemのアップデート
railsでJQueryを動かすgemをインストールします。
Gemfileに以下のコードを追加
gem 'jquery-rails'
gem 'jquery-turbolinks'
Gemfileを更新したので
$ bundle update
を実行します。
###Rails serverを立ち上げ直す
忘れると反映されません。
これで無事にJQueryが動きました。
根本的にどこに原因があるのかわかる方、いらっしゃいましたら教えていただけるとありがたいです。