【インポートマップス】

Import Maps とは？

最終更新: 2026年10月7日

💡 モジュール名と読み込み先URLを結び付ける住所録

ブラウザでJavaScriptモジュールを読み込む際、指定した名前やパスを取得先のURLへ対応付けるHTMLの仕組み。importsやscopesをJSONで記述する。コードの変換や依存パッケージのインストールを行うものではない。

📌 このページのポイント

ブラウザがコードの名前と対応表を参照し、解決したURLからモジュールを取得する流れです。CDNだけが取得先ではなく、対応表は配信コードをブラウザ向けに変換するものでもありません。

ひよこ

Import Mapsは、何を決めるの？

ペンギン先生

JavaScriptのimportやimport()で指定した名前を、どのURLへ解決するか決めるよ。たとえばURLの形ではない名前を、同じサイトやCDN上のモジュールへ対応付けられるんだ

ひよこ

どうやって書くの？

ペンギン先生

HTMLのscript要素にtype="importmap"を指定し、中にJSONを書くよ。たとえば {"imports":{"utils":"/js/utils.js"}} なら、import "utils" の取得先は /js/utils.js になる。必要な対応表を先に用意しよう

ひよこ

これだけで、どのnpmパッケージも動く？

ペンギン先生

対応表はコードを変換したり、パッケージをインストールしたりしないよ。配信先のコードがブラウザで使えるモジュールで、必要な依存関係も解決できることが条件。バンドラーを使わない構成にも役立つけれど、その全機能を代替するものではないんだ

ひよこ

同じ名前で、違う版を読み込める？

ペンギン先生

scopesを使うと、読み込む側のモジュールのURLに応じた対応表を用意できるよ。たとえばアプリの別の部分で、異なる版のモジュールを使う構成にできる。名前だけでなく、パスの先頭部分を対応付けることも可能なんだ

ひよこ

どこでも同じように使える？

ペンギン先生

基本機能は主要ブラウザで広く使えるけれど、追加機能や古い版の対応は確認しよう。HTML内の対応表はscriptのsrcやWorkerの読み込みには適用されない。Node.jsやDenoでの名前の解決も、それぞれの実行環境の仕様を確認するんだ

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

「Import Maps」って出てきたら「モジュール名と読み込み先URLを結び付ける対応表」と思えばだいたいOK！

📖 おまけ：英語の意味

「Import Maps」＝モジュールの読み込み先を示す対応表

💬 importはモジュールを取り込む操作、mapは対応表という意味だよ。コードをまとめる処理とは役割が違うんだ

参考資料