TypeScript: Default ExportとNamed Exportの理解と使い方

by

Default Exportとは

TypeScriptやJavaScriptのモジュールシステムにおけるdefault exportは、モジュールが一つの値をエクスポートするための特別な構文です。この値は関数、オブジェクト、クラス、変数など、JavaScriptの任意の値をエクスポートすることができます。

default exportは、各モジュールで一度だけ使用することができます。エクスポートされた値はimport文を使用して他のモジュールからインポートすることができます。

以下に、default exportの基本的な使用方法を示します。

// myModule.ts
export default function() { console.log("Hello, world!"); }

// main.ts
import myFunction from './myModule';
myFunction();  // Outputs: "Hello, world!"

上記の例では、myModule.tsファイルが一つの関数をdefault exportしています。そして、main.tsファイルがその関数をimport文を使ってインポートしています。default exportされた値は、任意の名前でインポートすることができます（上記の例ではmyFunctionという名前でインポートしています）。

Named Exportとは

TypeScriptやJavaScriptのモジュールシステムにおけるnamed exportは、モジュールが複数の値をエクスポートするための構文です。これらの値は関数、オブジェクト、クラス、変数など、JavaScriptの任意の値をエクスポートすることができます。

named exportは、各モジュールで複数回使用することができます。エクスポートされた値はimport文を使用して他のモジュールからインポートすることができます。

以下に、named exportの基本的な使用方法を示します。

// myModule.ts
export function func1() { console.log("Hello, world!"); }
export const variable1 = "Hello, world!";

// main.ts
import { func1, variable1 } from './myModule';
func1();  // Outputs: "Hello, world!"
console.log(variable1);  // Outputs: "Hello, world!"

上記の例では、myModule.tsファイルが一つの関数と一つの変数をnamed exportしています。そして、main.tsファイルがその関数と変数をimport文を使ってインポートしています。named exportされた値は、エクスポート時と同じ名前でインポートする必要があります（上記の例ではfunc1とvariable1という名前でインポートしています）。

Default ExportとNamed Exportの違い

TypeScriptやJavaScriptのモジュールシステムにおけるdefault exportとnamed exportは、それぞれ異なる目的と使用法を持っています。以下に、その主な違いをまとめます。

  1. エクスポートの数:

    • default exportは、各モジュールで一度だけ使用することができます。つまり、一つのモジュールから一つの値をエクスポートすることができます。
    • 一方、named exportは、各モジュールで複数回使用することができます。つまり、一つのモジュールから複数の値をエクスポートすることができます。

  2. インポートの方法:

    • default exportされた値は、任意の名前でインポートすることができます。これは、エクスポート時とインポート時で名前が一致する必要がないためです。
    • 一方、named exportされた値は、エクスポート時と同じ名前でインポートする必要があります。これは、エクスポート時とインポート時で名前が一致する必要があるためです。

  3. 使用の目的:

    • default exportは、モジュールが主に一つの機能を提供する場合に便利です。例えば、ReactコンポーネントやExpressのルーターなどがこれに該当します。
    • 一方、named exportは、モジュールが複数の機能を提供する場合に便利です。例えば、ユーティリティ関数の集合や設定オブジェクトなどがこれに該当します。

以上の違いを理解することで、default exportとnamed exportを適切に使い分けることができます。それぞれの使用法と特性を理解し、プロジェクトの要件に最適なエクスポート方法を選択しましょう。

どちらを使うべきか

default exportとnamed exportのどちらを使用するべきかは、プロジェクトの要件やコードの構造によります。

  1. モジュールが一つの主要な機能を提供する場合:

    • モジュールが一つの主要な機能（例えば、ReactコンポーネントやExpressのルーターなど）を提供する場合、その機能をdefault exportすることが一般的です。これにより、そのモジュールをインポートする際にはその主要な機能が直接インポートされ、使用が容易になります。

  2. モジュールが複数の機能を提供する場合:

    • モジュールが複数の機能（例えば、ユーティリティ関数の集合や設定オブジェクトなど）を提供する場合、それらの機能を個別にnamed exportすることが一般的です。これにより、使用者は必要な機能だけを選択してインポートすることができます。

  3. コードの可読性と保守性:

    • named exportを使用すると、エクスポートされた値がどのモジュールから来たのかが明確になり、コードの可読性と保守性が向上します。一方、default exportは任意の名前でインポートできるため、コードの可読性を損なう可能性があります。

以上のように、default exportとnamed exportのどちらを使用するかは、プロジェクトの要件やコードの構造によります。それぞれの特性と利点を理解し、適切に使い分けることが重要です。また、一貫性を保つためにも、プロジェクト内でのエクスポートの方法についてはチームで合意を形成することをお勧めします。

実例とコード

以下に、default exportとnamed exportの使用例を示します。

Default Exportの使用例

まず、一つの関数をdefault exportするモジュールを作成します。

// greet.ts
export default function greet() {
    return "Hello, world!";
}

次に、この関数をインポートして使用します。

// main.ts
import greet from './greet';
console.log(greet());  // Outputs: "Hello, world!"

Named Exportの使用例

次に、複数の関数をnamed exportするモジュールを作成します。

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

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

これらの関数をインポートして使用します。

// main.ts
import { add, subtract } from './math';
console.log(add(1, 2));  // Outputs: 3
console.log(subtract(1, 2));  // Outputs: -1

以上の例から、default exportとnamed exportの使い方と違いを理解することができます。それぞれの特性を理解し、適切に使い分けることが重要です。また、一貫性を保つためにも、プロジェクト内でのエクスポートの方法についてはチームで合意を形成することをお勧めします。

コメントする