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.turbolinks

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

app/assets/javascripts/application.js

//= require jquery
//= 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が動きました。

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