Rails7でImport mapsを使ってjQuery UIを動かす

Rails7にjqueryとjquery-ui-distをセットアップする方法を解説します。

jqueryとjquery-ui-distをピン留めする

config/importmap.rb

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"
pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"

jqueryとjquery-ui-distをインポートする

app/javascript/application.js

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
import("jquery-ui-dist")

参考

同じ要領でJavaScriptファイルを読み込む

config/importmap.rb

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"
pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"
+ pin_all_from 'app/javascript/custom', under: 'custom'

app/javascript/application.js

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
import("jquery-ui-dist")
+ import("./custom/***.js")

app/javascript/custom/***.jsにJavaScriptファイルを置く。

参考