import 文 は、外部モジュールや他のスクリプトなどからエクスポートされた関数、オブジェクト、プリミティブをインポートするために使用します。
注記: この機能は現在どのブラウザにも実装されていません。この機能は、Traceur CompilerやES6 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";
モジュールの複数のメンバーをインポート。foo
と bar
は現在のスコープになる。
import {foo, bar} from "my-module";
モジュールの全コンテンツをインポートする。同時に一部のメンバーを明示的に指定する。myModule
, foo
, bar
は現在のスコープになる。foo
は myModule.foo
と bar
は myModule.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 をご覧ください。
関連項目
export
- Previewing ES6 Modules and more from ES2015, ES2016 and beyond
- ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
- Axel Rauschmayer's book: "Exploring JS: Modules"