先生と生徒の会話形式で理解しよう

生徒

「ReactのStateってよく出てきますけど、どんな役割なんですか？」

先生

「Stateはコンポーネントの中で変化するデータを管理する仕組みです。ReactではこのStateがあるからこそ、動きのある画面を作れるんですよ。」

生徒

「へえ！どうやって使うんですか？」

先生

「では、具体的にuseStateを使った書き方を見ていきましょう！」

1. Stateとは？Reactの動きを支える仕組み

State（ステート）は、Reactのコンポーネントが「今の状態」を記録するためのデータです。日本語にすると「状態」という意味で、ユーザーの操作やアプリの進行に応じて変化します。

たとえば「ボタンを押したら文字が変わる」「チェックボックスをオンにしたら表示が切り替わる」といった動きはすべてStateによって実現されています。もしStateがなければ、Reactの画面は固定されたままになり、インタラクティブな体験はできません。

2. useStateフックの基本的な使い方

ReactでStateを使うときは、useStateというフックを利用します。フック（Hook）とは「特別な関数」という意味で、Reactに用意されている仕組みです。

使い方はシンプルで、次のように書きます。


import React, { useState } from "react";

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

export default App;

（画面に「0」と表示され、ボタンを押すたびに数字が1ずつ増えていきます）

ここで出てきた[count, setCount]という書き方は「配列の分割代入」と呼ばれます。左側が現在の値（State）、右側がその値を更新する関数です。

3. useStateの仕組みをイメージで理解する

初心者の方は「どうして配列で受け取るの？」と疑問に思うかもしれません。これはuseStateが「現在の値」と「更新する関数」の2つをセットで返しているからです。

生活の例で言えば、Stateは「今の気温を書いた温度計」、更新関数は「その温度を変えるための操作」と考えるとイメージしやすいでしょう。

4. 文字列のStateを使ってみる

数字だけでなく、文字列もStateで管理できます。たとえば「メッセージを切り替える」という例を見てみましょう。


import React, { useState } from "react";

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

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

export default App;

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

このように文字列をStateで管理すれば、ユーザーの操作に合わせて自由に表示を変えられるようになります。

5. Stateの初期値について

useStateには最初の値を渡すことができます。これを初期値と呼びます。数字の0、文字列の「こんにちは」、配列やオブジェクトなど、さまざまなデータを初期値に設定できます。

Reactの画面が表示されたとき、この初期値が最初にセットされます。その後は更新関数を使って自由に書き換えが可能です。

6. Stateを複数使う場合

1つのコンポーネントでStateをいくつも管理することもできます。たとえば「カウント」と「メッセージ」を同時に持たせてみましょう。


import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("最初のメッセージ");

  return (
    <div>
      <h1>{count}</h1>
      <p>{message}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
      <button onClick={() => setMessage("新しいメッセージに更新されました！")}>
        メッセージ変更
      </button>
    </div>
  );
}

export default App;

（カウントの数字とメッセージの両方をボタンで切り替えることができます）

このように複数のStateを組み合わせることで、より複雑でリッチな動きを実現できます。

7. Stateを使うときの注意点

Stateを直接書き換えることはできません。必ず更新関数（例ではsetCountやsetMessage）を使って値を変更します。もし直接count = count + 1のように書くと、Reactが変化を検知できず、画面が更新されません。

Reactでは「Stateを変更 → 画面を再描画」という流れが自動で処理されます。この仕組みがあるからこそ、少ないコードでインタラクティブな画面を作れるのです。

まとめ

ReactのStateとuseStateフックは、アプリの動きを柔軟に変化させるための中心的な仕組みであり、コンポーネントごとの「今の状態」を管理する役割を担っています。この記事で学んだように、Stateは数字、文字列、配列、オブジェクトなど多様なデータを保持でき、ユーザーの操作に応じて動的に画面を更新できます。特に、ボタンを押してカウントを増やす例やメッセージを切り替える例は、Reactがどのように再描画を行うかを理解する良いきっかけになります。useStateは「現在の値」と「更新する関数」をセットで返すため、配列の分割代入を使ってスッキリ書くことができます。さらにStateは複数管理でき、アプリの複雑な動きを簡単に構築できます。動きをつけるUI、ユーザー操作に反応する画面、イベントに応じて変化する内容など、Stateの活用によってReactの表現力は大きく広がります。

