Web

Import maps の使い方

投稿日:2021年11月16日 更新日:

1. Import maps とは?

  • JavaScript の実際のファイル名」と「そのファイルを import するときに指定する名前」を切り離すことができます(2つの対応情報はJSON形式で用意しておきます)。
  • これにより、ファイル名が後から変わっても(ファイル名にバージョン番号が含まれている場合など)、一度記述した import 文を変更する必要はなくなります。(JSON形式による対応情報側のみを変えます)
  • npm のパッケージ名のようなシンプルな名前でインポートできます。
  • 静的インポート、動的インポートのどちらでも使えます。

2. Import maps の使い方

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

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

<script type="importmap">
{
  "imports": {
    "foo": "./foo.12345.js"
  }
}
</script>

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

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

静的インポートの場合

<script type="module">
import foo from 'foo';

// foo を使った処理を記述する
</script>

動的インポートの場合

<script type="module">
import('foo')
  .then((foo) => {
    // foo を使った処理を記述する
  });
</script>

3. polyfill (shim)

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

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

4. 利点について

  • もとのファイル名にバージョン番号やハッシュ等の「後々変化する文字列」が含まれている場合であっても、固定されたシンプルな名前でインポートができます(npm のパッケージをインポートするように)。
  • JavaScriptモジュールファイルがブラウザによってキャッシュされている場合であっても、「名前」に対する「もとのファイルのURL」を変えれば、ブラウザはちゃんと読み込み直してくれます。

5. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Chrome

Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える

目次1. Chrome のローカルオーバーライド機能とは?2. 使い方1. この機能で使用するローカル側のフォルダーを指定します2. 置き換えるファイルを指定します3. ファイルを編集します3. Ov …

Chrome

ブックマークレットで画面上の色を取得する(Eye Dropper APIを利用)

画面上の色を取得するブックマークレットを紹介します。

Web

AMP for WordPress プラグインを利用した AMP対応をやめる方法

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順 では、AMP for WordPress プラグインの利用方法について説明しましたが、今回のその逆 …

Google

Google マップの便利な機能

目次1. はじめに2. Googleマップの便利な機能3. 経路検索(ルート検索)経路をホーム画面に追加4. 運転モード5. マイプレイス6. 印刷 1. はじめに Googleマップ はとても便利な …

Web

HSTS が原因で、ウェブサイトが勝手にhttps接続しないようにする

HSTSが原因で、サイトが勝手にhttps接続されないようにする方法について説明します。