Rails

【Rails6.0】Webpackerを用いてjQueryをインストールする手順を簡単にまとめてみた

Rails

 

今回はRails6.0系でjQueryを導入する手順を簡単に解説したいと思います。Rails5系まではassetsを使用してJavaScriptを管理していましたが、Rails6.0系以降はWebpackerと呼ばれる機能で管理することになっています。

それぞれの機能・コマンドは解説せず、導入手順のみ解説しています。

導入手順

yarnでjQueryを導入

% 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
「jQuery: ‘jquery/src/jquery’」の記述は、jquery/src以下のjqueryファイルを読み込むことを表しています。

application.jsの編集

// app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
↓追記
require('jquery')

ファイルの作成

jquery/src以下のjqueryファイルを読み込む設定をしたので、以下の手順でファイルをそれぞれ作成しましょう。

  1. javascript以下にjqueryフォルダを作成
  2. 作成したjqueryフォルダ以下にsrcフォルダを作成
  3. 作成したsrcフォルダ以下にjquery.jsを作成
jqueryファイルの作成

挙動確認

ここまででjqueryの導入が完了しました。

実際にjQueryが読み込まれるか確認してみましょう。jquery.jsに以下の記述を追記することで、test.jsというファイルを読み込むことができます。

// app/javascript/jquery/src/jquery.js
import "./test"

 

test.jsにconsole.logを入れてみて、実際に値が表示されるか確認してみましょう。

// app/javascript/jquery/src/test.js
console.log("jQueryが読み込まれた!")
コンソールに表示されれば成功

参考

Introducing jQuery in Rails 6 Using Webpacker:
https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

 

 

今回はRails6.0系でjQueryを導入する手順を解説しました。慣れてしまえば3分もかからずにできてしまうので、ぜひチャレンジしてみてください。assetsでの管理よりも便利になったWebpacker、ぜひ使いこなしたいですね!