背景

railsに画像スライドショーのslickなどのプラグインを導入する際に、
jQeryの導入が必須になり、ただ導入するだけかなり時間がかかってしまったため、
忘れない様にという自分のためと、同じレベルの方が苦労しなくていいように作成します！

やりたいこと

・slickなどの画像スライドショーツールをrubyで使用したい
・そのためにjQueryを導入したい

動作環境

rails (6.0.3.7)

手順

①jQueryのインストール
②Webpackの設定
③application.jsの設定
④動作確認

①jQueryのインストール

Rails5以前の導入方法ではjquery-railsというGemをインストールするのが基本のようですが、
Webpackerで管理する際はyarnコマンドを使用してインストールします。
＊私はこの時点で間違えていました＊

rails6以降

yarn add jquery


②Webpackの設定

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の設定

javascript/packs/application.jsにrequire('jquery')を記述する

//中略

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 追記
require('jquery')

//中略

④動作確認

なんでもいいのでjQuryの記述をして検証ツールで確認してみる。
私は、Javascrypt ディレクション内にtest.jsというファイルを作成し、下記コードを記述しました。
例

$(function() {
  console.log("OK");
});

下記のように検証ツールで問題なく表示されたら導入成功！！

注意

最後の導入テストフェーズで、test.jsを作って記述する際は、
javascript/packs/application.jsにrequire('../test')を記述して作成したファイルを読み込ませる必要があります！！

//中略

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
// 追記
require('../test')

//中略

振り返り

過去の記事を参考にし、gem'jquery-rails'でbundle成功したので導入できてないことを全く疑ってませんでしたw
slickやswiperなどいろんなスライドショーのプラグインを試したが軒並みエラーが出たので途方に暮れていました。
その時、コンソールで動作テストをしたときに、jQueryの記述が読み込まれないことに気づきました。。。
もしかして導入方法が違うのか？と調べた時にRails6でのjQuery導入方法という記事に出会い、無事導入するに至りました。

もう少し早く、テストコードで試していればよかったのですが、
bundleの下記表記を信じて疑わなかったです。

Bundle complete! 26 Gemfile dependencies, 101 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

slickなどの使用方法はまた別の記事で書きますー！