MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

export 文は、指定したファイル (またはモジュール) から関数、オブジェクト、プリミティブをエクスポートするために使用します。

注記: 現在、この機能はどのブラウザでもネイティブな実装がありません。Traceur CompilerBabelRollup といった多くのトランスパイラで実装されています。

構文

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

varletconstexport 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
基本サポート 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート

関連情報

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

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