第6回：useStateをマスター！Reactで画面を動的に書き換える「状態」の基本

前回：Props（プロップス）の使い方：コンポーネント間でデータを受け渡す方法では、親から子へデータを渡す「一方向の通信」を学びました。

しかし、Propsは「読み取り専用」のデータでしたね。アプリを作っていると、**「ユーザーの操作によって、その場で値が変わるデータ」**が必要になります。例えば、いいねの数、入力中のテキスト、開閉するメニューなどです。

これらを実現するのが、Reactで最も重要な機能の一つ、useState（ステート） です。

1. 「State（状態）」とは何か？
2. useState の書き方：3つの要素
3. 【実践】ON/OFFを切り替えるスイッチを作ろう
1. App.jsx（最小構成版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の学び：Stateを制する者はReactを制す
1. 今回のまとめ
2. 次回予告：クリック以外の反応をマスター

1. 「State（状態）」とは何か？

Reactにおける「State（状態）」とは、**「そのコンポーネントが保持する、変化するデータ」**のことです。

普通のJavaScript変数（let x = 0 など）との最大の違いは、**「値が変わった瞬間に、Reactが自動で画面を書き換えてくれる（再描画する）」**という点にあります。

普通の変数だと、値を書き換えても画面は古いままですが、Stateを使えば、データと見た目が常に同期します。

2. useState の書き方：3つの要素

第1回の最小サンプルでも登場しましたが、改めてその構造を分解してみましょう。

JavaScript

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

count（現在の値）: 今、データがどうなっているかを参照するための変数。
setCount（更新用関数）: データを書き換えるための専用の関数。「これを使って書き換えてね！」というReactとの約束事です。
useState(0)（初期値）: 最初に画面が開いた時の値をカッコの中に書きます。

3. 【実践】ON/OFFを切り替えるスイッチを作ろう

今回は、クリックするたびに「ON」と「OFF」が切り替わるシンプルなボタンを作ります。第2回の環境で作成した App.jsx を書き換えてみましょう。

App.jsx（最小構成版）

JavaScript

import React, { useState } from 'react';

export default function App() {
  // 1. 状態の定義：初期値は「false（OFFの状態）」
  const [isOn, setIsOn] = useState(false);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>useState スイッチ</h1>
      
      {/* 2. 状態（isOn）によって表示する文字を切り替える */}
      {/* 三項演算子：isOnがtrueなら "ON"、falseなら "OFF" */}
      <h2>今の状態は：{isOn ? "🚀 ON" : "💤 OFF"}</h2>

      {/* 3. クリック時に状態を「反対」にする */}
      {/* !isOn は「今の反対（trueならfalse）」という意味 */}
      <button onClick={() => setIsOn(!isOn)}>
        スイッチを切り替える
      </button>

      <p>※ボタンを押すと、Reactが自動で書き換えます。</p>
    </div>
  );
}

CodeSandboxでuseStateの動きを確認する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

分割代入: const [a, b] = useState() という書き方は、関数の戻り値（配列）をバラバラにして受け取るJavaScriptの便利な記法です。
三項演算子 (条件 ? A : B): {isOn ? "ON" : "OFF"} は、「もし isOn が正しければ “ON”、そうでなければ “OFF” を出す」という短いif文のようなものです。
否定演算子 (!): !isOn は、true を false に、false を true にひっくり返します。

Reactのポイント

インラインでの更新: onClick={() => setIsOn(!isOn)} のように、イベントの中で直接更新関数を呼ぶのが最もシンプルな書き方です。
なぜ setIsOn が必要なのか？: 直接 isOn = true と書いても、Reactは「データが変わったこと」に気づけません。専用の関数を通すことで、初めてReactに「画面を更新して！」という通知が届くのです。