React | stateとは？useStateで「画面が自動更新される」感覚を掴む – 8/12

React

2026.03.11

React最大の山場です。ここで「stateを更新すると再レンダーが起きる」ことを体験し、フォーム入力・カウント・トグル表示の3パターンを押さえます。

stateとは何か
useStateの基本形
よくある注意：直接代入しない
パターン1：トグル表示（true/false）
パターン2：フォーム入力（controlled component）
練習問題

stateとは何か

stateは「コンポーネントが持つ状態」です。ユーザー操作などで変化し、UIに影響します。

例：

カウント数
入力欄の値
モーダルの開閉（true/false）

useStateの基本形

useState はReactのフック（Hook）で、stateを扱うための関数です。

import { useState } from "react"

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

count が現在値
setCount が更新関数
setCount を呼ぶと再レンダーされ、表示が更新されます。

よくある注意：直接代入しない

Reactでは count = count + 1 のように直接代入してもUIは更新されません。更新は必ず setCount を使います。

理由は、Reactが「いつ再レンダーするか」を setState 系の呼び出しで判断しているからです。

パターン1：トグル表示（true/false）

表示の切り替えは頻出です。

const [open, setOpen] = useState(false)

<button onClick={() => setOpen(!open)}>
  {open ? "閉じる" : "開く"}
</button>

{open && <p>表示中です</p>}

open && <p>...</p> は「openがtrueのときだけ表示」という意味になります。

パターン2：フォーム入力（controlled component）

入力値をstateで管理すると、UIと状態が一致して扱いやすくなります。

const [text, setText] = useState("")

<input
  value={text}
  onChange={(e) => setText(e.target.value)}
/>
<p>Input: {text}</p>

これを 制御されたコンポーネント（controlled） と呼びます。

練習問題

カウントを-1するボタンも追加してみましょう。
open状態で「詳細を表示」テキストを出し分けてみましょう。
入力欄を2つ用意して「名字」「名前」を表示してみましょう。