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 パラメータは個々のメンバーを指定しますが、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";

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

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

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

import "my-module";

複数のメンバーの名前を指定してインポートする。

import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "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("http://www.example.com", data => {
  doSomethingUseful(data);
});

仕様

ブラウザ互換性

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

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

[3] "Enable experimental JavaScript features" フラグ(about:flags) を有効にする必要があります

[4] Safari Technical Preview 21 Release Notes をご覧ください

関連項目

• 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"