Back to Basic
開発時に、意外と頭の中がこんがらがったりするので、備忘録として記載します。（自分のため）
| 特徴 | export default |
export const（名前付きエクスポート） |
|---|---|---|
| エクスポートの仕方 | 1ファイルにつき1つだけ「デフォルト」で出せる | 複数個の関数や変数などを「名前付き」で出せる |
| インポートの書き方 | import Something from './xxx' |
import { Something } from './xxx' |
| リネーム | インポート時に好きな名前で呼べる → import AnyName from './xxx'
|
{ Something as AnyName }などと書く必要がある |
| 主な使いどころ | そのファイルの「メインの中身」を渡すとき | ユーティリティ関数や複数の定数など |
🧠 わかりやすい例で📝
1. export default
// components/Button.tsx
const Button = () => <button>Click</button>;
export default Button;
// 他のファイルで
import Button from '@/components/Button';
✅ ファイルの「主役」を export したいときに使うイメージ
2. export const（名前付きエクスポート）
// utils/math.ts
export const add = (a: number, b: number) => a + b;
export const multiply = (a: number, b: number) => a * b;
// 他のファイルで
import { add, multiply } from '@/utils/math';
✅ 複数のものをまとめて出したいときに便利
🧭 いつ使い分ければいいの？
| 目的 | 推奨されるスタイル |
|---|---|
| コンポーネント（1つだけを渡す） | ✅ export default |
| 複数の関数や定数を渡す | ✅ export const（名前付き） |
| ライブラリ的に使いたい | ✅ export const（メンテ性◎） |
💡補足：チームやプロジェクトのポリシーにもよるので注意が必要
大規模チームでは 名前付きエクスポート統一 というルールにしてることも多い気がする。
なぜなら、「名前付きだと自動補完が効いてわかりやすい」からかという認識。
🎯 結論（どっちが正しい？）
👉 どっちも正しい。目的に応じて使い分けるのが◎！