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

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

関連記事

Web

WordPressの記事ページ (それ以外でも多分OK) に、Google Charts を使って生成したグラフを表示する方法

目次1. はじめに2. やりたいこと3. やり方(1) Google Charts の JavaScript ファイルを読み込ませる(2) グラフを表示させたい箇所に div タグを記述する(3) グ …

Web

HTTP/3での接続を強制的に止める方法 (Chrome)

HTTP/3での接続を強制的に止める方法 (Chrome)を紹介します。

Chrome

Chrome 78 の新機能

ome 78 の新機能について簡単に説明します。

HTML

HTML の基礎

HTML の各タグに関する情報を提供します。主に HTML5 の情報を扱います。 (HTML5の仕様書である HTML Standard を翻訳している部分も多くあります) 後半では、タグ毎に使い方な …

BULMA

Bulma (CSS フレームワーク) のサンプルページを作りました

目次概要Flexbox をフルに活用しているシンプルなグリッドシステム学習が容易カスタマイズが簡単JavaScript は含まれていない。サンプルページBulma 公式サイトおわりに 概要 Bulma …