この記事は編集レビューを必要としています。ぜひご協力ください

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

これは Harmony(ECMAScript 6) 提案の一部であり、実験段階の技術です。
この技術の仕様は安定していません。ブラウザ互換性の一覧表を確認してください。またこれらの構文や動作は、仕様変更などにより、新しいバージョンのブラウザでは変更される可能性があるという点に注意してください。

次のコンテンツは最終的なECMAScript 6のModule仕様を反映していません。より正確なドキュメントとして、 ECMAScript 6 modules: the final syntaxを見てください。

スクリプトが、プロパティ、関数、およびオブジェクトを、その情報をエクスポートした署名付きスクリプトからインポートすることを可能にします。

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

構文

import name 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 alias from "module-name";
import defaultMember from "module-name";
import "module-name";
name
インポートされた値を受け取るオブジェクト名
member, memberN
エクスポートされたメンバをインポートするための名前
defaultMember
エクスポートされたデフォルトをインポートするための名前
alias, aliasN
インポートされたプロパティを受け取るオブジェクト名
module-name
インポートするモジュール名(ファイル名で指定する)

説明

nameパラメータはエクスポートされるメンバーを受け取るオブジェクト名。memberパラメータは各memberを特定するが、nameパラメータは全部インポートする。モジュールが一つのdefaultパラメータをエクスポートしたらnameはfunctionにもなる。以下は文法理解のための例。

モジュールの全コンテンツをインポート。myModuleは現在のスコープになる。

import myModule from "my-module.js";

モジュールの一つのメンバーのみインポート。myMemberは現在のスコープになる。

import {myMember} from "my-module.js";

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

import {foo, bar} from "my-module.js";

モジュールの全コンテンツをインポートする。同時に一部のメンバーを明示的に指定する。myModule, foo, barは現在のスコープになる。foomyModule.foobarmyModule.barと同じである。

import myModule, {foo, bar} from "my-module.js";

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

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

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

import "my-module.js";

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

or

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.js";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
}); 

仕様

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
Imports の定義
標準 Initial definition.
ECMAScript 2017 Draft (ECMA-262)
Imports の定義
ドラフト  

ブラウザ互換性テーブル

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 未サポート [1] 未サポート [2] 未サポート 未サポート 未サポート
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート

[1] 部分サポートはflag: --harmony-modulesコマンドラインで隠されています。 See this V8 bugを見てください。

[2] this Firefox bugを見てください。

関連項目

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

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