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

注記: この機能は現在どのブラウザにも実装されていません。この機能は、Traceur CompilerES6 Module Transpilerのようなトランスコンパイラで実装されています。

構文

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

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

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

仕様

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

ブラウザ互換性

機能 Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
基本サポート 未サポート[2] 未サポート[1] 未サポート Build 14342 未サポート 未サポート
機能 Android Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 36.0 未サポート 未サポート 未サポート 未サポート 36.0

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

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

関連項目

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

 このページの貢献者: ambi, kazu69, YuichiNukiyama, dskmori, lv7777, Kouhei, jungjoo, teoli, ethertank, Mgjbot, Nanto vi
 最終更新者: ambi,