Import Mapsとは何ですか？

ブラウザのESモジュールで裸のモジュール名（'react'など）を実URLにマッピングするHTML標準機能。バンドラーなしでCDNからモジュールを読み込める。

Import Mapsのポイントは？

HTMLの`<script type="importmap">`タグにJSONでマッピングを記述する。`import 'react'`のような裸の識別子をURLに変換できる。バンドラー不要でCDNからESモジュールをそのまま利用できる。全モダンブラウザで標準サポート済み（2023年以降）

【インポートマップス】

💡 モジュール名の住所録をHTMLに書いて、ブラウザに渡す地図

📌 このページのポイント

Import Mapsがモジュール名をURLに解決するイメージ

ひよこ

Import Mapsって何ができるの？

ペンギン先生

ブラウザが`import 'react'`という裸のモジュール名を見たとき、どのURLに取りに行くかを教える地図を定義できるんだよ。普通のブラウザはURLでないとモジュールを読み込めないんだね。

ひよこ

どうやって書くの？

ペンギン先生

`<script type="importmap">`タグの中にJSONで書くんだよ。たとえば`{"imports": {"react": "https://cdn.example.com/react.js"}}`と書けば、`import 'react'`がそのURLに解決されるんだね。

ひよこ

バンドラーがなくてもいいの？

ペンギン先生

そうだよ。従来はwebpackやViteでモジュールを束ねないと裸の識別子は使えなかったんだ。Import MapsがあればCDNのURLを指定するだけで、バンドルなしにモジュールをそのまま使えるんだよ。

ひよこ

どんなときに便利なの？

ペンギン先生

ビルドステップなしのシンプルなWebアプリや、Deno/ブラウザ環境でのプロトタイプ開発に向いているんだよ。Node.jsのnode_modulesの概念をブラウザに持ち込まずに済むのが便利なんだね。

ひよこ

全部のブラウザで使えるの？

ペンギン先生

2023年以降のChrome・Firefox・Safari・Edgeすべてで標準サポートされているんだよ。Node.jsにも似た仕組みがあるし、DenoはImport Mapsを公式サポートしているんだね。

まとめ：ざっくりこれだけ覚えればOK！

「Import Maps」って出てきたら「モジュール名→URLのマッピングをHTMLに書いてバンドラー不要にする機能」と思えばだいたいOK！

📖 おまけ：英語の意味

「Import Maps」＝インポートマップ

💬 モジュールの「地図」を定義するイメージだよ。裸の識別子（'lodash'など）を実際のURLに変換するマッピング表を提供するんだよ。