デフォルトエクスポート vs 名前付きエクスポート

CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部 — レッスン 10/56。

JavaScriptモジュールでは、コードをエクスポートするための主な方法として、名前付きエクスポート（named exports）とデフォルトエクスポート（default exports）の2つがあります。

名前付きエクスポート（Named Exports）を使用すると、モジュールから複数の値をエクスポートできます。

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

名前付きエクスポートをインポートする場合、波括弧の中で全く同じ名前を使用する必要があります：

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

名前付きインポートの名前を変更する必要がある場合は、asキーワードを使用してエイリアスを作成します。

// app.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(5, 3));   // 8
console.log(minus(10, 4)); // 6

デフォルトエクスポートを使用すると、モジュールから単一のメインの値をエクスポートできます。

// user.js
const user = {
  name: 'John',
  age: 30
};

export default user;

デフォルトエクスポートをインポートする場合、波括弧（{}）を使わずに任意の名前を使用できます：

// app.js
import person from './user.js';

console.log(person.name); // 'John'

どちらをいつ使うべきか？ モジュールが複数の関連するユーティリティ（例：ヘルパー関数のコレクション）を提供する場合、名前付きエクスポート（named exports）を使用します。モジュールに1つの主要な目的またはメインの値（例：クラス、コンポーネント、または設定オブジェクト）がある場合は、デフォルトエクスポート（default export）を使用します。

1つのモジュール内で両方のタイプのエクスポートを組み合わせることができます。

// vehicle.js
export const wheels = 4;
export const doors = 4;

const car = {
  brand: 'Toyota',
  model: 'Corolla'
};

export default car;

そして、これらをまとめてインポートします：

// app.js
import myCar, { wheels, doors } from './vehicle.js';

console.log(myCar.brand);  // 'Toyota'
console.log(wheels);       // 4

チャレンジ

簡単

2つのファイルがあります。あなたのタスクは、calculator.js でエクスポートを設定し、main.js でインポートを設定することです。

calculator.js 内：calculate を default として、square を named としてエクスポートしてください。
main.js 内：両方の関数を正しくインポートしてください。

テストでは以下を確認します：

calculate にデフォルトエクスポートが使用されていること
square に名前付きエクスポートが使用されていること
両方のインポートが正しく機能していること

チートシート

名前付きエクスポート (Named Exports) — 正確な名前を使用して複数の値をエクスポートおよびインポートします：

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

// app.js
import { add, subtract } from './math.js';
import { add as sum } from './math.js'; // "as" を使ったエイリアス

デフォルトエクスポート (Default Exports) — 1つの主要な値をエクスポートします。任意の名前でインポートでき、波括弧は不要です：

// user.js
export default { name: 'John', age: 30 };

// app.js
import person from './user.js';

両方の組み合わせ — デフォルトインポートを最初に記述し、名前付きインポートを波括弧の中に記述します：

// vehicle.js
export const wheels = 4;
export default { brand: 'Toyota', model: 'Corolla' };

// app.js
import myCar, { wheels } from './vehicle.js';

使い分けのタイミング： 関連する複数のユーティリティには名前付きエクスポートを使用します。モジュールの単一の主要な値（クラス、コンポーネント、設定など）にはデフォルトエクスポートを使用します。

自分で試してみよう

// TODO: ここでcalculator.jsから両方の関数をインポートします


// テスト
console.log(calculate(10, 5, '+')); // 15を出力するはずです
console.log(square(4));             // 16を出力するはずです