開発環境

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

app/config/webpack/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

app/javascript/packs/application.js

// 省略
require("@rails/ujs").start()
require("turbolinks").start()  //私はいつもコメントアウトします
require("@rails/activestorage").start()
require("channels")
require('jquery') //これを追記
// 省略

__*補足：__turbolinksはキャッシュを積極的に利用するため、ページがロードされてから起こるイベントがうまく動かないことがあります。私はjavascriptを使う上で少し厄介だなという認識なので、コメントアウト。(キャッシュを利用するとページの読み込み時間は短縮されるんですけどね)

##　4. application.html.erb　＊＊念のために確認

app/view/layouts/application.html.erb


<!-- tourbolinksを削除する場合こうなります -->
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>

ここまでがJqueryを導入するまでの一連の流れです。

#2） $ is not definedエラーの解決法
$がnot defined（定義されていない）ということは、jQueryがうまく入れることができていないということなので、jQuery導入で説明した４ステップを確認すれば、解決するのではないかなと思います。

以上です。