1. Stateとは？

まず、State（ステート）は「状態」を意味します。たとえば、電気のスイッチをイメージしてください。オンとオフの状態があり、ボタンを押すと変わりますよね。この「オン」「オフ」の切り替えがまさにStateの考え方です。

Reactでは、ユーザーがボタンを押したり、文字を入力したりするときに画面を動的に変えるためにStateを使います。

2. useStateの使い方（関数コンポーネントの場合）

最近のReactでは、関数コンポーネントでuseStateというフックを使うのが一般的です。フック（hook）とはReactの機能を簡単に使える仕組みのことです。

以下のサンプルコードでは、「こんにちは！」という文字が最初に表示され、ボタンを押すと「ボタンがクリックされました！」に変わります。


import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("こんにちは！");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンがクリックされました！")}>
        クリックしてみよう
      </button>
    </div>
  );
}

export default App;

（画面に「こんにちは！」と表示され、ボタンを押すと「ボタンがクリックされました！」に変わります）

ここで大事なのは、useStateが配列を返していて、最初の要素が「今の状態（message）」、2つ目の要素が「状態を変える関数（setMessage）」になっていることです。

3. setStateの使い方（クラスコンポーネントの場合）

Reactでは昔からあるクラスコンポーネントでもStateを扱えます。そのときはthis.setStateを使います。


import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "こんにちは！" };
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <button onClick={() => this.setState({ message: "ボタンがクリックされました！" })}>
          クリックしてみよう
        </button>
      </div>
    );
  }
}

export default App;

（画面に「こんにちは！」と表示され、ボタンを押すと「ボタンがクリックされました！」に変わります）

クラスコンポーネントでは、this.stateで値を読み取り、this.setState()で値を更新します。

4. Stateを正しく更新するポイント

直接書き換えないこと： message = "新しい値" のように直接変更してはいけません。Reactが変更を検知できず、画面が更新されないからです。
必ずsetStateやset関数を使う： setMessage("新しい値") のように更新します。
前の状態を使うときは関数を渡す： カウンターのように前の値を基準にするならsetCount(prev => prev + 1)と書きます。

5. 初心者がつまずきやすいエラーと対策

プログラミングに慣れていないと、以下のような失敗をしがちです。

エラー例： Stateを直接変更しても画面が変わらない → 正しくはsetStateやsetMessageを使う。
エラー例： Stateの初期値を設定し忘れる → useStateに必ず初期値を渡しましょう。
エラー例： setStateがすぐ反映されない → Reactは効率化のためにまとめて更新します。すぐに値を使いたいときは工夫が必要です。

まとめ

State更新の考え方をしっかり理解しよう

ReactのState更新は、画面を動的に変化させるために欠かせない基本的な技術です。とくに、useStateとsetStateの使い方を正しく理解しておくと、ボタン操作やフォーム入力、コンポーネント間の連携など、あらゆる場面で自然に画面を更新できるようになります。Stateは「状態」を意味し、画面に表示される文字や数値、入力値、フラグ、カウンターなどさまざまな情報を保持します。ユーザーの操作によって変化する値を扱うときには、必ずStateが関わります。 Reactでは直接書き換えるのではなく、setStateやsetMessageのような専用の更新関数を使って値を変更します。なぜなら、ReactはStateの変更を検知し、必要な部分だけを効率よく再描画する仕組みを持っているからです。もし直接値を書き換えると、この検知が行われず、画面に反映されないままになります。これはReactの初心者がもっともつまずきやすいポイントの一つと言えます。また、State更新には「前の値を基準にする」ケースもよくあります。特にカウンター機能など、現在の値から次の値を計算したい場面ではsetCount(prev => prev + 1)のように関数を渡す書き方を使うことが重要です。これにより、複数の更新が一度に走っても正確に処理されます。Reactの内部では更新がバッチ処理されることがあり、単純なsetCount(count + 1)だと不正確な結果になる場合があるため、この形を理解しておくと実務でも大いに役立ちます。 Stateと画面表示の関係も非常に大切です。ReactではStateが変わると自動的に再描画され、コンポーネント内の動きが自然に変化します。例えば、文字が変わる、色が変わる、表示・非表示が切り替わるなど、あらゆる動作がStateを通して実現されます。この仕組みをしっかり身につけておくと、アプリ全体の動きを自分で組み立てられるようになり、React開発の幅が一気に広がります。さらに、関数コンポーネントでのuseStateと、クラスコンポーネントでのsetStateの違いを理解しておくことも重要です。それぞれ書き方が異なりますが、根本的な考え方は同じで「Reactに状態の更新を伝える専用関数を使うこと」です。関数コンポーネントはシンプルで扱いやすく、最近のReactではこちらが主流になっていることから、useStateは必ず覚えておきたいポイントです。初心者が経験しやすいエラーとして、Stateの初期値を指定し忘れるケース、更新関数を使わず直接書き換えてしまうケース、更新が反映されるタイミングを誤解するケースがあります。これらを避けるには、基本的なStateの構造、仕組み、更新ルールを理解しておくことが大切です。特にReactが更新をまとめて管理する仕組みを知っておくと、思い通りに動かないときも落ち着いて対処できます。

サンプルコードでおさらい

記事と同じような構造でState更新を確認できるサンプルコードを以下に示します。


import React, { useState } from "react";

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

  return (
    <div class="p-3 border">
      <h2>現在のカウント: {count}</h2>
      <button class="btn btn-primary" onClick={() => setCount(prev => prev + 1)}>
        １増やす
      </button>
      <button class="btn btn-secondary ms-2" onClick={() => setCount(0)}>
        ０に戻す
      </button>
    </div>
  );
}

export default Sample;

このサンプルでは、setCount(prev => prev + 1)を使うことで、どのような状況でも安定してカウントを増やすことができます。また、リセット用のボタンでは値を直接指定する書き方を使っており、State更新の複数のパターンを自然に理解できる構成になっています。

先生と生徒の振り返り会話

生徒

「Stateってただの変数みたいに見えてたけど、実は更新方法にルールがあるんですね！」

先生

「そのとおりです。正しい方法で更新することでReactが効率よく再描画してくれるんですよ。」

生徒

「前の値を使うときに関数を渡すっていうのも意外でした。でもカウンターの例でよくわかりました！」

先生

「それが理解できていればかなり成長していますよ。Stateの動きを理解するとReactの開発が本当に楽になります。」

生徒

「これからもっとStateを使いこなせるように練習してみます！」