Back to Basic

開発時に、意外と頭の中がこんがらがったりするので、備忘録として記載します。（自分のため）

特徴	`export default`	`export const`（名前付きエクスポート）
エクスポートの仕方	1ファイルにつき1つだけ「デフォルト」で出せる	複数個の関数や変数などを「名前付き」で出せる
インポートの書き方	`import Something from './xxx'`	`import { Something } from './xxx'`
リネーム	インポート時に好きな名前で呼べる → `import AnyName from './xxx'`	`{ Something as AnyName }`などと書く必要がある
主な使いどころ	そのファイルの「メインの中身」を渡すとき	ユーティリティ関数や複数の定数など

🧠 わかりやすい例で📝


// components/Button.tsx
const Button = () => <button>Click</button>;
export default Button;


// 他のファイルで
import Button from '@/components/Button';

✅ ファイルの「主役」を export したいときに使うイメージ

// 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';

✅ 複数のものをまとめて出したいときに便利

大規模チームでは名前付きエクスポート統一というルールにしてることも多い気がする。
なぜなら、「名前付きだと自動補完が効いてわかりやすい」からかという認識。

👉 どっちも正しい。目的に応じて使い分けるのが◎！