Import Maps importmap
importmapで裸のモジュール指定子をURLに対応付けます
「Import Maps importmap」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
ベアspecifierの問題
Nodeでは、リゾルバーがnode_modules/lodashを見つけるため、import "lodash"が機能します。ブラウザーにはnode_modulesがないため、実際のURLが必要です。補助機能がなければ、import "lodash"は「Failed to resolve module specifier」というエラーを発生させます。
Import mapの役割
Import mapは、ベアspecifier（およびURLプレフィックス）を実際のURLに対応付けるJSON辞書を宣言します。ブラウザーはモジュールの解決時にこのマップを参照し、import "lodash"を、設定したURLからの取得に変換します。
<script type="importmap">
{
"imports": {
"lodash": "https://esm.sh/lodash@4.17.21",
"preact": "https://esm.sh/preact"
}
}
</script>宣言順が重要
ベアspecifierを使用する<script type="module">より前に、import mapを記述する必要があります。モジュールがimportの解決を開始すると、マップは確定して変更できなくなります。<script type="importmap">は<head>の先頭付近に配置してください。
プレフィックスマッピング
末尾にスラッシュがあるエントリは、URLプレフィックスに一致します。"@/": "/src/"を指定すると、import "@/utils/sum.js"は/src/utils/sum.jsに対応付けられます。これは、Bundlerが一般的にサポートしている「alias」構文を再現する方法です。
マップによるバージョン管理
Import mapを使うと、バージョンの選択を一元管理できます。"react"の対応先をesm.sh/react@18からesm.sh/react@19に1か所で変更すれば、すべてのimport元が新しいURLを使用します。Import mapがなければ、各import箇所にそれぞれのバージョンがハードコードされます。
スコープ
scopesキーを使用すると、サイトの異なる部分に異なるマッピングを設定できます。/admin/内では/public/より新しいバージョンの依存関係が必要になる場合があります。スコープを使えば、パス単位で対象を指定できます。
{
"imports": { "lodash": "https://esm.sh/lodash@4" },
"scopes": {
"/admin/": { "lodash": "https://esm.sh/lodash@5" }
}
}ドキュメントごとに1つのマップ
各ドキュメントに配置できる<script type="importmap">は最大1つです。同じページに2つ配置するのは無効なので、内容を1つのブロックに統合してエントリをまとめてください。
外部Import map
<script type="importmap" src="map.json">を使うと、マップを外部URLでホストできます。ブラウザーのサポート開始時期はインラインマップより新しいものの、現在では広く普及しています。大きなマップをドキュメントとは別にキャッシュしたい場合に便利です。
Import mapの生成
JSPM Generatorやesbuildの--servedirモードなどのツールは、package.jsonからImport mapを自動生成します。生成されたマップにはすべての間接依存関係が含まれ、それぞれがCDN URLに対応付けられます。node_modulesを使わないワークフローを実現できます。
ブラウザーのサポート
Import mapはChrome、Edge、Safari、Firefoxで利用できます。古いブラウザーは<script type="importmap">タグを無視するため、ベアspecifierは失敗します。幅広い従来環境をサポートするには、specifierをビルド時に解決するBundlerでビルドし、通常のURLを配信してください。
Polyfillという選択肢
ES Module Shims polyfill（es-module-shims.js）は、古いブラウザーにImport mapやいくつかの新しい機能のサポートを追加します。importmapスクリプトより前に読み込んでください。ほとんどのモダンプロジェクトではpolyfillを省略し、ネイティブサポートに依存します。
理解度チェック
ベアspecifierを使用するモジュールスクリプトより前に、なぜ<script type="importmap">を記述する必要があるのでしょうか。
まとめ
Import mapは、ベアspecifierとURLプレフィックスを実際のURLに対応付け、ブラウザーでNode形式の「import lodash」を可能にします。ドキュメントごとに1回、モジュールスクリプトより前に宣言し、必要に応じてsrcで外部化できます。パスごとの上書きにはスコープを使用します。CDN（esm.sh、jsdelivr）と組み合わせることで、node_modulesを使わないワークフローを実現できます。
よくある質問
「Import Maps importmap」レッスンは無料ですか？
はい。「Import Maps importmap」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「Import Maps importmap」で何を学びますか？
importmapで裸のモジュール指定子をURLに対応付けます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Import Maps importmap」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ESモジュールスクリプト type=module
- Import Maps importmap
- モジュール内の動的import()
- Module Federationの基礎