【学び直し】コンポーネントのexport/importについて

Reactを学び始めると、コンポーネントのexportとimportの書き方がいくつかあって混乱しがちです。export default functionと書く場合、後からexport defaultを付ける場合、{}が必要な場合とそうでない場合——何が違うのか最初はわかりづらかったので、この記事では、最小構成から実務でよく使う書き方まで順番に整理しながら、なぜそう書くのかの理由も一緒にまとめました。

---

① 最小構成（1ファイルにまとめる）

// main.jsx
import ReactDOM from 'react-dom/client'

function App() {
  return <h1>Hello</h1>
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

→学習初期の確認用。実用的ではない。

---

② コンポーネントを別ファイルに分ける（export/importの基本）

// App.jsx
function App() {
  return <h1>Hello</h1>
}

export default App  // 後からexport

// main.jsx
import ReactDOM from 'react-dom/client'
import App from './App'  // .jsx は省略可

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

→export default は「このファイルの代表」を1つ指定する。

---

③ 宣言と同時にexport（よく見る書き方）

// App.jsx
export default function App() {
  return <h1>Hello</h1>
}

// main.jsx
import ReactDOM from 'react-dom/client'
import App from './App'  

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

→②と完全に同じ意味。書く量が減るだけ。

---

④ 名前付きexport（複数コンポーネントを1ファイルから出す）

// components.jsx
export function Header() {
  return <header>Header</header>
}

export function Footer() {
  return <footer>Footer</footer>
}

// App.jsx
import { Header, Footer } from './components'  // {}が必要

export default function App() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  )
}

→export default ：import時に {}不要、名前も自由（defaulltと付けば1コンポーネントなので受け側の名前は違っても識別できるので）
export （名前付き）： import時に {}必要、名前は一致させる（ファイルから「複数」送り出せる代わりに、名前で識別するので一致が必須）

---

💡まとめ

書き方	export側	import側
export default function App()	defaultで1つだけ	import App from './App'
function App() → export default App	同上、後からexport	同上
export function App()	名前付き、複数可	import { App } from './App'

実務では③（export default function）が1コンポーネント1ファイルの基本で、④の名前付きexportは定数やユーティリティ関数をまとめるときによく使うようです。

テキストや教材でも説明もなくいずれかが使われ、はじめはこんがらがるので「ん、いつもと違うぞ。」と感じた時ぜひ見返してみてください。