export の書き方

export キーワードを使うと、モジュール内の変数、関数、クラスなどを外部に公開できます。エクスポートされた値は、他のモジュールから import で読み込むことができます。

名前付きエクスポート（Named Export）

個別の値に名前を付けてエクスポートする方法です。1つのモジュールから複数の値をエクスポートできます。

// 宣言と同時にエクスポート
export const PI = 3.14159;

export function square(x) {
  return x * x;
}

export class Calculator {
  add(a, b) {
    return a + b;
  }
}

まとめてエクスポート

宣言とエクスポートを分離することもできます。ファイルの末尾でまとめてエクスポートするパターンがよく使われます。

const PI = 3.14159;

function square(x) {
  return x * x;
}

class Calculator {
  add(a, b) {
    return a + b;
  }
}

// まとめてエクスポート
export { PI, square, Calculator };

宣言時エクスポート

export を宣言の前に書く。何がエクスポートされるか一目でわかる。

まとめてエクスポート

ファイル末尾で一覧化。全体の公開 API を把握しやすい。

デフォルトエクスポート（Default Export）

モジュールのメインとなる値を1つだけエクスポートする方法です。1つのモジュールにつき1つだけ指定できます。

// 関数をデフォルトエクスポート
export default function greet(name) {
  return `Hello, ${name}!`;
}

// クラスをデフォルトエクスポート
export default class User {
  constructor(name) {
    this.name = name;
  }
}

無名関数や無名クラスもデフォルトエクスポートできます。

export default function(x) {
  return x * 2;
}

名前付きとデフォルトの併用

1つのモジュールで、名前付きエクスポートとデフォルトエクスポートを併用することもできます。

// utils.js
export const VERSION = "1.0.0";

export function helper() {
  // ...
}

export default function main() {
  // メイン処理
}

変数のエクスポート

let や const で宣言した変数もエクスポートできます。

export let count = 0;
export const config = {
  debug: true,
  version: "1.0"
};

ただし、エクスポートされた変数を外部から直接書き換えることはできません。変更が必要な場合は、関数を通じて行います。

// counter.js
export let count = 0;

export function increment() {
  count++;
}

export function getCount() {
  return count;
}

エクスポートの注意点

エクスポートはトップレベルのみ

関数内や if 文の中からはエクスポートできません。モジュールのトップレベルでのみ使用できます。

同じ名前は一度だけ

同じ名前を複数回エクスポートすることはできません。

// エラーになる例
function setup() {
  export const value = 1; // SyntaxError
}

if (condition) {
  export const data = {}; // SyntaxError
}

エクスポートの書き方を理解することで、適切にモジュールの公開 API を設計できるようになります。