Named ExportとDefault Exportの理解

Named Export

Named Exportは、モジュールから複数の変数、関数、クラスをエクスポートする際に使用します。各エクスポートされた要素は名前を持っており、これを通じて必要な部分だけを選択的にインポートすることができます。

例えば、次のようにコードを記述します。

// utils.js
export const PI = 3.14;

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

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

上記のようにエクスポートすると、使用する場所では次のようにインポートできます。

// main.js
import { PI, add, Calculator } from './utils.js';

console.log(PI); // 3.14
console.log(add(2, 3)); // 5

const calc = new Calculator();
console.log(calc.subtract(5, 2)); // 3

Default Export

Default Exportは、モジュールから単一のデフォルト値をエクスポートする際に使用します。モジュールごとに1つのDefault Exportのみを持つことができ、インポートする際に名前を自由に指定できます。

次のようにエクスポートし、

// logger.js
export default function log(message) {
  console.log(message);
}

次のようにインポートします。

// app.js
import log from './logger.js';

log('こんにちは！'); // こんにちは！

主な違い

1. エクスポート数
   • Named Export: 複数可能
   • Default Export: モジュールごとに1つのみ可能
2. インポート構文
   • Named Export: import { name1, name2 } from './module';
   • Default Export: import anyName from './module';
3. 名前の変更
   • Named Export: import { originalName as newName } from './module';
   • Default Export: インポート時に自由に名前を指定可能
4. 一括インポート
   • Named Export: import * as moduleName from './module';
   • Default Export: すでに1つのオブジェクトとして扱われるため、一括インポートは不要
5. 動的インポート
   • Named Export: import('./module').then(module => module.namedExport)
   • Default Export: import('./module').then(module => module.default)

いつどちらを使うべきか？

• Named Export: モジュールから複数のユーティリティ関数や変数を出力し、それらを選択的にインポートして使用したい場合に便利です。
• Default Export: モジュールの主要な機能やクラスを出力する際に使用すると良いでしょう。

Avoid Export Default (Export Defaultを避ける)

こちらの文書では、Export Defaultの使用を控えるよう推奨しています（少なくともTypeScriptプロジェクトでは）。主な理由は以下の通りです。

名前の変更がサポートされない

IDEのリファクタリング機能を使用して名前を変更する際、自動的に変更されません。例えば、TestComponentの名前をTestComponent2に変更しても、インポートしている部分では変更されません。しかし、Named Exportを使用している場合は、正しく変更されます。

自由な命名による一貫性の欠如

• default exportを使用すると、インポート時に任意の名前を使用できるため、同じモジュールを異なるファイルで異なる名前で使用することができてしまいます。
• これはコードの一貫性を損ない、混乱を招く可能性があります。

型情報の不足

• default exportは型情報を提供しないため、どのような型のオブジェクトや関数がエクスポートされているのかが不明確になる場合があります。