JavaScript/export

export

export は、JavaScript モジュールを外部で利用可能にするためのキーワードです。export を使用することで、関数、オブジェクト、クラス、または変数を他のモジュールからインポートして使用できるようになります。モジュールは ES6（ES2015）で導入され、ファイルやコードを整理しやすくするために役立ちます。

構文

// 名前付きエクスポート
export { name1, name2, ... };

// 名前付きエクスポートと同時に宣言
export let variableName;
export function functionName() { ... }
export class ClassName { ... }

// デフォルトエクスポート
export default expression;

説明

• export は2種類のエクスポート方式をサポートしています：名前付きエクスポート と デフォルトエクスポート。
• 名前付きエクスポート は、複数の値をエクスポートする場合に使用します。
• デフォルトエクスポート は、モジュールで1つだけエクスポートする場合に使用します。

使用例

// 名前付きエクスポート
export const name = 'John';
export function greet() {
  console.log('Hello, ' + name);
}

// デフォルトエクスポート
export default function () {
  console.log('This is the default export.');
}

この例では、name と greet が名前付きでエクスポートされ、匿名関数がデフォルトエクスポートされています。

インポートとの関係

export された値は、import を使って他のモジュールで利用することができます。

// 名前付きエクスポートのインポート
import { name, greet } from './module.js';

// デフォルトエクスポートのインポート
import defaultExport from './module.js';

名前付きエクスポートは、波括弧 {} を使用してインポートし、デフォルトエクスポートはそのまま任意の名前でインポートします。

注意点

• 同じモジュール内で複数の名前付きエクスポートを行うことができます。
• デフォルトエクスポートは1つだけに制限されます。
• 名前付きエクスポートとデフォルトエクスポートは同時に使用できます。

関連項目

• import
• モジュール

参考

• MDN Web Docs: export
• ECMA-262: export 文