Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

この翻訳は不完全です。英語から この記事を翻訳 してください。

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

Importing defaults

It is possible to have default export (whether it is an object, a function, a class, etc.). Reciprocally, it is possible to use the import instruction to import such defaults.

The simplest version directly imports the default:

import myDefault from "my-module";

It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:

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
基本サポート 未サポート 未サポート[1] 未サポート Build 14342 未サポート 未サポート
機能 Android Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 36.0 未サポート 未サポート 未サポート 未サポート 36.0

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

関連項目

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

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