導入
フロントエンド開発において、モジュール化は避けて通れない設計の基礎です。特にReactやVue、あるいはPureなTypeScript環境で開発を行う際、「Default export」と「Named export」のどちらを使うべきか迷った経験はないでしょうか。Named exportを適切に採用することは、コードの可読性を高め、IDEの強力なオートコンプリート機能を最大限に活用し、リファクタリングを容易にするという大きなメリットがあります。本記事では、Named exportの正しい使い方と、なぜこれが実務で推奨されるのかを解説します。
基礎知識
JavaScriptのモジュールシステム（ES Modules）には、主に「Default export（デフォルトエクスポート）」と「Named export（名前付きエクスポート）」の2種類が存在します。
Default exportは、ファイルごとに1つだけ定義でき、インポート側で任意の名前を付けられるのが特徴です。一方、Named exportは1つのファイル内で複数の関数、変数、クラスを公開でき、インポート側は「エクスポートされた名前」と完全に一致する名前でインポートする必要があります。この「名前の一致」が、大規模開発における依存関係の明確化において非常に重要な役割を果たします。
実装/解決策
実務では、ユーティリティ関数やコンポーネントライブラリを作成する際、Named exportを基本とすることをお勧めします。これにより、インポート文を見ただけで「どのファイルから何が読み込まれているのか」が明確になり、IDEの自動インポート機能も正確に動作します。
実装のコツは、ファイル末尾でまとめてエクスポートするか、宣言時に直接エクスポートすることです。
サンプルプログラム
以下は、実務でよく見かけるユーティリティ関数の構成例です。
// utils/formatters.ts
// 名前付きエクスポートを宣言時に行う方法
export const formatDate = (date: Date): string => {
return date.toISOString().split(‘T’)[0];
};
// 別の関数も同じファイルでエクスポート可能
export const formatCurrency = (amount: number): string => {
return `¥${amount.toLocaleString()}`;
};
// インポート側の例
import { formatDate, formatCurrency } from ‘./utils/formatters’;
const today = new Date();
console.log(formatDate(today)); // 本日の日付を表示
console.log(formatCurrency(1000)); // 1,000円という形式を表示
// 別名でインポートしたい場合は as キーワードを使用
import { formatDate as formatDateStr } from ‘./utils/formatters’;
応用・注意点
Named exportを運用する上で、現場で陥りやすい注意点がいくつかあります。
1. Barrelファイル（index.ts）の活用
フォルダ直下にindex.tsを作成し、各モジュールをまとめてエクスポートすることで、外部からのインポートパスを短縮できます。ただし、循環参照には注意が必要です。
2. Default exportとの混在
1つのファイルでNamed exportとDefault exportを混在させることは技術的には可能ですが、チーム開発では避けるべきです。インポートの書き方が統一されず、コードレビューの負荷が増大するためです。原則として「すべてNamed exportにする」というルールをプロジェクトの規約（eslint-plugin-import等）で強制することをお勧めします。
3. リファクタリング時のメリット
Named exportを使用していると、関数名や変数名を変更した際に、IDEがプロジェクト全体を検索してインポート箇所も自動的に修正してくれます。Default exportだとこの追従が難しい場合があるため、Named exportは長期的な保守運用において圧倒的に有利です。