Day 1・JSXとコンポーネント — 部品を作って渡す

関数コンポーネント — UI部品を返す関数

大文字始まりの関数がUI部品(コンポーネント)を返す。<Header />のように使い、1ファイル1役割で部品を組み合わせる感覚をつかむ。

コンポーネントは「画面を返す関数」

Reactでは、画面を『部品(コンポーネント)』の組み合わせで作ります。そしてコンポーネントの正体は、JSXを返すただの関数です。特別な仕組みではなく、あなたが知っているJSの関数がそのまま『画面を組み立てる部品』になります。

TSX

function Header() {
  return <h1>マイアプリ</h1>;
}

function Footer() {
  return <footer>© 2026 MyApp</footer>;
}

HeaderもFooterも、JSXを返すだけの関数。これがコンポーネント。

作った部品はタグのように使う

定義したコンポーネントは、<Header />のようにJSXの中でタグとして呼び出せます。自分で作った部品を、まるでHTMLタグのように置いていく感覚です。部品を並べて、より大きな画面を組み立てます。

TSX

function App() {
  return (
    <div>
      <Header />
      <p>ようこそ。ここが本文です。</p>
      <Footer />
    </div>
  );
}

小さな部品を組み合わせて大きな画面(App)を作る。レゴブロックを積むイメージ。

なぜ部品に分けるのか

料理でいえば、下ごしらえした材料を組み合わせて一皿を作るのと同じです。ヘッダーやボタンを部品にしておくと、別の画面でも使い回せて、直すときも『その部品だけ』を直せば全部に反映されます。大きな画面を一気に読むより、名前のついた小さな部品に分かれているほうが、読む人にとっても理解しやすくなります。

名前は必ず大文字から始める

コンポーネントの関数名は必ず大文字で始めます。これはReactのルールです。小文字始まりのタグ(<header>)はブラウザ標準のHTMLタグ、大文字始まり(<Header />)は『あなたが作った部品』とReactが見分けているからです。

小文字始まりは部品として認識されない

function header()のように小文字で定義して<header />と書くと、Reactはあなたの部品ではなく標準のHTMLタグだと解釈し、意図した表示になりません。エラーにならず『ただ空っぽ』になることもあり、原因に気づきにくい落とし穴です。部品名は必ず大文字始まり、と覚えておきましょう。

実務では『1ファイルにつき1つの部品(1役割)』にすることが多いです。Header.tsxにはHeaderだけ、というように役割ごとにファイルを分けると、どこに何があるか探しやすくなります。まずは『部品=JSXを返す大文字始まりの関数』という感覚を持てれば十分です。

AIにはこう聞く

「このReactのファイルにはどんなコンポーネントがあって、それぞれ何を表示している?部品の親子関係も日本語で図のように説明して」と頼むと、画面全体の構造をつかみやすくなります。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

関数コンポーネントについて、正しい説明はどれですか。

「Reactのコンポーネント」とは何かを、関数を知っている初心者に説明してください。名前のルールにも触れてください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。