プロが React を使う理由 · Martinとコード

レベル1のコピーの痛みを思い出し——コンポーネントが生まれた理由が分かる。読むだけのレッスン。

メニューをコピーしたの、覚えてる？

レベル1で、全ページにメニュー付きヘッダーがあった。新しいページを追加するたびにメニューを コピー して——変更のたびに全部直す必要があった。3ページならイライラ、30ページなら悪夢。その痛みが、物語の始まり。

コンポーネント：一度書いて、どこでも使う

プロは考えた：メニューが 1つのコード で、各ページに「挿入」されるだけだったら？ 1か所変えれば——全部変わる。そういう部品を コンポーネント と呼ぶ。

メニューだけじゃない。サイトを積み木セットの目で見て：

選手カード（4枚——名前とポジションだけ違う）、
ギャラリーの写真（10枚——画像だけ違う）、
ボタン（どこにでも——テキストだけ違う）。

プロのサイトは HTML ファイルの山じゃない。LEGO の箱：少数のカスタムブロック（コンポーネント）を組み立ててアプリ全体に。

React とは

React は JavaScript 用のツール（ライブラリ）——こういう組み立てを担当。Facebook で発明、無料、インternet の大部分がこれで作られてる：Facebook、Instagram、Netflix、Airbnb… React のコンポーネントはこんな感じ——今は見るだけでOK：

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

カスタム HTML タグみたいに使う：

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

見覚えある？関数（レベル2から）が HTML を返す。カードは1回書いて、違うデータで何度も使う——文字を入れ替えられるゴム印みたい。

超能力その2：React が再描画を担当

レベル2では「要素を見つけて、テキストを変えて、クラスを追加…」と書いた。大きなアプリでは手動の整理が多すぎて迷子になる。React は逆：

与えられたデータに対してページがどう見えるべきか を書く。データが変わると、React が自分で何を再描画するか判断する。

スコアが0から1に？要素を探さない——数字を変えるだけで、React が必要な部分を描き直す。state のレッスンで実際に見る。

このレベルで学ぶこと

プロのツールをインストール：ターミナルと Node.js（次のレッスン）。
Vite で最初の React アプリをセットアップ。
コンポーネント、props、state を学ぶ。
レベル1のサイトを React で再構築。
自分の Node.js サーバー を作り、ゲストブック を接続。

💡

今日のレッスンのすべてを完全に理解する必要はない。 1文だけ持ち帰ろう：React = コンポーネント（LEGO）+ 自動再描画。あとはレッスンで手を動かす。

このレッスンのまとめ

同じコードを複数箇所にコピーするのは罠——レベル1で自分で気づいた。
コンポーネントはページの一部を返す関数。1回書いて、違うデータで何度も使う。
React がページを再描画：データを変えれば、画面が変わる。