import/export — モジュールシステムの核心

このトピックを終えると

ESモジュールのimport/export構文を理解し、コードを適切に分割する方法を習得します。

すべてのコードを1つのファイルに書く場合

初期のJavaScriptは、すべてのコードを1つのファイルに格納していました。ファイルが大きくなると、変数名が衝突し、コードの検索が困難になり、再利用もできなくなります。

モジュールは、コードをファイル単位で分割し、必要なものだけをエクスポートしてインポートするシステムです。

export: エクスポート

ファイルから他の場所で使用できるようにエクスポートする方法は2つあります。

Named export — 名前を指定してエクスポートします。

// utils.js
export function formatDate(date) {
  return date.toLocaleDateString();
}

export const MAX_ITEMS = 100;

1つのファイルから複数のものをエクスポートできます。

Default export — ファイルごとに1つのデフォルトエクスポート:

// Button.js
export default function Button({ label }) {
  return <button>{label}</button>;
}

import: インポート

Named exportは中括弧でインポートします:

import { formatDate, MAX_ITEMS } from "./utils.js";

名前が完全に一致する必要があります。名前を変更したい場合は、asを使用します:

import { formatDate as format } from "./utils.js";

Default exportは中括弧なしでインポートします:

import Button from "./Button.js";

自由に名前を付けることができます:

import MyButton from "./Button.js"; // 同じ

Named vs Default

// Named — 複数エクスポート、名前固定
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }

import { add, sub } from "./math.js";

// Default — 1つエクスポート、名前自由
export default function Calculator() { ... }

import Calculator from "./Calculator.js";
import Calc from "./Calculator.js"; // 名前自由

実務における慣例:

• Reactコンポーネント: default export (ファイルごとに1つのコンポーネント)
• ユーティリティ関数、定数: named export (1つのファイルに複数)

両方を一緒に使うこともできます:

import React, { useState, useEffect } from "react";

Reactはdefault、useStateとuseEffectはnamedです。

すべてをインポート

ファイルのすべてのnamed exportを一度にインポートできます:

import * as utils from "./utils.js";

utils.formatDate(new Date());
utils.MAX_ITEMS;

ただし、必要なものだけをインポートすることをお勧めします。バンドラーが使用されていないコードを削除 (tree-shaking) できるためです。

核心

exportでエクスポートし、importでインポートします。 Named exportは中括弧、default exportは中括弧なしでインポートします。 コンポーネントはdefault、ユーティリティ/定数はnamed exportが一般的です。