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が動きました。

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

コメント

このブログの人気の投稿

投稿時間:2021-06-17 22:08:45 RSSフィード2021-06-17 22:00 分まとめ(2089件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)