import 文は、他のモジュールからエクスポートされたバインディング(関数、オブジェクト、プリミティブ)をインポートするために用います。インポートされたモジュールは宣言のあるなしにかかわらずStrict モードで動作します。import 文は、type="module" を指定しない限り、埋め込まれたスクリプトでは使えません。

構文

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import(module-name);
defaultExport
モジュールからのデフォルトのエクスポートを参照する名前。
module-name
インポートするモジュール。 モジュールがある .js ファイルへの相対または絶対パス名です。 バンドラーによっては、拡張子を加えることが許され、あるいは求められることがあります。 環境を確認してください。 シングルクォートとダブルクォートだけが使えます。
name
インポートを参照するとき名前空間のように用いられるモジュールオブジェクトの名前。
export, exportN
インポートするエクスポートの名前。
alias, aliasN
指定されたインポートを参照する名前。

説明

name パラメータは、エクスポートを参照する名前空間のように用いられる「モジュールオブジェクト」の名前です。export パラメータは名前がつけられたエクスポートをそれぞれ指定します。それに対して、import * as name 構文はすべてをインポートします。構文の意味を明らかにするため、下記に例を示します。

モジュールのコンテンツすべてをインポートする

下記のコードは、myModule を現在のスコープに加え、/modules/my-module.js のファイルのモジュールからのエクスポートすべてを含めます。

import * as myModule from '/modules/my-module.js';

エクスポートにアクセスするには、モジュール名(ここでは「myModule」)を名前空間として用いることになります。 たとえば、上記でインポートされたモジュールがエクスポートにdoAllTheAmazingThings()を含む場合は、下記のように呼び出します。

myModule.doAllTheAmazingThings();

モジュールからエクスポートをひとつインポートする

myExport という名前のオブジェクトまたは値が、my-module から暗黙的 (モジュール全体がエクスポートされた場合) あるいは export 文を用いて明示的ににエクスポートされると、myExport が現在のスコープに加えられます。

import {myExport} from '/modules/my-module.js';

モジュールから複数のエクスポートをインポートする

下記のコードは、foobar を現在のスコープに加えます。

import {foo, bar} from '/modules/my-module.js';

エクスポートを扱いやすいエイリアスにしてインポートする

インポートするときエクスポートの名前を変えることができます。 例えば下記のコードは、エクスポートを shortName として現在のスコープに加えます。

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

インポートする際に複数のエクスポートの名前を変える

下記のコードは、複数のエクスポートを扱いやすいエイリアスにしてモジュールからインポートします。

import {
  reallyReallyLongModuleExportName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

付随効果のためだけにモジュールをインポートする

付随効果だけのためにモジュール全体をインポートしたときは、何もインポートされません。 モジュールのグローバルコードが実行されるだけで、実際の値はインポートされないのです。

import '/modules/my-module.js';

デフォルトをインポートする

デフォルトの export(オブジェクト、関数、クラスなど)にも対応できます。 import 文を用いて、そのようなデフォルトをインポートします。

もっとも単純なやり方はデフォルトを直接インポートします。

import myDefault from '/modules/my-module.js';

また、デフォルトの構文とともに上記のエイリアス(名前空間または名前つきのインポート)を用いることもできます。 その場合は下記のように、デフォルトのインポートを先に宣言しなければなりません。

import myDefault, * as myModule from '/modules/my-module.js';
// myModule は名前空間として使う

あるいは、つぎのような書き方もできます。

import myDefault, {foo, bar} from '/modules/my-module.js';
// 特定の、名前つきのインポート

動的にインポートする

import キーワードを関数として呼び出すことで、モジュールを動的にインポートできます。この場合、Promise を返します。

import('/modules/my-module.js')
  .then((module) => {
    // module を使った何らかの処理
  });

この方法は await キーワードを使えます。

let module = await import('/modules/my-module.js');

標準的なインポート

AJAX JSONリクエストの処理を助ける補助モジュールからインポートします。

モジュール: file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

メインプログラム: main.js

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });

動的なインポート

下記は、ユーザーの行動 (今回はボタンのクリック) をもとにページ内に何らかの機能を読み込み、そのモジュール内の関数を呼び出す方法を示すものです。
方法はこれだけではありません。import() 関数は await も使えます。

const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
  link.addEventListener("click", e => {
    e.preventDefault();

    import('/modules/my-module.js')
      .then(module => {
        module.loadPageInto(main);
      })
      .catch(err => {
        main.textContent = err.message;
      });
  });
}

仕様

仕様書 策定状況 コメント
ECMAScript 2015 (6th Edition, ECMA-262)
Imports の定義
標準 初期定義
ECMAScript Latest Draft (ECMA-262)
Imports の定義
ドラフト  
tc39/proposal-dynamic-import Stage 3 動的インポートの初期定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
基本対応Chrome 完全対応 61Edge 完全対応 16
完全対応 16
完全対応 15
無効
無効 From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox 完全対応 60
完全対応 60
未対応 54 — 60
無効
無効 From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 47Safari 完全対応 10.1WebView Android 完全対応 61Chrome Android 完全対応 61Edge Mobile 完全対応 ありFirefox Android 完全対応 60
完全対応 60
未対応 54 — 60
無効
無効 From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 47Safari iOS 完全対応 10.1Samsung Internet Android 未対応 なしnodejs 完全対応 8.5.0
補足 無効
完全対応 8.5.0
補足 無効
補足 files must have suffix .mjs, not .js
無効 From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
Dynamic importChrome 完全対応 63Edge 未対応 なし
補足
未対応 なし
補足
補足 See development status.
Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1342012.
IE 未対応 なしOpera 完全対応 50Safari 完全対応 11.1WebView Android 完全対応 63Chrome Android 完全対応 63Edge Mobile 未対応 なしFirefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1342012.
Opera Android 完全対応 50Safari iOS 完全対応 11.1Samsung Internet Android ? nodejs ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

最終更新者: sutara79,