named exportとdefault export

生田 陸人
監修
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

このレッスンで分かること

  • named export ─ export const foo = ... で名前付き、import { foo } from "..."
  • default export ─ export default ... で 1 ファイル 1 つ、import Foo from "..."
  • 1 ファイルに named を複数 + default を 1 つまで持てる
  • re-export ─ export { foo } from "./mod" でバレル (まとめ) ファイルを作る

named exportとdefault export とは

名前付きエクスポートとデフォルトエクスポートの違いと使い分けを練習しよう。本レッスンでは、named exportとdefault export の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

named exportとdefault export

モジュールから値をエクスポートする2つの方法を理解しましょう。

named export

JavaScript

// 複数の値をエクスポート export function add(a, b) { return a + b; } export const PI = 3.14; // インポート時は {} で名前を指定 import { add, PI } from './math.js';

default export

JavaScript

// 1ファイルに1つだけ export default class Calculator { ... } // インポート時は任意の名前で受け取れる import Calc from './calculator.js';

この問題では、モジュールのエクスポート定義を分析してnamedとdefaultを分類する関数を実装しましょう。

実務で遭遇するパターン

中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。

  • React コンポーネント ─ export default Component、export { Button, Card }
  • ユーティリティ集 ─ lodash 風の export const sum = (...)、export const max = (...)
  • 設定値 ─ export const config = { ... } で named にして tree-shaking 有効
  • バレル ファイル ─ index.ts で export * from "./sub"

コードレビューで指摘されがちなポイント

PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。

  • default だらけ ─ tree-shaking 効きにくい、named を優先
  • default をリネームしながら import ─ 自由すぎて grep しづらい、named のほうが追跡しやすい
  • 1 ファイルに大量の named ─ 関連の薄いものは分割
  • 循環依存 ─ バレルファイルで起きやすい、依存方向を整理

パフォーマンス考慮事項

  • tree-shaking ─ named export のほうがバンドラに優しい
  • バンドルサイズ ─ 未使用 named export は最終バンドルから除外
  • 動的 import との組み合わせ ─ const { foo } = await import("./mod") で named を取得
  • TypeScript の isolatedModules ─ default export + 型は別 export にする工夫が必要
この章のポイント

ここまでの要点 named export を基本に、コンポーネント 1 つだけ持つファイルは default を使う。tree-shaking と grep しやすさで named 優位。

よくある質問

Q. 実務ではどんな場面でこの知識を使いますか？

A. API クライアントの実装、フロントエンドのフレームワーク内ロジック、Node.js のサーバーサイドなど幅広く登場します。React/Vue などのフレームワークもこの基礎の上に成り立っているため、ここで身につけた知識は資産になります。

Q. コードレビューで指摘されやすいポイントは？

A. var の使用、== の使用、無駄なネストの深さ、命名の曖昧さなどが頻出指摘です。Linter（ESLint）と Prettier を導入すれば機械的に防げる指摘が多いため、まずはツールで自動化するのが効率的です。

Q. 次に学ぶべき内容は何ですか？

A. モジュールのエクスポート／インポートが理解できたら、npm を使ったパッケージ管理やバレルファイルによるモジュール設計に進むのがおすすめです。実プロジェクトでアウトプットしながら学ぶと定着が早まります。

次のレッスン

次は npmとパッケージ管理 で、名前付きエクスポートとデフォルトエクスポートの違いと使い分けを練習しよう を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. named exportとdefault export の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. named exportとdefault export とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

入出力例

test-cases.txt

organizeModules([{"exports":[{"name":"add","type":"named"},{"name":"subtract","type":"named"},{"name":"Calculator","type":"default"}],"name":"utils"},{"exports":[{"name":"API_URL","type":"named"}],"name":"config"}]) → {"config":{"defaultExport":null,"namedExports":["API_URL"],"totalExports":1},"utils":{"defaultExport":"Calculator","namedExports":["add","subtract"],"totalExports":3}} organizeModules([{"exports":[],"name":"empty"}]) → {"empty":{"defaultExport":null,"namedExports":[],"totalExports":0}}
main.js
main.js
学習モード

メモ

named exportとdefault export

⌘S で保存