デフォルトエクスポートと名前付きエクスポート | ES6モジュール | JavaScript 超完全入門 基本から発展までのすべて

amazon

プライム感謝祭

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

デフォルトエクスポートと名前付きエクスポートとは？

JavaScriptのES Modules（ESM）では、他のファイルで利用できるように機能や変数を公開することをエクスポート（export）といいます。

エクスポートには、デフォルトエクスポート（default export）と名前付きエクスポート（named export）の2種類があります。それぞれ用途が異なるため、違いを理解して使い分けることが大切です。

デフォルトエクスポート

デフォルトエクスポートは、そのモジュールで最も重要な機能を1つだけ公開したい場合に使用します。

インポートする側では、好きな名前を付けて利用できます。

デフォルトエクスポートの例

// greet.js
export default function greet(name) {
    return `Hello, ${name}!`;
}

// main.js
import greet from "./greet.js";

console.log(greet("Alice"));

実行結果

Hello, Alice!

プログラムの解説

1. greet.jsでgreet()をデフォルトエクスポートしています。
2. main.jsではimport greetで読み込んでいます。
3. デフォルトエクスポートは好きな名前で受け取ることができます。

例えば、次のように名前を変更しても動作します。

import hello from "./greet.js";

console.log(hello("Alice"));

名前付きエクスポート

名前付きエクスポートは、複数の関数や変数を公開したい場合に使用します。

インポートするときは、波括弧（{ }）を使って読み込みます。

名前付きエクスポートの例

// math.js
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// main.js
import { add, subtract } from "./math.js";

console.log(add(10, 5));
console.log(subtract(10, 5));

実行結果

15
5

プログラムの解説

1. add()とsubtract()をそれぞれエクスポートしています。
2. import { ... }で必要な関数だけを読み込みます。
3. 複数の関数を1つのファイルにまとめられます。

デフォルトエクスポートと名前付きエクスポートの違い

名前を変更してインポートする

名前付きエクスポートでは、asを使って別名を付けることもできます。

// math.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add as sum } from "./math.js";

console.log(sum(10, 5));

この例では、addをsumという名前で利用しています。

デフォルトエクスポートと名前付きエクスポートを同時に使う

1つのモジュールでは、デフォルトエクスポート1つと、名前付きエクスポートを複数組み合わせることもできます。

// utils.js
export default function hello() {
    console.log("Hello");
}

export const version = "1.0";

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

読み込む側は次のようになります。

import hello, { version, add } from "./utils.js";

hello();
console.log(version);
console.log(add(2, 3));

どちらを使えばよい？

一般的には、次のような使い分けがよく行われます。

• そのファイルの主役となる機能が1つなら、デフォルトエクスポート。
• 複数の便利な関数や定数を公開するなら、名前付きエクスポート。
• ライブラリでは名前付きエクスポートが採用されることが多い。

最近では、IDEによる補完が利用しやすくなることから、名前付きエクスポートを積極的に採用するプロジェクトも増えています。

まとめ

• デフォルトエクスポートは、モジュールから1つだけ主要な機能を公開するときに使用します。
• デフォルトエクスポートは、インポート時に好きな名前を付けられます。
• 名前付きエクスポートは、複数の関数や変数を公開できます。
• 名前付きエクスポートは、通常は同じ名前でインポートしますが、asで別名も付けられます。
• 1つのモジュールでは、デフォルトエクスポートと名前付きエクスポートを組み合わせることもできます。
• 用途に応じて使い分けることで、保守性の高いモジュールを作成できます。