【自分メモ】Rails 8（Importmap）に jQuery を入れてみた話
こんにちは。
現役看護師でrails初学者のものです。
この記事は、ImportmapベースのRails8環境でjQueryを使いたいときの手順を、
自分用のメモとして残しておくものです。
環境
- Rails 8.0.x（Importmap使用）
- Mac（Apple Silicon）
- jQueryをCDNではなくImportmap経由で使う
-
app/javascript/application.jsから$を使いたい
jQueryをImportmapに追加する
1.まずは、Importmap に jQuery を追加（pin）します
./bin/importmap pin jquery
これで、以下のような1行がconfig/importmap.rbに追加される
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.3/dist/jquery.js"
jQueryをグローバルに使えるようにする
application.jsにjQueryを読み込む記述を追加
// app/javascript/application.js
import jquery from "jquery"
window.$ = jquery
このwindow.$ = jqueryによって、$()記法が使えるようになりました
$(function () {
console.log("jQuery is ready!");
});
ブラウザを開いたときにアラートが出れば成功
補足メモ
- importmapの良いところは、npmやyarnを使わずに必要なJSをすぐ使えること
- jQueryの使用範囲はあくまで限定的
- 既存のjQueryプラグインを組み込みたいときには便利らしい
- ページごとにJavaScriptを分けたい場合は、data-controllerを使ったStimulusを併用するのがベターらしい
初学者のため、間違えていたらすいません