webpackerでjQueryを管理してjavascriptを書きやすくする

---

[javascriptだけで記述した場合] （before）

window.onload = function () {
  document.querySelector("h2").addEventListener("mouseover", function (event) {
    this.style.color = "lightblue"
  }, false);
  document.querySelector("h2").addEventListener("mouseout", function (event) {
    this.style.color = ""
  }, false);
};

[webpackerでjQueryを管理した後] （after）

$(function () {
  $(document).on("mouseover", "h2", function () {
    $(this).css({ "color": "lightblue" });
  }).on("mouseout", "h2", function () {
    $(this).css({ "color": "" });
  })
});

上記の記述では、見出し画面のように
「マウスが文字の上に来たら水色になり、マウスが文字の上から外れたら色が元に戻る」を表現しています。

afterのように、
railsバージョン6からデフォルトで導入さている「webpacker」で、
jQueryを利用することにより、記述を短くできます。

[webpacker]

webpack というツールをrails仕様にしたGemです。
webpackとは、webアプリケーションを作るために用いられる、さまざまなjavascriptライブラリを管理してくれます。

webpackerは、webpackに代わり専用の設定ファイルやヘルパーメソッドを用意してくれます。

[導入方法]

1、jQueryはインストールします
(jQueryはGemもあるようでが、今回はこれでOKです。)

% yarn add jquery

2、webpackの設定ファイルでjQueryを管理下に追加するための記述をします

//const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
  })
)

//module.exports = environment

3、application.jsファイルでjQueryを呼び出します

:
:
require('jquery')

完了です。
あとは冒頭のコードを記述すればOKです😌

---

ご覧いただきありがとうございます。これはアウトプット用のnoteです。
よろしければアドバイスやコメント等お願いします!