Railsの作成中に Uncaught ReferenceError: $ is not defined がでた

Railsの作成中に Uncaught ReferenceError: $ is not defined がでた:

Railsの初期セットアップでJQueryが読み込まれない

jQueryを使いたい場合は、head内でjQueryを記述するjsファイルを読み込む必要がありますが、RailsではデフォルトでjQueryが使えるようになっているため、特に何かする必要はありません。のはずが、JQueryを実装してみたところコンソール画面にこのようなエラーが

Uncaught ReferenceError: $ is not defined

JQueryのコードはこちら

sample.js

window.addEventListener("load", function () { 
   $("li").on("click", function () {   
      $("li.selected").removeClass("selected"); 
      $(this).addClass("selected"); 
   }); 
}); 

JS自体は動作確認できていたのでおそらくJQueryが正しくローディングされていないようです。

解決方法

application.jsの見直し

Railsが自動で読み込んでくれないので手動で直していきます。

まずこちらのファイルを確認。

app/assets/javascripts/application.js

//= require rails-ujs 
//= require activestorage 
//= require turbolinks 
//= require_tree . 

ここに次のコードを追加

//= require jquery 
//= require jquery_ujs 
//= require jquery.turbolinks 

ただ注意したいのが読み込まれる順番です。require_tree .の下に追加すると読み込みでまたエラーが出る可能性があるので上に足します。

app/assets/javascripts/application.js

//= require jquery 
//= require jquery_ujs 
//= require jquery.turbolinks 
//= require rails-ujs 
//= require activestorage 
//= require turbolinks 
//= require_tree . 

gemのアップデート

railsでJQueryを動かすgemをインストールします。

Gemfileに以下のコードを追加

Gemfile

gem 'jquery-rails' 
gem 'jquery-turbolinks' 

Gemfileを更新したので
$ bundle update

を実行します。

Rails serverを立ち上げ直す

忘れると反映されません。

これで無事にJQueryが動きました。

根本的にどこに原因があるのかわかる方、いらっしゃいましたら教えていただけるとありがたいです。