TypeScriptのexport defaultとexportの使い分けを完全解説！モジュールの基本
生徒
「TypeScriptでプログラムを作っていると、一つのファイルがどんどん長くなって読みづらくなってきました。ファイルを分ける方法ってありますか？」
先生
「ありますよ！TypeScriptには『モジュール』という仕組みがあって、機能ごとにファイルを分割して管理することができるんです。」
生徒
「ファイルを分けた後、どうやって別のファイルから中身を読み出すんですか？『export』とか『export default』という言葉を見かけたのですが……。」
先生
「鋭いですね。その2つは役割が少し違います。今回は、整理整頓された綺麗なコードを書くために必須の、書き出しと読み込みのルールを学びましょう！」
1. モジュールとは？（プログラムの部品化）
プログラミングの世界では、一つの大きなファイルに全ての命令を書くことはありません。料理に例えると、キッチンにある「冷蔵庫」「コンロ」「まな板」がそれぞれ独立した役割を持っているのと同じように、プログラムも「計算担当」「画面表示担当」「データ保存担当」といった具合に部品に分けて管理します。
この、分割されたプログラムの部品のことを「モジュール」と呼びます。TypeScript（タイプスクリプト）では、1つのファイルが1つのモジュールとして扱われます。別のファイルにある機能を使いたいときは、その機能を「外に出す（書き出し）」と「中に入れる（読み込み）」という作業が必要になります。
この「外に出す」ために使うのがexport（エクスポート）、「中に入れる」ために使うのがimport（インポート）という命令です。そして、書き出し方には大きく分けて「名前付きエクスポート」と「デフォルトエクスポート」の2種類があります。
2. export（名前付きエクスポート）の使い方
まずは、一番よく使われるexportについて解説します。これは「名前付きエクスポート」と呼ばれ、1つのファイルの中から複数の機能に名前をつけて外に公開したいときに使います。文房具セットの中から「鉛筆」「消しゴム」「定規」をそれぞれ個別に名前を呼んで取り出すようなイメージです。
書き出し方の例
例えば、算数の便利な計算式をまとめた math_utils.ts というファイルを作ってみましょう。
export const plus = (a: number, b: number) => a + b;
export const minus = (a: number, b: number) => a - b;
export const PI = 3.14;
読み込み方の例
これらの機能を使いたい別のファイル（例えば main.ts）では、波括弧 { } を使って名前を指定して読み込みます。
import { plus, PI } from "./math_utils";
console.log(plus(10, 5));
console.log(PI);
実行結果は以下のようになります。
15
3.14
ポイント： 名前付きエクスポートの場合、読み込む側は必ず書き出したときと同じ名前を使わなければなりません。また、1つのファイルからいくつでも書き出すことが可能です。
3. export default（デフォルトエクスポート）の使い方
次に、export defaultについて解説します。これは「デフォルトエクスポート」と呼ばれ、そのファイルにおける「メインの機能」を一つだけ外に出すときに使います。1つのファイルにつき1回しか使えません。
書き出し方の例
例えば、挨拶をする専用の greet.ts というファイルを作ります。このファイルの主役は「挨拶」という関数だけだとしましょう。
const sayHello = (name: string) => {
return `こんにちは、${name}さん！`;
};
export default sayHello;
読み込み方の例
デフォルトエクスポートを読み込むときは、波括弧 { } を使いません。さらに、読み込む側で好きな名前をつけることができます。
import MyGreeting from "./greet";
console.log(MyGreeting("田中"));
実行結果は以下のようになります。
こんにちは、田中さん！
ポイント： export default は「このファイルの代表選手」を出すイメージです。受け取る側が自由な名前で呼べるため便利ですが、大規模な開発では名前がバラバラになると混乱を招くこともあるため注意が必要です。
4. exportとexport defaultの大きな違い
ここで、初心者の方が混乱しやすい2つの違いを表で整理してみましょう。これを覚えれば、どちらを使うべきか迷わなくなります。
| 特徴 | export（名前付き） | export default（デフォルト） |
|---|---|---|
| 書き出せる数 | 1つのファイルに無制限 | 1つのファイルに1つだけ |
| 読み込み時の波括弧 | 必要 { name } |
不要 name |
| 読み込み時の名前 | 書き出し時と同じ名前 | 自由に変更できる |
| 主な用途 | 便利な道具箱、定数集など | 主要なクラス、1つの大きな関数など |
5. 名前空間（Namespace）という選択肢
「モジュール」がファイルを分ける仕組みであるのに対し、TypeScriptには「名前空間（Namespace）」という仕組みもあります。これはファイルの中身をさらに細かくグループ分けするための箱のようなものです。
最近のプログラム開発では、先ほど説明した「モジュール（ファイル分割）」を使うのが一般的ですが、古いコードの整理や、特定の場所で名前がぶつからないようにするために使われることがあります。
名前空間の書き方
namespace AnimalGroup {
export class Dog {
bark() { console.log("ワン！"); }
}
export class Cat {
meow() { console.log("ニャー！"); }
}
}
const myDog = new AnimalGroup.Dog();
myDog.bark();
このように、AnimalGroup という大きな箱（名前空間）の中に、Dog や Cat を入れることで、他の場所にある Dog という名前のプログラムと混ざらないように守ることができます。ただし、初心者の方はまずは「exportとimportによるファイル分割」を完璧に覚えることを優先しましょう。
6. どっちを使うべき？使い分けのコツ
「どっちを使えばいいの？」と迷ったときのガイドラインを教えます。基本的には以下のルールに従うと、プロが書くような綺麗なコードになります。
- 迷ったら export（名前付き）を使う： 読み込むときに名前が固定されるので、検索がしやすく、間違いが少なくなります。
- そのファイルの「主役」がはっきりしているなら export default： 例えば、1つのファイルに1つのクラス（設計図）だけを書くような場合は、デフォルトエクスポートが適しています。
- 複数の小さな機能をまとめるなら export： 設定値や数学の計算式、色コードの定義などは、バラバラにエクスポートして必要なものだけを取り出すのが効率的です。
パソコンを初めて触る方にとって、ファイルが分かれるというのは最初は難しく感じるかもしれません。しかし、家の中で「靴は玄関」「食器はキッチン」と片付けるのと同じで、プログラムも適切な場所に置いて、必要なときに取り出す。これがモジュール設計の本質です。
7. インポート時の便利なテクニック
export（名前付きエクスポート）をさらに便利に使うための読み込み方法をいくつか紹介します。これを知っておくと、コードがもっとスッキリしますよ。
名前を変えて読み込む（asキーワード）
もし、読み込む名前が自分のファイルの別の変数名と被ってしまったら、as を使ってニックネームをつけられます。
import { plus as addFunction } from "./math_utils";
console.log(addFunction(1, 2));
まとめて全部読み込む（スターインポート）
たくさんの機能がエクスポートされている場合、1つずつ書くのは大変です。そんな時は *（アスタリスク）を使って全部まとめて読み込むことができます。
import * as MyMath from "./math_utils";
console.log(MyMath.plus(1, 2));
console.log(MyMath.minus(5, 3));
このように書くと、MyMath という一つのバッグの中に全ての機能が入った状態になり、整理整頓された印象になりますね。
8. エクスポートを忘れるとどうなる？
もし、ファイルの中で export を書き忘れてしまったら、他のファイルからはその中身を絶対に見ることができません。これは「プライベート」な状態と呼ばれます。
なんでもかんでも export するのではなく、外で見せる必要がない計算の途中経過などは、あえて export しないことで、外部から変な使い方をされるのを防ぐことができます。これも立派なプログラムの設計技術の一つです。これを「カプセル化」と呼んだりします。
まずは、小さな関数を作って、それを別のファイルで読み込んで表示させる。この成功体験を積み重ねていきましょう。TypeScriptのモジュールシステムは、あなたが将来とても大きなシステムを作る際、最強の武器になってくれます。
