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

JavaScript modules

ES Modules は import/export 構文でコードをモジュールに分割する標準仕組みです。静的な構文解析により、バンドラーのツリーシェイキングが可能になります。

モジュールES2015

概要

ES Modules は import/export 構文でコードをモジュールに分割する標準仕組みです。静的な構文解析により、バンドラーのツリーシェイキングが可能になります。

対応ブラウザ

機能 デスクトップ モバイル
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`）として提供される場合、モジュールスクリプトはロードされません。

基本構文

JAVASCRIPT 
// Export
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default class Calculator { ... }

// Import
import Calculator, { PI, add } from './math.js';
import * as math from './math.js';

実務での使いどころ

  • JavaScript modules の活用

    import/export でコードをモジュール単位に分割する仕組み。依存関係の明示とツリーシェイキングを実現。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク

Powered by web-features