useStateを活用した応用サンプル

ここでは、複数のStateの管理と画面表示の切り替えを組み合わせた応用例を紹介します。


import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("最初の状態です");
  const [flag, setFlag] = useState(true);

  const toggleFlag = () => {
    setFlag(!flag);
    setMessage(flag ? "フラグがオフになりました" : "フラグがオンになりました");
  };

  return (
    <div>
      <h1>現在のカウント: {count}</h1>
      <p>{message}</p>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
      <button onClick={toggleFlag}>
        {flag ? "フラグをオフにする" : "フラグをオンにする"}
      </button>
    </div>
  );
}

export default App;

このサンプルでは、数値・文字列・真偽値という異なるタイプのStateを同時に管理しています。ボタンを押すたびにカウントが増え、もう一つのボタンではフラグ（真偽値）の切り替えと表示メッセージの更新が同時に行われます。こうした複数のStateを扱う例は、実際のアプリ開発で頻繁に必要になるパターンです。Stateが変化するとReactが自動で再描画するため、データとUIの同期を意識せず直感的に動きを作れるのが大きな魅力です。また「Stateを直接書き換えず、セット関数を必ず使う」という重要なルールも、このような複雑な更新が増えるほど意識する必要があります。更新関数を使うことでReactは変更を検知し、必要な部分だけ再描画して効率よく画面を更新します。

useStateの初期値設定はReactアプリの動きの出発点になります。初期値をどう設定するかで画面の第一印象が決まり、その後の動きも変化します。数値の初期値を0にするか1にするか、文字列の初期メッセージをどうするか、配列の初期値として空の状態を渡すか、ある程度のデータを持った状態を渡すかなど、設計の意図によって使い分けることが大切です。また、Stateの種類が増えてくると、どのデータがどの動きを担当しているかを整理することが必要になり、これによってReactの構造をより深く理解できます。Stateが多くなるほど再描画のタイミングも増えるため、どの部分がどのStateに依存しているかを把握しておくと無駄な再描画を避けられ、軽快に動くアプリを作れるようになります。初心者のうちからStateと画面の関係を意識しておくだけで、Reactを使った開発が格段に楽しく、効率的になります。

ReactのState管理は一見難しそうに感じられますが、基本の仕組みはシンプルです。ユーザーの操作に合わせて画面が動き、内容が変化するという特性は、Webアプリがもつインタラクティブ性を最大限に引き出してくれます。少しずつStateを増やしていき、どのように動きが変わるかを試しながら学ぶことで、Reactの仕組みが自然と理解できるようになります。useStateを起点に、条件分岐、イベント処理、複数Stateの組み合わせなど、さまざまな応用が可能です。今後さらに学習を進め、useEffectやuseMemoなどの他のフックと組み合わせていくことで、より高度なState管理やパフォーマンスの最適化もできるようになります。まずはuseStateをしっかり使いこなし、動きを伴うUIを自分の手で作る楽しさを体験していくことが大切です。

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

生徒

「Stateって最初は難しく感じていたんですけど、使ってみると動きがつくのが面白くて、仕組みも理解しやすかったです！」

先生

「その調子です。useStateはReactの基本なので、仕組みをしっかり理解すると他のフックもスムーズに学べるようになりますよ。」

生徒

「複数のStateを扱う例もすごく参考になりました。ボタンでメッセージとフラグが切り替わるのは実際のアプリっぽいですね。」

先生

「実務でもよくあるパターンなので、ぜひ自分のアプリでも使ってみてください。Stateと再描画の関係を意識するともっと深く理解できますよ。」

生徒

「Stateを直接書き換えちゃいけない理由もよく分かりました。更新関数を使うことでReactがちゃんと画面を変えてくれるんですね。」

先生