import

import 文 は、外部モジュールや他のスクリプトなどからエクスポートされた関数、オブジェクト、プリミティブをインポートするために使用します。

構文

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

name

インポートされた値を受け取るオブジェクト名

member, memberN

エクスポートされたメンバをインポートするための名前。

defaultMember

エクスポートされたデフォルトをインポートするための名前。

alias, aliasN

インポートされたプロパティを受け取るオブジェクト名。

module-name

インポートするモジュール名。これはファイル名です。

説明

name パラメータはエクスポートされるメンバーを受け取るオブジェクト名です。member パラメータは各 member を特定しますが、name パラメータはすべてインポートします。モジュールが一つの default パラメータをエクスポートした場合、name は関数にもなります。以下は文法理解のための例です。

モジュールのすべてのコンテンツをインポート。myModule は、"my-module.js" からエクスポートされた紐づけも含めて現在のスコープになります。

import * as myModule from "my-module";

モジュールの一つのメンバーのみインポート。myMember は現在のスコープになる。

import {myMember} from "my-module";

モジュールの複数のメンバーをインポート。foo と bar は現在のスコープになる。

import {foo, bar} from "my-module";

モジュールの全コンテンツをインポートする。同時に一部のメンバーを明示的に指定する。myModule, foo, bar は現在のスコープになる。foo は myModule.foo と bar は myModule.bar と同じである。

import {reallyReallyLongModuleMemberName as shortName} from "my-module";

メンバーの名前を指定してインポートする方法。shortName は現在のスコープになる。

import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";

付随的効果だけのために、どの名前にもバインドせずに全モジュールをインポートする場合。

import "my-module";

default　のインポート

（オブジェクトでも関数でも、クラスでも）default エクスポートができます。相互的に、default をインポートするために import 操作を使用できます。

直接 default をインポートする単純な方法：

import myDefault from "my-module";

上記で見た（名前空間インポートや名前付きインポート）を使用して default 構文を使用することもできます。このような場合、default インポートは最初に宣言する必要があります。たとえば：

import myDefault, * as myModule from "my-module";
// myModule used as a namespace

または、

import myDefault, {foo, bar} from "my-module";
// 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 "file";
getUsefulContents("https://www.example.com", data => {
  doSomethingUseful(data);
});

仕様

ブラウザ互換性

[1] バグ 568953 をご覧ください。

[2]　Chromium bug 1569 をご覧ください。

関連項目

• export
• Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• Axel Rauschmayer's book: "Exploring JS: Modules"