Widely available すべての主要ブラウザで対応済み。安心して使用可能。

JavaScript modules

import() 構文は、よくダイナミックインポートと呼ばれますが、非同期かつ動的に、 ECMAScript モジュールを、潜在的にモジュールではない環境に読み込めるようにする関数風の式です。

宣言スタイルのものとは異なり、動的インポートは必要なときだけ評価され、より柔軟な構文が可能になります。

メタデータ・スクリプト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
export
61
16
60
10.1
61
10.3
HTML 属性
nomodule
61
16
60
11
61
11
DOM API
ecmascript_modules

ECMAScriptモジュールのサポート
80
80
114
15
80
15
その他
html.elements.script.type.module

`タイプ="モジュール"`
61
79
60
10.1
61
10.3
javascript.operators.import

import() 構文は、よくダイナミックインポートと呼ばれますが、非同期かつ動的に、 ECMAScript モジュールを、潜在的にモジュールではない環境に読み込めるようにする関数風の式です。
63
79
67
11.1
63
11.3
javascript.operators.import_meta

import.meta オブジェクトはコンテキスト固有のメタデータを JavaScript のモジュールに公開します。これには、モジュールの URL のようなモジュールに関する情報が含まれています。
64
79
62
11.1
64
12
演算子
resolve

import.meta.resolve() は JavaScript モジュールの import.meta オブジェクトで定義されている組み込み関数で、現在のモジュールの URL をベースとしてモジュール指定子を URL に解決します。
105
105
106
16.4
105
16.4
ステートメント
arbitrary module namespace identifier names

任意のモジュール名前空間識別子名
88
88
87
14.1
88
14.5
default

default`キーワードを `export` と併用する。
61
16
60
10.1
61
10.3
namespace

名前空間として*をエクスポートする`。
72
79
80
14.1
72
14.5
その他
javascript.statements.import

静的な import 宣言は、他のモジュールによってエクスポートされた読み込み専用の動的bindingをインポートするために使用します。インポートしたバインドは、バインドをエクスポートしたモジュールによって更新される一方、インポートしているモジュールによって再割り当てすることができないために、「動的バインド」と呼ばれています。
61
16
60
10.1
61
10.3
ステートメント
arbitrary module namespace identifier names

任意のモジュール名前空間識別子名
88
88
87
14.1
88
14.5
import attributes

インポート属性機能は、モジュールの読み込み方法についてランタイムに、モジュール解決、取得、構文解析、評価などの動作を指示します。import 宣言、export...from 宣言、動的 import() で対応しています。
123
123
138
17.2
123
17.2
worklet support

ワークレットで利用可能
114
その他
svg.elements.script.type.module
実験的

`type='モジュール'`
117
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
実装メモ
  • ネストされたワーカーのサポートはSafari 15.5で導入されました。
  • ネストされたWorkerでのスクリプト読み込みがSafari 16.4で導入されました。
注釈 2件
実装メモ
  • iOS15.5のSafariでネストされたワーカーのサポートが導入された。
  • ネストされたワーカーでのスクリプト読み込みは、iOS 16.4のSafariで導入されました。
注釈 1件
実装メモ
  • async`属性を持たないモジュールスクリプトは、ページがXHTML (`application/xhtml+xml`) として提供される場合にロードされません。バグ 40518469 を参照してください。
注釈 2件
実装メモ
  • async`属性を持たないモジュールスクリプトは、ページがXHTML (`application/xhtml+xml`) として提供される場合にロードされません。バグ 40518469 を参照してください。
削除済み
  • このバージョンで機能が削除されました (79)
注釈 1件
実装メモ
  • ページがXHTML（`application/xhtml+xml`）として提供される場合、モジュールスクリプトはロードされません。
注釈 1件
実装メモ
  • async`属性を持たないモジュールスクリプトは、ページがXHTML (`application/xhtml+xml`) として提供される場合にロードされません。バグ 40518469 を参照してください。
注釈 1件
実装メモ
  • ページがXHTML（`application/xhtml+xml`）として提供される場合、モジュールスクリプトはロードされません。

基本構文

HTML 
<script type="module">
import { greet } from './utils.js';
greet('World');
</script>
<script nomodule src="legacy.js"></script>

実務での使いどころ

  • JavaScript modules の活用

    import() 構文は、よくダイナミックインポートと呼ばれますが、非同期かつ動的に、 ECMAScript モジュールを、潜在的にモジュールではない環境に読み込めるようにする関数風の式です。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク