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 {}' // ここにはセミコロンを置きません
名前付きエクスポートは、さまざまな値をエクスポートするのに役立ちます。インポートするときに、対応する値を参照する名前を使用できます。
デフォルトエクスポートについては、モジュールごとにひとつだけです。関数、クラス、オブジェクトなどをデフォルトエクスポートすることができます。これはもっとも単純にインポートできますので、"主要な" エクスポート値であると考えられます。
例
名前付きエクスポートを使用する
モジュール側で以下のコードを使用します:
// 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; }
別のスクリプトでは、デフォルトエクスポートのインポートは簡単です:
// module "my-module.js" import cube from 'my-module'; console.log(cube(3)); // 27
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
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"