jQueryを導入したい(Rails 6.0.4)

はじめに

やりたいこと

jQueryを導入したい
##動作環境
ruby 2.6.5 / Rails 6.0.4

##手順

• jQueryのインストール
• Webpackの設定
• application.jsの設定
• 動作確認

jQueryのインストール

jQueryのインストールを行います。

ターミナル

% yarn add jquery

JqueryをWebpackerで管理する際はyarnコマンドを使用してインストールします。

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

application.jsでjQueryを呼び出せるようにします。

javascript/packs/application.js

//中略

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

//中略

以上で導入は完了です。

動作確認

jQueryが問題なく動作しているか確認します。
好きなページに次のコードを転記します。

好きなページ.html.erb

<p>JQuery導入失敗</p>
<script type="text/javascript">
  $(document).ready(function() {
    $("p").text("JQuery導入成功！！");
  });
</script>

ページに"JQuery導入失敗"ではなく、"JQuery導入成功！！"が表示されれば成功です！

↓こちらのページを参考にしました！ありがとうございました！