type="importmap"なるscriptタグ

久しぶりにRailsのキャッチアップでもしようと思い、Rails7の情報を見てimportmapなるものが入ったとのことを知った。

こんな感じになるみたい。下記は、Railsで適当にviewを吐いたときに得られたもの。

<script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-b35c243a8d412f15d816463570badcbfe2f38bc507a8e079847dcfdecaa27498.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js",
    "@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
  }
}</script>

importmapとは

あ、Rails独自の何かじゃないんですね。

JavaScriptモジュールでimportするときに、パスを指定する代わりに任意の代替的な文字列で指定できるようにするための仕組み。タグの中身を見れば分かるけど、その文字列から実体のパスへのKey-Value mapになっていて、ここからルックアップすることで実体のパスを引き当てるような機能のようだ。

何故こんなものが..？ → 多分、JSファイルをNodeJSとbrowserでuniversalにしたかったんでしょう。 nodeの場合、import "hogehoge" は node_modules からいい感じに引っ張ってくれるが、browserの場合そんなものはないし、.jsの拡張子をいい感じに補完したりも当然できない。とはいえ、ブラウザに向けたJSの場合だけ import "./core/hogehoge.js" などとパス指定に変えるのはそれはそれで辛い。そこで、"hogehoge" → "./core/hogehoge.js" なる対応表を教えることができれば、この問題は解決できる。）

あと、Railsの場合いい感じにhashを入れてくれるのでキャッシュを気にせず使えるという利点も同時に得られる。

import-maps (仕様ドラフト段階 2022/5現在)

あると間違いなく嬉しいんだけど、生まれた背景がハイコンテクストになってきていてるなあ..。

注意

• ごく一部のブラウザでは実装されているが、ほとんどでは実装されていない
  • よって使えない..? es-module-shims を入れればいい感じに解釈できるらしい。これはこれですごい。
    • railsではデフォルトで入っているから気にしなくてOK
  • 実際、自前で書いてみてshimなしにSafariで動かそうとすると Unhandled Promise Rejection: TypeError: Module specifier, 'modulename' does not start with "/", "./", or "../". などと出る (2022/5現在)