サンプルコードで身につける: モジュール — import と export

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1named export の基本

named export の基本形です。math.ts 側で公開したい関数や定数に export を付け、main.ts 側で import { 名前 } と波カッコに同じ名前を書いて取り込みます。1つのファイルからいくつでも export できます。

// ── math.ts ──
// 公開したいものに export を付ける
export function add(a: number, b: number): number {
  return a + b;
}
export const TAX_RATE = 0.1;

// ── main.ts ──
// 波カッコの中に、公開された名前をそのまま書く(named import)
import { add, TAX_RATE } from "./math";

console.log(add(100, 20));         // 120
console.log(480 * (1 + TAX_RATE)); // 528

2default export — ファイルの代表を1つ公開する

default export は「そのファイルの代表」を1つだけ公開する書き方です。受け取る側は波カッコを付けず、好きな名前を付けられます(ここでは AppLogger)。React のコンポーネントのように、1ファイルに1つの主役があるコードでよく使われます。

// ── logger.ts ──
// ファイルの代表を1つだけ公開する default export
export default class Logger {
  log(message: string): void {
    console.log("[LOG] " + message);
  }
}

// ── main.ts ──
// default export は波カッコなしで、好きな名前を付けて受け取る
import AppLogger from "./logger";

const appLogger = new AppLogger();
appLogger.log("起動しました"); // [LOG] 起動しました

3import type — 型だけを取り込む

型としてしか使わないものは import type で取り込みます。コンパイル後の JavaScript からこの行は完全に消えるので、実行時の無駄がありません。値(関数)の import と型の import を分けて書くと、ファイル間の依存が読み取りやすくなります。

// ── user.ts ──
export interface User {
  id: number;
  userName: string;
}
export function createGuest(): User {
  return { id: 0, userName: "guest" };
}

// ── main.ts ──
import { createGuest } from "./user"; // 値の import
import type { User } from "./user";   // 型だけの import(JS からは消える)

const guestUser: User = createGuest();
console.log(guestUser.userName); // guest

4再エクスポートと as による名前の変更

export ... from は、別ファイルの公開物を取り込まずにそのまま再公開(re-export)する書き方です。as を使えば公開する名前も変えられます。内部のファイル構成を変えても、利用側の import 文を変えずに済ませたいときに使います。

// ── format.ts ──
export function formatPrice(value: number): string {
  return value + "円";
}

// ── pricing.ts ──
// 取り込まずにそのまま再公開する(re-export)。as で公開名も変えられる
export { formatPrice as formatYen } from "./format";

// ── main.ts ──
import { formatYen } from "./pricing";

console.log(formatYen(19800)); // 19800円

5バレルファイル — フォルダの窓口を1つにする

フォルダ内の公開物を index.ts に集めて export * でまとめ直したものをバレルファイルと呼びます。利用側は個々のファイル名を知らなくても、フォルダ名だけで import できます。実務のプロジェクトの components や utils フォルダでよく見る構成です。

// ── utils/date.ts ──
export function formatDate(year: number, month: number): string {
  return year + "年" + month + "月";
}

// ── utils/text.ts ──
export function shorten(text: string, max: number): string {
  return text.slice(0, max) + "...";
}

// ── utils/index.ts ──(バレルファイル: 配下をまとめて再公開)
export * from "./date";
export * from "./text";

// ── main.ts ──
// フォルダ名だけで import できる(index.ts が自動で参照される)
import { formatDate, shorten } from "./utils";

console.log(formatDate(2026, 6) + " " + shorten("お知らせの長い本文", 5));