Rails6 - jQuery導入方法

はじめに

今まではRails5系で開発をしていましたが、個人開発にあたり
新しいRails6を使ってみよう！と思い立ちました。

参考
Railsガイド	Ruby on Rails 6.0 リリースノート

＞ WebpackerがRails 6のデフォルトJavaScriptコンパイラになる

今まではjQueryを使うのに "jquery-rails" のGemを追加して使用していましたが
これからはWebpackerを用いて使用するそうだ。

導入手順

1.　jquery インストール

$ yarn add jquery

2.　environment.jsに追記

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
# ---追記箇所--- #
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery/src/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')

4.　jQueryのフォルダ・ファイルの作成

ディレクトリ作成

app/javascript/jquery/
app/javascript/jquery/src/

jsファイル作成

app/javascript/jquery/src/jquery.js
app/javascript/jquery/src/hoge.js 

5.　jquery.js にインポート記述

app/javascript/jquery/src/jquery.js

import "./hoge"

6.　hoge.js にJavascript記述

app/javascript/jquery/src/hoge.js

console.log('test');

7.　ブラウザで確認

ちゃんと読み込めていますね。

8.　hoge.jsにjQueryで好きに実装！

jsのファイル名は言わずもがな hoge.js じゃなくて好きに名付けてください。 その際、jquery.js のimport を忘れずに。

最後に

私はRails6のjQuery導入でプチハマりしまして、Qiitaに↓を投稿しました。

qiita.com

もしエラーが起きた際は役に立つかもしれないので参考にどうぞ。