はじめに
プロジェクトを進める中で、以下のようなインポートに関する型エラーが発生することがあります。
モジュール '"@/components/hero"' にはエクスポートされたメンバー 'Hero' がありません。
'import Hero from "@/components/hero"' を使用するつもりでしたか?
このエラーは、エクスポート方法とインポート方法が一致していないことが原因です。
エクスポートとインポートの対応
| エクスポート側（Hero.tsx） | インポート側（page.tsx） |
|---|---|
| export default function Hero() { ... } | import Hero from "@/components/hero" |
| export function Hero() { ... } | import { Hero } from "@/components/hero" |
デフォルトエクスポートをしている場合は import Hero from ...、名前付きエクスポートをしている場合は import { Hero } from ... のように記述する必要があります。
デフォルトエクスポート（export default）
デフォルトエクスポートは、「このファイルの主役（メイン）はこれです」という意味を持つ書き方です。
メリット
- インポート時に任意の名前を付けられる
- シンプルに記述できる
- ファイルの主役となるコンポーネントが分かりやすい
export default function Hero() {}
import Hero from "@/components/hero";
また、以下のように別名でインポートすることも可能です。
import MainVisual from "@/components/hero";
デメリット
- インポート時に名前を自由に変更できるため、プロジェクト全体で名称が統一されにくい
- 誤った名前でもコンパイルエラーにならないケースがあり、レビュー時に気付きにくい
- IDEの補完やリファクタリングの恩恵を受けにくい場合がある
⭐️名前付きエクスポート（export）
名前付きエクスポートは、「このファイルにはこのメンバーがあります」と明示する書き方です。
メリット
- インポート時の名前が統一される
- VS CodeなどのIDEで補完が効きやすい
- リファクタリング時に変更漏れを検出しやすい
- TypeScriptとの相性が良く、型安全性を保ちやすい
- 1つのファイルで複数のエクスポートを管理できる
export function Hero() {}
export function HeroTitle() {}
export function HeroButton() {}
import { Hero, HeroTitle, HeroButton } from "@/components/hero";
デメリット
- インポート時に
{ }が必要になる - 単一コンポーネントしかないファイルでは少し記述量が増える
現場ではどう使い分けられているか
プロジェクトの規模やチームの方針によって使い分けられています。
| 開発規模 | 推奨されることが多い書き方 | 理由 |
|---|---|---|
| 小規模・個人開発 | デフォルトエクスポート | 記述がシンプルで書きやすい |
| 中〜大規模・チーム開発 | 名前付きエクスポート | 命名の統一、保守性、リファクタリング性が高い |
| Next.jsの page.tsx・layout.tsx | デフォルトエクスポート | Next.jsの仕様上、デフォルトエクスポートが必要 |
近年は、React・TypeScriptを用いたチーム開発では、保守性や型安全性を重視して名前付きエクスポートに統一する運用を採用するプロジェクトも増えています。一方で、デフォルトエクスポートも現在も広く利用されており、どちらが絶対的に正しいというものではありません。
まとめ
どちらの書き方にもメリット・デメリットがありますが、個人的には名前付きエクスポートを採用したいと考えています。
理由としては、
- インポート時の命名が統一され、コードの可読性が向上する
- IDEの補完やリファクタリングとの相性が良い
- TypeScriptで誤ったインポートを検出しやすい
- チーム開発において保守性や一貫性を維持しやすい
一方で、Next.jsの page.tsx や layout.tsx など、フレームワーク上デフォルトエクスポートが求められるファイルについては、その仕様に従います。
そのため、⭐️フレームワークで指定されている箇所以外は名前付きエクスポートを基本とする運用が、型安全性・保守性・開発効率の観点から適していると考えています。