この記事は編集レビューを必要としています。ぜひご協力ください。
export 文は、指定したファイル (またはモジュール) から関数、オブジェクト、プリミティブをエクスポートするために使用します。
注記: 現在、この機能はどのブラウザでもネイティブな実装がありません。Traceur Compiler、Babel、Rollup といった多くのトランスパイラで実装されています。
構文
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // var も使用可
export let name1 = …, name2 = …, …, nameN; // var, const も使用可
export default expression;
export default function (…) { … } // class, function* も使用可
export default function name1(…) { … } // class, function* も使用可
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
nameN- (別のスクリプトで
importを使用してインポートできるようにするため) エクスポートする識別子。
説明
エクスポート方法は 2 種類あり、それぞれ上記の構文のひとつに対応します:
- 名前付きエクスポート:
export { myFunction }; // 前に宣言した関数をエクスポート export const foo = Math.sqrt(2); // 定数をエクスポート - デフォルトエクスポート (スクリプトごとに 1 つに限る):
export default function() {} // または 'export default class {}' // ここにはセミコロンを置きません
名前付きエクスポートは、さまざまな値をエクスポートするのに役立ちます。インポートするときに、同じ名前で対応する値を参照できます。
デフォルトエクスポートについては、モジュールごとにひとつだけです。関数、クラス、オブジェクトなどをデフォルトエクスポートすることができます。これはもっとも単純にインポートできますので、"主要な" エクスポート値であると考えられます。
デフォルトエクスポートをエクスポートする: 次の構文はインポートしたモジュールのデフォルトエクスポートをエクスポートしません:
export * from …;
もしデフォルトエクスポートをエクスポートする必要がある場合、代わりに次のコードを使用してください:
import mod from "mod"; export default mod;
例
名前付きエクスポートを使用する
モジュール側で以下のコードを使用します:
// module "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
この方法では、別のスクリプト (import を参照) で以下のように使用できます:
import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
デフォルトエクスポートを使用する
値をひとつエクスポートしたい、あるいはモジュールでフォールバック先の値を持ちたい場合は、デフォルトエクスポートを使用するとよいでしょう:
// module "my-module.js"
export default function cube(x) {
return x * x * x;
}
別のスクリプトでは、デフォルトエクスポートのインポートは簡単です:
import cube from 'my-module'; console.log(cube(3)); // 27
var、let、constはexport defaultと共に使えないことに注意してください。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| ECMAScript 2015 (6th Edition, ECMA-262) Exports の定義 |
標準 | 最初期の定義 |
| ECMAScript 2017 Draft (ECMA-262) Exports の定義 |
ドラフト |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 未サポート | 未サポート | 未サポート | 未サポート | 未サポート |
| 機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | 未サポート | 未サポート | 未サポート | 未サポート | 未サポート | 未サポート |
関連情報
import- ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
- Axel Rauschmayer's book: "Exploring JS: Modules"