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

注記: この機能は、現時点でブラウザにネイティブに実装され始めています。この機能は、Traceur CompilerBabelRollupWebpack のような多くのトランスコンパイラで実装されています。

構文

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 Latest Draft (ECMA-262)
Imports の定義
ドラフト  

ブラウザ互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
基本サポート 60 [2][5] 54 (54) [1][5] 未サポート 38 (14.14342) [3][5] 未サポート Tech Preview 21[4]
機能 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 をご覧ください。

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

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

[5] ECMAScript modules in browsers をご覧ください。

[6] Modules (ES6) - Chrome Platform Status をご覧ください。

関連項目

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

 最終更新者: WhiteHawk-taka,