importmapでESModulesを読み込む

概要
  • script 要素の type 属性に importmap を指定すると、 script 要素の本体がインポートマップになる
  • インポートマップは、JavaScript モジュールをインポートする際に、ブラウザがモジュール指定子を解決する方法を開発者が制御できるようにするためのJSONオブジェクト

読み込むESModulesのJavaScriptサンプルのファイル
  • ESModulesは、JavaScriptファイルを読み込む仕組み
  • export や import を使うことで、ESModulesになる
  • ESModulesの場合、"use strict;" を付けた場合と同じ挙動で、自動的に厳格モードになる

/js-tips/importmap/modules/shapes/square.js


          export function appendSquare(selector) {
            document.querySelector(selector)?.append('🟪');
          }

/js-tips/importmap/modules/shapes/circle.js


          export function appendCircle(selector) {
            document.querySelector(selector)?.append('🟠');
          }

普通にESModulesをHTMLで読み込む場合
  • ブラウザーがESModulesをインポートするためには、絶対的なURLか相対的なURLの指定が必要

HTML


          <script type="module">
            import { appendSquare } from '/js-tips/importmap/modules/shapes/square.js';
            import { appendCircle } from '/js-tips/importmap/modules/shapes/circle.js';

            appendSquare('#result_01');
            appendCircle('#result_01');
          </script>

ベアモジュールでESModulesを読み込む
  • パスがないモジュールをベアモジュール (bare module) と呼ばれる
  • 通常、ブラウザではモジュールを使って import することはできない
  • インポートマップを使った際は、モジュール指定でベアモジュールを使用する
  • インポートマップの script 要素は、ESModulesをインポートする script 要素の前に宣言し、処理する必要がある
  • インポートマップで指定するモジュールのパス指定は、絶対URLでも / ./ ../ で始まる相対URLパスでも可能

HTML


          <script type="importmap">
            {
              "imports": {
                "square": "/js-tips/importmap/modules/shapes/square.js",
                "circle": "/js-tips/importmap/modules/shapes/circle.js"
              }
            }
          </script>

          <script>
            import { appendSquare } from 'square';
            import { appendCircle } from 'circle';

            appendSquare('#result_01');
            appendCircle('#result_01');
          </script>

実行結果

パス接頭辞のマッピングでESModulesを読み込む
  • モジュール指定子のマップキーは、モジュール指定子のパスの接頭辞 (prefix) を割り当て直すために使用することも可能
  • この場合、プロパティと割り当てられたパスは、どちらも末尾にフォワードスラッシュ (/) を保有する必要がある

HTML


          <script type="importmap">
            {
              "imports": {
                "shapes/": "/js-tips/importmap/modules/shapes/"
              }
            }
          </script>

          <script>
            import { appendSquare } from 'shapes/square.js';
            import { appendCircle } from 'shapes/circle.js';

            appendSquare('#result_02');
            appendCircle('#result_02');
          </script>

実行結果

importmapの各ブラウザ対応状況