JavaScript（ES Modules）における
default export と 名前付き export（named export） の違いを
初心者向けに簡潔にまとめます。
要点サマリ
-
default export
- ファイルの「主役」を 1つだけ export
- import 時に
{}が不要
-
名前付き export
- 複数の値を 名前つきで export
- import 時に
{}が必要
👉 迷ったら
- 1つだけ → default
- 2つ以上 → 名前付き
比較表
| 観点 | default export | 名前付き export |
|---|---|---|
| エクスポート数 | 1つだけ | 複数OK |
import時の {}
|
不要 | 必要 |
| import名 | 自由に変更できる | 定義名と同じ |
| 主な用途 | ファイルの主役 | 明示的な部品 |
| 可読性 | シンプル | 依存関係が分かりやすい |
default export の例
定義側
// formSteps.js
const FORM_STEPS = ["仕事内容", "スキル・資格", "確認", "完了"];
export default FORM_STEPS;
使用側
import FORM_STEPS from "./formSteps";
特徴
- {} が不要
- import名を自由に決められる
- ファイルの代表が明確
名前付き export の例
定義側
// register.js
export const FORM_STEPS = ["仕事内容", "スキル・資格", "確認", "完了"];
export const BASE_FIELDS = [];
使用側
import { FORM_STEPS, BASE_FIELDS } from "./register";
特徴
- 何を使っているか一目で分かる
- 複数定義に向いている
- 保守性が高い
使い分けの指針
- default export を使う場面
- ファイルの責務が1つ
- コンポーネント1つ
- 設定値・定数が1つ
export default ...
- 名前付き export を使う場面
- 定数・関数が複数
- util / consts ファイル
- 明示性を重視したいとき
export const A = ...
export const B = ...