Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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 パラメータは各 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";

モジュールの全コンテンツをインポートする。同時に一部のメンバーを明示的に指定する。myModule, foo, bar は現在のスコープになる。foomyModule.foobarmyModule.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);
});

仕様

仕様書 策定状況 コメント
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 をご覧ください。

関連項目

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

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