Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Import maps

importmap の値を <script> 要素の type 属性に設定すると、要素の本体がインポートマップであることを示します。

インポートマップは、JavaScript モジュールをインポートする際に、ブラウザーがモジュール指定子を解決する方法を開発者が制御できるようにするための JSON オブジェクトです。これは、import 文や import() 演算子でモジュール指定子として使用されたテキストと、指定子を解決するときにテキストを置き換える対応する値との間の対応表を提供します。 JSON オブジェクトは、JSON のインポートマップ表現に適合している必要があります。

インポートマップは、静的インポートや動的インポートのモジュール指定子を解決するために使用されるため、マップ内で宣言された指定子を使用してモジュールをインポートする <script> 要素の前に宣言し、処理する必要があります。 インポートマップは、 import 文または文書内の読み込まれたモジュール用の import() 演算子にあるのモジュール指定子にのみ適用されることに注意してください。 <script> 要素の src 属性で指定されたパスや、ワーカーまたはワークレットに読み込まれたモジュールには適用されません。

詳しい情報は、JavaScript モジュールガイドのインポートマップを使用したモジュールのインポートの節を参照してください。

メタデータ・スクリプト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.script.type.importmap
89
89
108
16.4
89
16.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@18",
    "react-dom": "https://esm.sh/react-dom@18"
  }
}
</script>
<script type="module">
import React from 'react';
</script>

ライブデモ

Specifier mapping idea

Show how import maps replace bare specifiers with concrete module URLs.

プレビュー全画面表示

Import map anatomy

Break an import map into specifiers, URLs, and scope overrides.

プレビュー全画面表示

Authoring checklist

Use one map early in the document and keep the mapping explicit.

プレビュー全画面表示

実務での使いどころ

  • Import maps の活用

    importmap の値を <script> 要素の type 属性に設定すると、要素の本体がインポートマップであることを示します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク