Rails7のimportmapでsemantic uiを使用する方法

Rails7のimportmapでsemantic uiを使用しようとしたところ苦戦したので備忘録として載せておきます。誰かのお役に立てば幸いです。

さっそく結論から

以下のように設定するとsemantic uiが使用できます。

Gemfile

# これによりsprocketsでアセットを管理することができます。sass版のsemantic-uiです。
gem 'semantic-ui-sass'

後述のjavascriptとはバージョンを合わせておくと良いでしょう。

app/assets/stylesheets/application.scss

/* semantic-uiをアセットパイプラインに載せます */
@import 'semantic-ui';

app/javascript/application.js

import "jquery"
import "semantic-ui"

// 動作確認用のコード
$(function () {
  $('.ui.modal').modal('show')
})

また、viewファイルに動作確認用コードとして以下を記述してください。

<div class="ui modal">
  <div class="header">
    Hello
  </div>
  <div class="content">
    <div class="description">
      <p>hello world!</p>
    </div>
  </div>
</div>

config/importmap.rb

pin "application", preload: true
pin "jquery", to: "https://code.jquery.com/jquery-3.1.1.min.js"
pin "semantic-ui", to: "https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"

何に苦戦したのか？

importmapとapplication.jsとの繋ぎ込みに苦戦しました。

私は最初に./bin/importmap pin jqueryコマンドによりjspmのjqueryを使おうとしていましたが、application.jsのimport "semantic-ui"でjQuery is not definedとなり上手くいきませんでした。

application.jsに以下のようなコードを記述しても同様でした。

import jQuery from 'jquery';
window.jQuery = jQuery;
import "semantic-ui"

stackoverflowでも同様のトピックがあり、https://code.jquery.com/を使用すると上手くいくという説明がされていましたが、理由がなかったので腑に落ちませんでした。

改めて公式ドキュメントを確認するとhttps://code.jquery.com/のjqueryを使用していることが確認できました。jspmとの違いを深堀りする気にはなりませんでしたが、公式でもこちらのCDNが記述されていますので、何らかの理由があるように思います。

ちなみにhttps://code.jquery.com/経由だと

import jQuery from 'jquery';
window.jQuery = jQuery;

のような記述がなくても$やJQueryはグローバル変数に定義されるようです。

おそらく当事象はimportmap(Rails7)だからということではないと思います。明確な理由は不明ですが、公式がhttps://code.jquery.com/となっているので納得することにしました。

行動すれば次の現実

テック中心の個人ブログ