2
0

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 3 years have passed since last update.

「is not defined」 jQuery導入時のエラーの解消例

Last updated at Posted at 2021-01-28

#前提
・jQueryをインストールしていること
(インストールついての詳細はjQueryの公式ページにて確認。)

・筆者が使用しているバージョンの詳細
jQueryのバージョン "jquery": "^3.5.1"
rubyのバージョン ruby-2.6.5
Railsのバージョン Rails:6.0.0

・表題のエラーが起きる理由はケースバイケースで、今回のケースはあくまでも例の1つ。

「is not defined」のエラー例とその解消の詳細がわかりやすく書いてあるサイト↓
https://for-someone.com/blog/4792/

#結論
自身の記述内容のjQueryのバージョンと、インストールしていたjQueryのバージョンに差異が、「is not defined」のエラーの原因。
→インストールしたバージョンのjQueryのscriptをviewのhead内にコピペで置き換えることでエラー解消できる。

#エラー画面
image.png

#エラーが起こるまでの経緯
フォロー機能を実装するにあたり、jQueryを使用するため公式ページに沿ってjQueryをインストールした。

コーディング完了し、挙動確認する際、フォーローのカウントが実装できていることを確認

しかし、フォローボタンをクリックするタイミングで色が変色するよう発火の記述をしていたが変色しない。

ブラウザを更新するとボタンの色が変色する

コンソールを開き、挙動確認すると、「is not defined」のエラーが起こる

image.png
↓(ブラウザ更新しないと変色できない)
image.png

#エラー解消方法
①jQueryのバージョンの確認はpackage.jsonで確認
image.png

image.png

②「jQueryのバージョン script」ブラウザ上で検索

③サイト内の適したjQueryのバージョンのscriptをコピー

④自身のviewのhead内にペースト
(筆者はapp/view/layouts/application.html.erbのhead内に記述)

⑤挙動確認→OK

#まとめ
インストールしたバージョンのjQueryのscriptをviewのhead内にコピペで置き換えることでエラー解消

2
0
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?