メインコンテンツまでスキップ

第2章：なんでReactなの？

「ボタンを押したら数字が増えるだけ」でも、素のJSやjQueryで作るとコードはあっちこっち…🥲 React は「こういう画面にして！」と完成形を宣言すれば、差分だけをうまく更新してくれる相棒です。 ここでは、従来（命令的） と React（宣言的） の違いを、直感でつかみましょ〜！🌈

この章のゴール 🎯​

  • 命令的UI（従来）と宣言的UI（React）の発想の違いがわかる
  • Reactが**部品（コンポーネント）**で組み立てる利点を理解できる
  • 小さな例で、Reactのほうが保守しやすい理由を感じられる

ざっくり全体図 🗺️（従来 vs React）​

👉 従来は手順をぜんぶ指示。Reactは完成形を宣言して、差分更新はおまかせ。

命令的vs宣言的

同じUIを「ちょいお題」で比較 🍰​

お題：カウントを＋1するボタン（クリックで数字が増えるだけ）

従来の考え方（命令的）🧩​

  • divを作る、buttonを作る、テキスト設定、イベントの追加、更新時はtextContentを書き換え…
  • 機能が増えると、参照するDOM や イベント が散らばりやすい💦
// ふんいきコード（命令的）
const container = document.getElementById('app');
let count = 0;

const label = document.createElement('span');
label.textContent = String(count);

const button = document.createElement('button');
button.textContent = '＋1';
button.addEventListener('click', function () {
  count = count + 1;
  label.textContent = String(count); // ← 毎回手でDOM更新
});

container?.appendChild(label);
container?.appendChild(button);

Reactの考え方（宣言的）🧁​

  • 「今の状態（count）からこう見える」 をJSXで宣言。
  • クリックで**状態（State）**だけを更新 → 見た目は自動で同期😍
// ふんいきコード（宣言的 / React）
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function onClick() {
    setCount(count + 1); // ← 状態だけ変える（見た目はReactがお任せ更新）
  }

  return (
    <div>
      <span>{count}</span>
      <button onClick={onClick}>＋1</button>
    </div>
  );
}

違いのポイント

  • 従来：やり方（手順）を書いて、自分でDOMをいじる
  • React：結果（UIの状態）を書いて、ReactがDOMを最小限で直す

コンポーネントだから“増えても怖くない”🧱🧱🧱​

画面を 部品（コンポーネント） に分けて、組み合わせで作れるのがReactの強み。 1つのページに機能が増えても、部品ごとに責任範囲を区切れるよ👍

  • Header はナビだけ、Counter はカウントだけ、と役割が明確✨
  • 再利用もしやすい（別ページでも同じCounterがすぐ使える）♻️

Reactがうれしい場面 💡​

特にReactが得意なのは…

  • UI状態がコロコロ変わる（フォーム、フィルタ、タブ、ダッシュボード）
  • 小さな部品をたくさん組み合わせる必要がある
  • 長期運用で保守性を重視したい（人が増えても混乱しにくい）

もう一つの“効き目” 🧪：状態とUIのズレ防止​

従来は「変数の値」と「画面表示」を自分で同期しないとバグりやすい…😵‍💫 Reactは状態（State）が真実。JSXはその写し鏡。 → ズレが起きにくいから、バグが減るし、読みやすい💖

Magic Mirror

「状態→宣言→DOM」の一方向がキレイ🌊

チーム開発で光る✨ “読みやすさ＆変更の強さ”​

  • 読みやすさ：UIの完成形がJSXにまとまるから迷子になりにくい
  • 変更の強さ：部品単位で変更できるので、影響範囲が小さい
  • 型（TS）とも相性バツグン：PropsやStateに型を付けてエディタが支援してくれる（のちの章で超活用するよ！）🧑‍💻

ミニ演習 ⏱️3分チャレンジ​

お題：「左にメニュー、右にカード3枚（タイトル＋説明＋ボタン）」 を宣言的に分解してみよう！

  1. 部品に名前をつける：Sidebar / Card / CardList / AppLayout ✅
  2. Card の中身を想像：title / description / onClick（押したら詳細へ） ✅
  3. 「完成形」を口で宣言： 「右側に <CardList> を3つ並べ、各カードは title/description を表示、ボタン押下でアラート」 🎉

（コードは次の章以降でガッツリやります！）

よくある誤解をパパッと解消 🧹​

  • Q. 「全部Reactにすべき？」 A. ぜんぶじゃなくてOK！ 小さな動的UIだけReactにしてもよき。
  • Q. 「高速表示＝React？」 A. 速さは設計しだい。 Reactは複雑UIをわかりやすく作るのが得意。
  • Q. 「難しそう…」 A. まずは「完成形を宣言する」だけでOK。小さく始めよう🌱

画面イメージ（レイアウトの雰囲気）🖼️​

こういう箱の組み合わせを、部品として並べるイメージだよ📦📦📦

まとめ 📌​

  • 従来：**手順（命令的）**を並べてDOMを手で更新
  • React：完成形（宣言的）を書いて差分更新はおまかせ
  • 部品化できるから、読みやすくて変更に強い。長く使うほど良さがわかる🥰

ミニテスト（○/✕）📝​

  1. Reactは完成形を宣言し、差分だけ更新してくれる。
  2. 小さなUIでも全部Reactにしないと動かない。
  3. コンポーネントは再利用や保守に役立つ。

答え：1=○ / 2=✕ / 3=○ ✅

次章予告 🚀​

第3章：「部品（コンポーネント）」っていう最強の考え方 実際に小さな部品を作りながら、組み合わせの気持ちよさを体験しよう〜！💪✨