宣言的UI — 「状態」を書けば画面はReactが合わせる

「手順」ではなく「状態」を書く

Reactの一番大事な考え方が「宣言的UI」です。少し難しい言葉ですが、意味はシンプルです。「画面をどう変えるか(手順)」を書くのではなく、「今どういう状態なら、画面はこう見える」という関係だけを書きます。あとはReactが、状態に合わせて画面を自動で更新してくれます。

たとえばカウンター(数字が増えるボタン)を考えます。命令的なやり方では、ボタンが押されるたびに「今の数字を取り出して、+1して、画面の文字を書き換える」という手順を自分で書きます。宣言的なReactでは、「countという状態がある。画面にはcountを表示する」とだけ書きます。countが変われば、画面は自動でついてきます。

let count = 0;
button.addEventListener("click", () => {
  count = count + 1;
  document.querySelector("#n").textContent = count;
});

const [count, setCount] = useState(0);
return (
  <button onClick={() => setCount(count + 1)}>
    {count}
  </button>
);

違いに注目してください。命令的な方では「textContentを書き換える」という画面更新の手順が書かれています。宣言的な方には、その手順がありません。あるのは「countという状態」と「画面にはcountを表示する」という関係だけ。setCountで状態を変えると、Reactが「あ、countが変わったな。じゃあ画面を新しい状態に合わせよう」と自動で更新します。

再レンダリングの直感

状態が変わったときにReactが画面を作り直すことを「再レンダリング」と言います。イメージは「その状態のときの画面を、もう一度まるごと描き直す」です。ただし本当に全部を書き換えるわけではなく、Reactが賢く「前と違うところだけ」を実際の画面に反映します(この仕組みは次のレッスンで軽く触れます)。

function Greeting() {
  const [name, setName] = useState("世界");
  return (
    <div>
      <p>こんにちは、{name}さん</p>
      <button onClick={() => setName("React")}>変える</button>
    </div>
  );
}

• 宣言的UI = 「どう変えるか」ではなく「どういう状態か」を書く
• 状態を更新関数(setCountなど)で変えると、Reactが画面を自動で合わせる
• 状態が変わって画面を作り直すことを再レンダリングと呼ぶ
• 変数を直接書き換えてもReactは気づかない — 必ず更新関数を使う