Zenn
🚀

🚀 Reactの export の書き方、結局どっちがいいの？【結論あり】

に公開
React
初心者向け
export
tech

はじめまして、ぺるふです。
Reactでコンポーネントを定義するとき、

export default Button;

と書くか、

export const Button = () => ...

と書くか、迷ったことはありませんか？

今回は、2つのexport方法の違いと、どちらを使うべきかの結論をお伝えします

⏩結論から知りたい人へ

結論：基本的には export const を使うのがおすすめです！
その理由をわかりやすく解説していきます。

✅export defaultの場合

function  Button(){
    return <div>Button</div>
}
export default Button;

🔍特徴

  • モジュールごとに1つしかexportできない
  • インポート時の名前を自由に変更できる。
import Btn from './Button';

👍利点

・単一のexportを想定しているとき

✅export constの場合

export const Button = () =>{
    return <div>Button</div>
};

🔍特徴

  • 複数のコンポーネントや関数をexport可能
  • インポート時は名前が厳密に一致する必要がある。
import { Button } from './Button';

👍利点

  • 複数の関数や定数を1ファイルにまとめて管理できる。
  • コードの一貫性や保守性が高い
  • Atomic Design など、コンポーネント分割の多い開発スタイルと相性が良い。

💡 結論（おすすめ）

  • 基本は export const を使うのがベスト
    → 型補完やリファクタリングの恩恵を受けやすく、開発効率が高まるため

  • export default は意図が明確な場合のみに限定して使うとよい（ユーティリティ系など）

Discussion