Reactの基本：コンポーネントを作って分割する – 6/12

Reactの強みはコンポーネント分割です。この記事では「関数コンポーネント」「import/export」「分割の基準」を、実務でも使える形で説明します。

コンポーネントはUIの部品

Reactでは画面を部品化します。部品化の基準は次のどれかに当てはまるときです。

• 同じUIが複数回出る（再利用したい）
• 1ファイルが長くなり読みにくい
• UIの責務（役割）を分けたい（例：一覧と検索フォーム）

関数コンポーネントの基本形

Reactでは関数でコンポーネントを作れます。

export default function Header() {
  return (
    <header>
      <h1>My Site</h1>
    </header>
  )
}

• 先頭大文字（Header）は慣習
• export default で他ファイルから使えるようにする

Appで読み込んで使う

App.jsx から読み込む例です。

import Header from "./components/Header.jsx"

export default function App() {
  return (
    <div>
      <Header />
      <main>本文</main>
    </div>
  )
}

<Header></Header> ではなく、自己終了タグ <Header /> がよく使われます。

分割の実務目安

最初は以下の粒度でOKです。

• 画面：pages/
• 部品：components/
• データ操作：services/（API呼び出しなど。後半）

学習段階では components/ に集約しても問題ありません。重要なのは「分割できる」感覚を掴むことです。

練習：Footerを追加してみる

1. Footer.jsx を作る
2. App.jsx に追加する

Footer.jsx:

export default function Footer() {
  return <footer>© {new Date().getFullYear()} My Site</footer>
}

App.jsx に <Footer /> を入れて表示できれば成功です。