Reactコンポーネントの書き方とexport方法の違い
Reactコンポーネントの書き方にはいくつかパターンがあります。
特に 関数の書き方 と export方法（default / named） の違いは、最初は分かりにくいところです。
この記事では、
- default export（後出し）の意味と使いどころ
- 巻き上げ（hoisting）とは何か
- 関数の書き方＋exportの違いと使い分け
をわかりやすくまとめます。
1. export の種類
default export（デフォルトエクスポート）
- 1ファイルにつき1つだけ
- import時に好きな名前を付けられる
export default function App() { return <div>App</div> } // import例 import MyApp from './App'
named export（名前付きエクスポート）
- 1ファイルにいくつでも書ける
- import時は名前を合わせる必要がある
export const Home = () => <h1>Home</h1> export const About = () => <h1>About</h1> // import例 import { Home, About } from './pages/Home'
2. 関数の書き方の2種類
関数宣言（function declaration）
function App() { return <div>App</div> }
巻き上げ（hoisting） がされる
→ ファイル内で宣言より前に呼び出しても使える
関数式（アロー関数）
const Home = () => { return <div>Home</div> }
巻き上げされない
→ 宣言より前で呼び出すとエラーになる
3. 巻き上げ（hoisting）とは？
JavaScriptでは、関数宣言や変数宣言が実行前にファイルの先頭に持ち上がったように扱われる仕組みがあります。
例（関数宣言はOK）：
sayHello() // ✅ 動く function sayHello() { console.log("Hello") }
例（アロー関数はNG）：
sayHello() // ❌ エラー const sayHello = () => { console.log("Hello") }
4. default export 後出し とは？
関数を先に宣言し、最後に export default する書き方です。
// 先に変数や関数などの準備 const appTitle = "My Cool App" function App() { return <h1>{appTitle}</h1> } // 最後にdefault export export default App
この書き方のメリット：
- コンポーネントの前に変数や補助関数を置ける
- 同じファイル内で複数の関数を定義し、最後に主役だけexportできる
