import

This article is in need of an editorial review.

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

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

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

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

構文

import 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 name , { member [ , [...] ] } from "module-name";
import "module-name" as name;
name
インポートされた値を受け取るオブジエンド名
member, memberN
エクスポートされたメンバーをインポートするための名前
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";

メンバーをインポートする際にもっと使いやすい名前をaliasしでインポートする方法。shortNameはカレントスコープになる。

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

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

import "my-module.js";

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)
The definition of 'Imports' in that specification.
Standard Initial definition.

ブラウザーの対応状況

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を見てください。

関連項目

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

Contributors to this page: YuichiNukiyama, jungjoo, teoli, ethertank, Mgjbot, Nanto vi
最終更新者: YuichiNukiyama,
サイドバーを隠す