【Rails】Uncaught ReferenceError: $ is not definedを解消した話

エラーが発生した経緯

Railsで非同期通信を用いたチャット機能を作成するにあたり、メッセージ送信時にjs.erbファイルを呼び出すところまでは成功していた。(js.erbファイルにconsole.logで記述した内容が、検証ツールのconsoleで出力されることを確認)

しかしいざ$('.message').append〜のような記述をしてメッセージを送信しようとすると、検証ツールのconsoleにUncaught ReferenceError: $ is not definedというエラー文が表示されてしまい、非同期通信ができない。

結論：エラーの原因

「$なんて変数名存在しないよ！」とエラー文で言われている通り、
jQueryを導入できていないことが原因でした。

jQueryの導入方法

①jQueryを導入したいアプリケーションのターミナルで下記コマンドを実行

% yarn add jquery

②念の為、jQueryの記述が追加されているかどうか、次の2つのファイルの中身を確認する
・package.json => "jquery": "^3.3.1"
・yarn.lock => jquery@^3.3.1:

※ファイルを開いた状態で⌘＋Fを実行すると検索ボックスが現れます。
そこに「jQuery」と入力すると対象の文字列が強調されるので、記述が探しやすくなります。

③environment.jsにコードを追加する

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// 追加ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
// 追加ここまで

module.exports = environment

④application.jsにコードを追加する

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../card")
require("jquery")  //このコードを追加

これで非同期通信を行うための$('.message').append〜という記述を読み込んでくれるようになりました！

最後に

プログラミング初学者ゆえ詳しくは分かりませんが、Rails6からjQueryの導入方法が変わっているそうです。
自分はそもそも導入することすら知りませんでしたが・・・。

今回の記事は下記のブログを参考にしたものなので、合わせてご参考ください！
ご指摘などあれば、ご教授頂けますと幸いです。

参考にした記事：Introducing jQuery in Rails 6 Using Webpacker