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

JSFiddle を使って HTML/CSS/JavaScript をウェブページに埋め込む

JSFiddle というサービスを使って、ウェブページに HTML/CSS/JavaScript を埋め込んでみましょう。 目次1. JSFiddle とは?2. ウェブページに埋め込む手順(1) ア …

Web Components

たくさんの Web Components を利用するページを改善する

たくさんの Web Components を利用するページを改善する方法について説明します。

Chrome

Chrome: ツールバー上の拡張機能アイコンをメニューに移動させる方法

Chromeで、ツールバー上の拡張機能アイコンをメニューに移動させる方法について説明します。

Chrome

リソースの優先度によって同時にダウンロードされるかが決まる(Chrome)

リソースの優先度によって同時にダウンロードされるかが決まる(Chrome)。

Web

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

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