13
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-06

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

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

13
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?