【Rails】iQueryの導入

目的

Railsで作成したアプリにjQueryを導入する。

開発環境

macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0

前提

• アプリが作成されている。
• アプリ名はtest-appとする。

手順

1. 前置き
2. jQueryのインストール
3. Webpackの設定
4. application.jsの設定
5. テスト用ファイルの作成
6. ファイルの読み込み
7. 最終確認

前置き

Rails６から標準装備されているWebpackerを利用することでGem無しでインストール可能です。

jQueryのインストール

それでは早速始めていきます！
まずjQueryをインストールしましょう！

ターミナル

% yarn add jquery

Webpackの設定

次に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の設定です！

javascript/packs/application.js

//省略

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

require('jquery')

//省略

これでjQueryが導入できました！
確実に導入できているか、確認も行っていきましょう！

テスト用ファイルの作成

それでは、実際にテストを行ってみます！
test.jsファイルを作成し、以下のように記述してください！

app/javascript/test.js

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

ファイルの読み込み

先程作成したファイルを読み込むための記述をします！

app/javascript/packs/application.js

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

require("jquery")
require("test.js")
//省略

最終確認

アプリを立ち上げて、コンソールにtestの文字が表示されていれば成功です！

最後に

以上でjQueryの導入が完了しました。
手軽に導入できるので、ぜひ試してみてください。
では。