React — コンポーネントと宣言的UIの定番
📖 このページのゴール：React（リアクト） が「素のJS」と何が違うのかを、たとえと小さなコードで腹落ちする。キーワードは 宣言的（せんげんてき）＝「UIの更新を自分で書かない」。 ← 目次・はじめにへもどる
🪄 たとえ：状態を書けば、姿が決まる
前のページの「素のJS」は、🤖 手で人形を動かすやり方でした。「数字が変わったら、表示も書き換えろ」と毎回 手順 を指示します。
React は 🪄 「今はこういう状態」と書くと、その姿に勝手になるやり方です。「今のカウントは 5」と書けば、画面はちゃんと 5 を映してくれる。“どう書き換えるか”の手順は、Reactが裏で面倒を見てくれる——これが「宣言的（せんげんてき）」です。
🟢 ざっくり：素のJS＝「やり方（手順）を書く」／ React＝「ありたい姿（状態）を書く」。
🧩 しくみ：4つの言葉だけ
React は次の4つさえ押さえればOKです。
| ことば | よみ・言い換え | これは何？ |
|---|---|---|
| コンポーネント | UIの部品 | ボタン・カードなど、画面を再利用できる部品に分ける単位。部品を組み合わせて画面を作る |
| JSX | ジェイエスエックス | JSの中に、HTMLっぽく画面を書ける書き方。<button>…</button> をそのまま書ける |
| 状態（state） | ステート＝今の状態 | カウントの数や入力中の文字など、変化する値。これを変えると UIが自動で更新される（宣言的・リアクティブ） |
| 仮想DOM | かそうDOM | 変更をまずメモリ上で計算し、本物の画面には“変わった所だけ”を反映して速くするしくみ |
ポイントは 状態（state）と画面が結びついていること。状態を変えれば画面が追いかける（リアクティブ）。だから「画面のどこをどう書き換えるか」を自分で書かなくてよくなります。
🔧 小さなコード例：おなじみのカウンター
前のページ（素のJS）と同じカウンターを、Reactの useState（ユーズステート） で書くとこうなります。
function Counter() {
const [count, setCount] = useState(0); // ① 状態：今のカウント
return (
<button onClick={() => setCount(count + 1)}>
クリック回数：{count} {/* ② 状態を画面に埋め込む */}
</button>
);
}
3行ずつ読むと——
- ①
useState(0)：カウントの 状態 を作る（初期値 0）。count＝今の値、setCount＝値を変える関数。 - ②
{count}：画面の中に 状態をそのまま埋め込む。 - ボタンを押すと
setCountで 状態を 1 増やすだけ。
素のJSとの違いがここ👇
素のJSなら「ボタンを押す → 数を増やす → その数で表示テキストを書き換える」と、最後の“画面更新”まで自分で書きました。 Reactは
setCountで状態を変えるだけ。{count}の表示は Reactが自動で更新してくれる。「クリックされたら画面を描き直す」を自分で書かない——これが宣言的UIの体感です。
👍 向いている / 👎 向かない・注意
| 👍 向いている | 複雑なUI（状態がたくさん絡む画面）／大規模開発・チーム開発／巨大なエコシステム（部品やツールが何でも揃う）／求人が最も多い（仕事・情報・仲間が見つけやすい） |
| 👎 向かない・注意 | 学習はやや急（state・JSX・お作法を覚える）／設定や選択肢が多い（ルーティングやデータ取得は別ライブラリで“自分で選ぶ”）／小物には大げさ（ボタン1個の小さな動きなら素のJSで十分） |
🌱 鉄則：まず素のHTML/JSで動かし、複雑になってきたらReact。最初から全部盛りにしない。
🧰 エコシステムとメタフレームワーク
Reactは「画面の部品を作る」のが本業。そのまわりに強力な仲間がいます。
- Next.js（ネクストジェイエス）：Reactの メタフレームワーク（=全部入りの土台）。サーバー側でも描画でき、
react の一部をバックエンドで動かすこともできます。詳しくは 第9章 で。 - React Native（リアクトネイティブ）：同じReact流の書き方で スマホアプリ（iOS/Android） も作れる。
🔧 「Reactを覚えると、Webだけでなくモバイルや“サーバーで動くReact”まで地続きで広がる」——これが巨大エコシステムの強みです。
🏢 誰が使う？
スタートアップから大企業まで、いまの主力。新規SaaS・管理画面・公開Webアプリと、はば広く使われます。開発元は Meta（旧Facebook）。世界で最も使われ、求人・教材・サンプルがいちばん豊富なので、「最初の本格フレームワーク」として選びやすいのが大きな魅力です。
🟢 ひとことで言うと
Reactは 状態（state）を書けばUIが追いかける「宣言的UI」の定番。画面の更新を自分で書かないのが素のJSとの最大の違いです。学習はやや急で選択肢も多いけれど、複雑なUI・大規模・求人の多さでは頭ひとつ抜けています。Meta製で、Next.js（サーバーでも動く）やReact Nativeへと世界が広がります。