開発環境
- Rails 6.0.3.4
- yarn 1.22.4
目次
１）jQuery導入
２）uncaught reference error $ is not definedエラーの解決法
１） jQuery導入 >> 箇条書き
1. yarn add jquery でjqueryを導入
2. environment.jsへ webpackの設定ファイルにjQueryを管理下に追加する記述を書く
3. application.jsへ jQueryを呼び出すための記述を書く
4. application.html.erbへ javascriptの呼び出しが記述されているか念の為確認
１） jQuery導入 >> 詳しく解説
1. yarn add jquery でjqueryを導入
ターミナル
$ yarn init *補足：OSにHomebrewでyarnインストールをすでにされている場合は不要だと思います。
$ yarn add jquery
*補足：私は"yarn add jquery"だけで問題ないのですが、他の方の記事を確認したところ、"yarn init"を先に入力するという説明もあったので、補足として記載させていただきます。『Homebrewでyarnインストール』についてはこちらの記事が参考になると思います。
*補足2：
gem 'jquery-rails'をGemfileへ記述する方法もありますが、Rails6からはyarn addが推奨されているらしいです。今回は、Webpackerで管理するため、Node.jsのパッケージを利用しています。
2. environment.js
//この記述内容をコピペ（もともとの記述は削除でOK）
//これは、webpackの設定ファイルでjQueryを管理下に追加するための記述です。
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
})
)
module.exports = environment
3. application.js
// 省略
require("@rails/ujs").start()
require("turbolinks").start() //私はいつもコメントアウトします
require("@rails/activestorage").start()
require("channels")
require('jquery') //これを追記
// 省略
*補足：turbolinksはキャッシュを積極的に利用するため、ページがロードされてから起こるイベントがうまく動かないことがあります。私はjavascriptを使う上で少し厄介だなという認識なので、コメントアウト。(キャッシュを利用するとページの読み込み時間は短縮されるんですけどね)
4. application.html.erb ＊＊念のために確認
<!-- tourbolinksを削除する場合こうなります -->
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
ここまでがJqueryを導入するまでの一連の流れです。
2） $ is not definedエラーの解決法
$がnot defined（定義されていない）ということは、jQueryがうまく入れることができていないということなので、jQuery導入で説明した４ステップを確認すれば、解決するのではないかなと思います。
1. yarn add jquery でjqueryを導入
2. environment.jsへ webpackの設定ファイルにjQueryを管理下に追加する記述を書く
3. application.jsへ jQueryを呼び出すための記述を書く
4. application.html.erbへ javascriptの呼び出しが記述されているか念の為確認
以上です。