Chapter 5: コンポーネント

React の世界では UI を「小さな部品」に分割して組み合わせます。その最小単位が コンポーネント です。ここではコンポーネントの基本を押さえつつ，最初の React 関数コンポーネントを書いてみましょう。

React の3つの柱

React アプリを形作る基礎は次の 3 つです。

概念	役割
Component	UI 部品をひとまとまりに表現する
Props	コンポーネントに外部から渡すデータ
State	コンポーネント内部で変化する値

この章では最初の柱である Component に集中し，次章から Props と State を順番に扱います。

コンポーネントは自己完結した UI 部品

UI は LEGO ブロックのように，独立した部品を組み合わせるイメージで組み立てられます。

alt text

コンポーネントを分けておくと，

必要な部分だけ差し替えや再利用がしやすい
役割ごとにコードを分割できるので読みやすい
テストやリファクタリングの範囲が明確になる

といったメリットがあります。

はじめてのコンポーネントを作る

React では コンポーネント = 関数 と覚えておきましょう。まず空の関数を定義します。

index.html

<script type="text/jsx">
  const app = document.getElementById('app');

  function header() {}

  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

コンポーネントは JSX を return する必要があります。<h1> を返すように書き換えます。

index.html

<script type="text/jsx">
  const app = document.getElementById('app');

  function header() {
    return <h1>Develop. Preview. Ship.</h1>;
  }

  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

この関数を描画に利用するには root.render() に渡します。

index.html

<script type="text/jsx">
  const app = document.getElementById('app');

  function header() {
    return <h1>Develop. Preview. Ship.</h1>;
  }

  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

ただしこのままだとエラーになります。React コンポーネントを正しく動かすには 2 つのルールを守りましょう。

コンポーネントの基本ルール

コンポーネント名は大文字で始める
React は大文字で始まる関数だけをコンポーネントとして扱います。
index.html
```
function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}

const root = ReactDOM.createRoot(app);
root.render(Header);
```

コンポーネントはタグのように呼び出す
使用するときは <Header /> のように山かっこで囲みます。

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}

const root = ReactDOM.createRoot(app);
root.render(<Header />);

これでコンポーネントを描画できるようになりました。

コンポーネントを組み合わせる

実際のアプリケーションは複数のコンポーネントで構成されます。HTML と同じように入れ子構造にできます。

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}

function HomePage() {
  return (
    <div>
      {/* Header コンポーネントを利用 */}
      <Header />
    </div>
  );
}

const root = ReactDOM.createRoot(app);
root.render(<HomePage />);

このように，一つのコンポーネントの中で別のコンポーネントを呼び出してツリー構造を作っていきます。

コンポーネントツリーを意識する

コンポーネント同士の関係は コンポーネントツリー と呼ばれます。アプリが大きくなるほどツリーも複雑になりますが，「親コンポーネント」「子コンポーネント」という考え方を持っておくと設計がしやすくなります。

ツリー構造をどう意識すればよい？

画面をセクション単位で分割し，それぞれをコンポーネントとして切り出す
共通で使いたい UI は，独立したコンポーネントにして再利用する
親から子にデータを渡すときに Props を使う（次章で解説）

次のステップ

コンポーネントの基本が分かったところで，次はコンポーネントへデータを渡す仕組みである Props を学びます。