Import maps の使い方

1. Import maps とは？

・「JavaScript の実際のファイル名」と「そのファイルを import するときに指定する名前」を切り離すことができます（2つの対応情報はJSON形式で用意しておきます）。

・これにより、ファイル名が後から変わっても（ファイル名にバージョン番号が含まれている場合など）、一度記述した import 文を変更する必要はなくなります（JSON形式による対応情報側のみを変えます）。

・npm のパッケージ名のようなシンプルな名前でインポートできます。

・静的インポート、動的インポートのどちらでも使えます。

2. Import maps の使い方

Import maps を使う手順は以下です。

(1) <script tyle="importmap"> というタグの中に、モジュールファイルのURLと名前の対応を記述します。

このサンプルコードでは、”./foo.12345.js” という相対URLで表されたファイルに対して、”foo” という名前をつけています（マッピング）。

(2) (1) でつけた名前を使って import します。

静的インポートの場合

動的インポートの場合

3. polyfill (shim)

2021年11月現在、Firefox や Safari では使えないようですが、以下のページで polyfill (shim) が用意されています。

🔗 guybedford/es-module-shims

     URL: "http://" + "github.com/guybedford/es-module-shims"

    (ココナラブログの制限回避のため、変な書き方をしています)

Releases ページからファイルをダウンロードして、<script async src="XXXXXX">タグで読み込むか、CDN を利用します。

4. 利点について

・もとのファイル名にバージョン番号やハッシュ等の「後々変化する文字列」が含まれている場合であっても、固定されたシンプルな名前でインポートができます（npm のパッケージをインポートするように）。

・JavaScriptモジュールファイルがブラウザによってキャッシュされている場合であっても、「名前」に対する「もとのファイルのURL」を変えれば、ブラウザはちゃんと読み込み直してくれます。

---

ラボラジアンでは、Webに関するサービスを出品しております。こちらもよろしくお願い致します。