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

生徒

「先生、Reactでよく出てくるuseStateって何なんですか？」

先生

「useStateは、ReactのHooksのひとつで、関数コンポーネントに状態を持たせるための機能なんです。」

生徒

「状態ってどういう意味ですか？ゲームとかのキャラクターのHPみたいなものですか？」

先生

「そのイメージはとても近いです！例えばボタンを押すたびに数字が増えるカウンターや、文字が変わる表示など、変化するデータを管理するのが状態（State）です。」

生徒

「なるほど！それをuseStateで簡単にできるんですね。」

先生

「その通りです。では実際に使い方を見ていきましょう。」

1. useStateとは？

useState（ユースステート）は、React Hooksの中で最も基本的かつ重要な機能です。関数コンポーネントに「状態」を追加するために使います。状態とは、アプリの中で変化する値のことを指します。

例えば、最初は「こんにちは！」と表示されていて、ボタンを押すと「ボタンがクリックされました！」に変わるといった動作も状態によって管理されます。

クラスコンポーネントを使っていた頃はthis.stateやthis.setState()といった書き方をしていましたが、Hooksを使えばシンプルに1行で書けるようになりました。

2. useStateの基本構文

useStateの基本構文はとてもシンプルです。次のように書きます。


const [値, 値を更新する関数] = useState(初期値);

例えば、次のような書き方をします。

「値」… 現在の状態（変数のように使える）
「値を更新する関数」… 状態を変更するための関数
「初期値」… 状態の最初の値

つまり、useStateは「変化する箱」を作って、その箱に入れる値と、それを変えるためのリモコンを一緒に提供してくれるイメージです。

3. useStateを使った簡単なサンプル

それでは実際にuseStateを使ったシンプルな例を見てみましょう。


import React, { useState } from "react";

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

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

export default App;

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

この例では、messageという状態を作り、初期値を「こんにちは！」としています。そして、ボタンをクリックするとsetMessageを使って値を更新し、画面に新しいメッセージが表示されます。

4. カウンターアプリで理解するuseState

次は少し応用して、ボタンをクリックするたびに数字が増えていく「カウンターアプリ」を作ってみましょう。


import React, { useState } from "react";

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

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

export default Counter;

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

この例では、countが状態で、初期値は0です。ボタンを押すたびにsetCount(count + 1)が実行され、表示が更新されます。まさに「状態が変わるたびに画面が再描画される」というReactの仕組みが分かります。

5. useStateを使うときの注意点

useStateを使うときに覚えておきたいポイントがあります。

直接値を変更しない：必ず更新関数（例：setMessageやsetCount）を使って値を変える
状態が変わると再描画される：更新すると自動的に画面が新しい状態に切り替わる
複数のuseStateを使える：1つのコンポーネントで複数の状態を持つことも可能

例えば「名前」と「年齢」をそれぞれ状態で管理したいときは、useStateを2つ書けばOKです。

6. useStateのメリット

useStateを使うことで、コードがシンプルになり、初心者でも直感的に理解しやすくなります。従来のクラスコンポーネントと比べて次のようなメリットがあります。

コードが短くて読みやすい
複雑なthisを使わなくてよい
必要な場所でだけ状態を管理できる
小さな機能をシンプルに追加できる

このように、useStateはReactの入門にぴったりのHooksであり、関数コンポーネントを使う際には欠かせない存在です。

まとめ

useStateとは何かをあらためて整理しよう

ここまでの記事では、ReactにおけるuseStateの基本について、初心者の方でも理解しやすいように、会話形式や具体的なサンプルコードを交えながら解説してきました。 useStateは、関数コンポーネントの中で「状態（State）」を扱うための最も基本的な仕組みです。状態とは、時間やユーザー操作によって変化するデータのことで、画面表示と密接に関係しています。

例えば、ボタンを押した回数、表示するメッセージ、入力フォームの文字列など、 Reactアプリケーションの多くは「変化する値」を扱います。 useStateを使うことで、これらの変化を安全かつ分かりやすく管理できるようになります。特にReactでは、状態が更新されると自動的に画面が再描画されるため、開発者はDOMを直接操作する必要がなくなります。この考え方こそが、Reactらしい開発スタイルの中心にあります。

useStateの書き方と考え方のポイント

useStateは配列の分割代入を使って、「現在の値」と「値を更新するための関数」を同時に受け取ります。この構文に最初は戸惑うかもしれませんが、「状態の箱」と「その箱を操作するためのスイッチ」がセットになっていると考えると理解しやすくなります。

また、useStateで管理している値は、直接書き換えてはいけません。必ずsetから始まる更新用の関数を使って変更する必要があります。これはReactが状態の変化を正しく検知し、再描画を行うために重要なルールです。このルールを守ることで、予期しないバグを防ぎ、安定したReactアプリケーションを作ることができます。

サンプルプログラムで仕組みを再確認

ここで、useStateの基本的な動きをあらためて確認できるサンプルプログラムを見てみましょう。ボタンをクリックすることで状態が変化し、画面表示が更新される例です。


import React, { useState } from "react";

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

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <h2>現在のカウント: {count}</h2>
      <button onClick={increment}>
        カウントを増やす
      </button>
    </div>
  );
}

export default SampleState;

このプログラムでは、countという状態をuseStateで定義し、ボタンをクリックするたびにincrement関数が呼び出されます。関数の中でsetCountを使って状態を更新すると、 Reactが自動的に再描画を行い、最新の値が画面に反映されます。この一連の流れを理解できると、useStateの役割がはっきり見えてきます。

useStateを理解することの重要性

useStateは、Reactを学ぶうえで最初に身につけるべき非常に重要なHooksです。フォーム入力、ボタン操作、表示の切り替えなど、ほとんどのReactアプリケーションでuseStateが使われています。この基本をしっかり理解しておくことで、次に学ぶuseEffectやイベント処理、コンポーネント分割といった内容もスムーズに理解できるようになります。

初心者の方は、まず「状態が変わると画面が変わる」というReactの基本思想を、 useStateを通して体感することが大切です。小さなサンプルを何度も書いて試すことで、自然とReactの書き方に慣れていくでしょう。

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

生徒

「useStateって難しそうだと思っていましたが、状態が変わると画面が更新される仕組みが少し分かってきました。」

先生

「それはとても良い理解ですね。 useStateはReactの考え方を理解するための入口なんです。」

生徒

「ボタンを押すたびに数字が変わるのを見ると、状態と画面がつながっている感じがします。」

先生

「その感覚が大事です。 Reactでは状態を中心にアプリが動いていると考えると分かりやすいですよ。」

生徒

「まずはuseStateをしっかり使いこなせるように、小さなサンプルから練習してみます。」