import

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';

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

つぎのコードは、fooとbarを現在のスコープに加えます。

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

仕様

ブラウザ互換性

関連項目

• export
• Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• ES modules: A cartoon deep-dive, Hacks blog post by Lin Clark
• Axel Rauschmayer's book: "Exploring JS: Modules"