📖
Rails 7 で jQuery を使用できるようにする
今更 jQuery と思うかもしれませんが、やっぱり欲しいということで導入したい方もいるのではないでしょうか？
ということで、今回は jQuery を rails 7 の importmap を使用し導入してみます。
こちらを参考にさせていただきました。
概要
対象
- Rails 7 環境で importmap を使用し jQuery を導入したい方
前提
- CPU：Mac M1
- Rails 7
- Docker 上で起動
手順
まずは以下のコマンドを実行します。
terminal
./bin/importmap pin jquery
すると、以下が追加されます。
config/importmap.rb
+ pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.3/dist/jquery.js"
このピン留めされた上記の jQuery CDN を全体の JS ファイルでも適用できるように以下に追記していきます。
app/javascript/application.js
+ import jquery from "jquery"
+ window.$ = jquery
それでは jQuery が動作するか試してみます。
以下を記入してページをリロード。。。無事に動きました！
app/javascript/appplication.js
$(function(){
alert("jQuery 動いた！")
})
とても簡単に導入することができました^^
また前回、個別のファイル毎に JS を適用させる方法を書きましたが、今回の jQuery の導入方法で、どのファイルにも jQuery が効くようになっているので便利です。
前回の記事はこちら ↓↓
まとめ
以下の手順で jQuery の導入が可能です。
terminal
./bin/importmap pin jquery
app/javascript/application.js
+ import jquery from "jquery"
+ window.$ = jquery
お疲れ様でした◎
Discussion