webpackerでJquery導入

久しぶりの投稿になります。
Rails6.0から標準となったwebpackerを使ってJqueryを導入する方法について記事を書きたいと思います。webpackerを使ったJqueryの導入方法に関しては他に記事があったのですが、自分のような初心者には少し説明不足で、少しハマってしまったので、今回はそこを補って記事を書いていきたいと思います。
まず、「webpackerとは」というところと「なぜwebpackerを使うのか」を簡単にながらまとめさせてもらいます。

環境

ruby 2.7.1p83
rails 6.0.3.4

webpackerとは

WebpackをRuby on Railsで使うためのGemパッケージのこと

webpackとは

JavaScript、CSS、画像などの静的ファイルを１つにまとめて管理するためのモジュールバンドラの1つ。最近のモダンなJavaScriptフレームワークのモジュールバンドラとしてはデフォルトスタンダードになっている。

モジュールバンドラとは

複数のモジュールの依存関係を解決し、一つにまとめる(バンドルする)ツールのこと

モジュールとは

１つのJavaScriptファイルに長い処理を書くと可読性が悪くなるため、一般にページごとに複数ファイルに分割を行う。この分割されたJavaScriptファイルやSassファイルのことを「モジュール」と呼ぶ

なぜモジュールバンドラが必要なのか

• 可読性が高くなり、保守しやすくなる
  → 機能やページごとにJavaScriptファイルが分かれていることでコードが読みやすくなる

• JavaScriptファイルなどがひとつにまとめられ依存関係が解決されていることで読み込みが早くなる
  → ブラウザとサーバの間はHTTP1.1のプロトコルで通信しており、一度に処理できるリクエストの数は限られている。リクエストの数が増えるとパフォーマンスに影響を与えるため、モジュールは一つにまとめて送信したほうが高速になる

• ES6非対応の古いブラウザでも解釈できる形(ES5)に自動で変換してくれる
  → JavaScriptがモジュール化したのがES6(2015年)からであるので、それ以前のブラウザでは読み込むことができない。これをwebpackはES5に変換してくれる。

それでは、実際に導入方法を書いていきます。

導入方法

まずはterminalからyarnを使ってjqueryをインストールします。

terminal

$ yarn add jquery

以下ファイルに設定などを追記していきます。

config/webpack/enviroment.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

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') #追記

今回は「toppage.js」というファイルを作り、読み込ませました。

app/javascript/packs/application.js

require("jquery")
require("toppage.js")

app/javascript/toppage.js

console.log("hogehoge")

ブラウザで確認すると、出力できています。

ここまで読んでくださりありがとうございました。
同じような初心者のお役に立てれば幸いです。

参考

https://qiita.com/masahisa/items/eaacb0c3b82f4a11fc13
https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
https://ics.media/entry/12140/