Rails6にjQueryを導入する方法

Rails６から標準で導入されているWebpackerを利用することで、jQueryを簡単に実装できます。

Rails5で書かれている記事も多かったのでだいぶ混乱していました。。

Rails5以前との違い

1.　gemが必要ではなくなった
以前までは'jquery-rails'gemをインストールする必要がありましたが、Rails6からはgemの追加が必要なくなり、代わりにwebpackで必要な情報をインストールしていきます。

2.　jQuery関連ファイルの保存フォルダが違う場所にある
かつてはapp/assets/javascriptsフォルダに保存していましたが、Rails6以降はapp/javascriptフォルダに変更となります。

jQueryのインストール

そもそもjQueryとは

JavaScriptをより簡単に記述するためのライブラリのひとつ。

したがって、jQuery（ライブラリ）を使うのであればJavaScript（元のプログラミング言語）にコンパイル（翻訳）する必要があります。
そのためにここではWebpackerを使用していきます。

ではまず、jQueryのインストールを行います。

% yarn add jquery

正常にインストールされたかは package.jsonで確認できます。

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

次に「config/webpack/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

次に、「app/javascript/packs/application.js」を開きます。
以下のように、コードを追加します。

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//以下の一文を追加
require("jquery")

これでjQueryが導入されたはずです。

動作確認

下記のファイルにコードを追加しました。HTMLファイルであればなんでもいいです。

movies/index/html.erb

<h1>jQuery</h1>
  <p id="hoge">赤色になるよ</p>
  <script>
    $("#hoge").css("color","red")
  </script>

文字が赤色になっていればOKです！

参考：
https://qiita.com/shungo_m/items/53bcae18a740495d1eb3
https://ymiyashitablog.com/rails-jquery/