【JavaScript】importmapでモジュールを更新せずにインポート元ファイルを変更する方法
更新日：2026/05/11
最近はブラウザ上のJavaScriptでモジュールを使用するケースが増えてきました。
モジュール内では外部ファイルをインポートして使用できますが、場合によっては少し困ることがあります。
外部ソースをインポートするデメリット
例えばReactをCDNからインポートしてモジュール内で使用するために、次のように記述していたとします。
import React from 'https://esm.sh/react@19'
インポート元を変更する場合、コードの書き換えが必要になります。
import React from 'https://xxxx.xxx/react.js'
再リリースが必要になるので少し面倒ですね。
特に問題なのが、インポート元のモジュールを開発している場合です。
テスト用や本番用などでインポート元が異なる場合、インポート先も変更しないといけません。
非効率ですね。
グローバル変数を使用したインポート
代替案として考えられるのが、グローバル変数にインポート先をセットする方法です。
<!doctype html>
<html lang="ja">
<head>
<script>
window.IMPORTFILE = "/test.js";
</script>
<script type="module">
import {test} from window.IMPORTFILE;
test()
</script>
</head>
</html>
これはエラーになります。
import文のインポート元は文字列リテラルのみを指定できます。
そのため、変数を指定するとエラーになります。
動的インポートなら変数を使用できます。
<script>
window.IMPORTFILE = "/test.js";
</script>
<script type="module">
async function loadModule() {
const module = await import(window.IMPORTFILE);
}
loadModule();
</script>
今回は静的なインポートなので、他の方法で解決します。
<script type="importmap">を使用する
<script type="importmap">は、インポート先を指定する文字列を特定の文字にマップする、ブラウザの機能です。
<script type="importmap">
{
"imports": {
"test": "https://xxxx.xxx/test.js"
}
}
</script>
<script type="module">
import { test } from "test";
test();
</script>
『import { test } from "test";』の "test" が、importmapのimports.testと置き換わります。
importmapは相対パスで指定できます。
また、複数のマップを記述できます。
<script type="importmap">
{
"imports": {
"test": "/test.js",
"test2": "/test2.js"
}
}
</script>
ただしJSONとして解釈されるので、末尾にカンマがあるとエラーです。
<script type="importmap">
{
"imports": {
"test": "/test.js",
"test2": "/test2.js",
}
}
</script>
エラー内容：Uncaught SyntaxError: Failed to parse import map: invalid JSON
パスのプレフィックス（接頭辞）としてマップすることもできます。
ただし、マップ名とマップ値共に末尾に 『/』 が必要です。
記述しないとエラーになります。
<script type="importmap">
{
"imports": {
"js/": "/js/"
}
}
</script>
<script type="module">
import { test } from "js/test.js";
test();
</script>
scopesキーを使用する
<script type="importmap">にscopesキーを記述すると、現在のパス毎にマップを提供できます。
<!doctype html>
<html lang="ja">
<head>
<script type="importmap">
{
"imports": {
"test": "/test.js"
},
"scopes": {
"/test/": {
"test": "/test2.js"
}
}
}
</script>
<script type="module">
import { test } from "test";
test();
</script>
</head>
</html>
上記のhtmlを https://xxxx.xx/ で呼び出すと test.js を、https://xxxx.xx/test/ で呼び出すと test2.js を読み込みます。
integrityキーで整合性メタデータを指定する
integrityキーを使用すると、インポートするファイルのSHA-384ハッシュ値を指定できます。
<!doctype html>
<html lang="ja">
<head>
<script type="importmap">
{
"imports": {
"test": "/js/test.js"
},
"integrity": {
"/js/test.js": "sha384-zFafg44yFfGxFGHTghrRAcvHUK3L4ptFvTu72jPY8fczlDFHSkafbv1069hfrwnhGP"
}
}
</script>
<script type="module">
import { test } from "test";
test();
</script>
</head>
</html>
読み込んだファイルのハッシュ値とintegrityのハッシュ値が異なると、エラーになります。
インポートファイルの内容を変更するとハッシュ値が変わるので、改ざんへの備えになりますね。
SHA-384ハッシュ値は次のサイトで取得できます。
ハッシュ取得は、jsファイルの応答ヘッダーに Access-Control-Allow-Origin が必要です。
Apache系列のサーバーなら、.htaccessファイルに次のような記述を追加しましょう。
.htaccess
<FilesMatch "\.(js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
更新日：2026/05/11
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
