【Rails6】jQueryの導入

はじめに

Rails6でjQueryを導入する手順を備忘録としてまとめたいと思います。
バージョンがRails6より前の場合はGemを使うそうですが、Rails6以降では導入する方法が違うようです。
導入にあたりこちらの記事を参考にさせていただきました。
https://ymiyashitablog.com/rails-jquery/

導入手順

jQueryを導入したいアプリケーションのディレクトリに移動

ターミナル

% cd アプリ名

yarnコマンドを実行

ターミナル

% yarn add 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ファイルにrequire("jquery")を追記

app/javascript/packs/application.js

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

導入の手順は以上になります。