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

現在作成中です。今後加筆修正してまいります。
スポンサーリンク
スポンサーリンク

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

JavaScriptのES6モジュールでは、デフォルトエクスポートと名前付きエクスポートの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!

この例では、greet.jsというファイルからデフォルトでgreet関数がエクスポートされています。main.jsでインポートする際に、関数名は任意に決めることができ、自由に使うことができます。

名前付きエクスポート

名前付きエクスポートは、モジュールから複数の要素をエクスポートする場合に使用されます。各要素は名前付きでエクスポートされ、インポートする際にはエクスポートされた名前をそのまま使うか、名前を変更してインポートすることが可能です。

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

// 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));        // 15
console.log(subtract(10, 5));   // 5

この例では、math.jsファイルからaddとsubtractという2つの関数が名前付きでエクスポートされています。main.jsでは、それぞれをインポートし、そのままの名前で利用しています。

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

デフォルトエクスポートと名前付きエクスポートの違いは、エクスポートできる要素の数や、インポートする際の柔軟性にあります。

エクスポート方式 特徴
デフォルトエクスポート 1つのモジュールに対して1つの要素のみエクスポートでき、インポート時に名前を自由に指定可能。
名前付きエクスポート 複数の要素をエクスポートでき、インポート時にはエクスポートされた名前で利用するか、名前を変更可能。

名前の変更

名前付きエクスポートでは、インポートする際に名前を変更して使用することも可能です。これは、同じ名前の関数や変数が他のモジュールで使われている場合に役立ちます。

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

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

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

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

この例では、math.jsからインポートしたadd関数の名前をsumとして使用しています。このように、名前の衝突を避けつつ、必要な機能をインポートできます。

まとめ

JavaScriptのES6モジュールにおけるデフォルトエクスポートと名前付きエクスポートは、それぞれ異なる用途に応じて使い分けられます。デフォルトエクスポートは、1つの主要な機能やデータをモジュールから提供する際に便利で、名前付きエクスポートは複数の機能をモジュール化し、それぞれを柔軟にインポート・利用する際に適しています。モジュールを適切にエクスポートすることで、コードの再利用性や管理のしやすさが大幅に向上します。

スポンサーリンク