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

構文

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";
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文を用いて明示的ににエクスポートされると、 my-moduleが現在のスコープに加えられます。

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 used as a namespace

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

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

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); });

仕様

仕様書 策定状況 コメント
ECMAScript 2015 (6th Edition, ECMA-262)
Imports の定義
標準 初回定義
ECMAScript Latest Draft (ECMA-262)
Imports の定義
ドラフト  

ブラウザ互換性

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応61

16

151

60

54 — 602

なし4710.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし61 あり

60

54 — 602

4710.1 なし

1. From version 15: this feature is behind the Experimental JavaScript Features preference.

2. From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 8: this feature is behind the --experimental-modules runtime flag.

関連項目

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

最終更新者: irxground,