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

生徒

「ReactのStateってよく出てきますけど、それって何ですか？」

先生

「Stateは、コンポーネントの中で“状態”を管理するための仕組みですよ。」

生徒

「状態って、何が変わるんですか？画面が動くってことですか？」

先生

「そのとおりです！ボタンを押したときに文字が変わったり、カウントが増えたりするのもStateの役割なんですよ。」

1. ReactのState（ステート）とは？

State（ステート）とは、Reactコンポーネントの中で「今の状態」を表すものです。

たとえば、「こんにちは」と表示していた文字が、ボタンを押したら「こんばんは」に変わるようなとき、この「表示される文字」をStateとして管理します。

Stateを使うと、ユーザーの操作に応じて画面を自動で切り替えることができます。これがReactの大きな特徴の一つです。

2. useStateで状態を管理してみよう

ReactでStateを使うには、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の中に「こんにちは！」という初期の文字を入れています。ボタンを押すとsetMessageという関数が呼ばれて、状態（State）が更新されます。

3. useStateの書き方をくわしく見てみよう

useStateを使うときは、次のように書きます：

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

これは、配列の分割代入というJavaScriptの機能を使っています。たとえば：

message は今の状態（文字）を持つ変数
setMessage は新しい状態を設定する関数

この2つはセットで使います。setMessageを使うと画面も自動で再描画されて、最新の情報が表示されるようになります。

4. カウントアップの例でStateを使ってみよう

次は、ボタンをクリックするたびに数が増える「カウンター」をStateで作ってみましょう。


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という状態を管理しています。setCountで値を変えるたびに画面も自動で更新されます。

5. Stateはコンポーネントごとに分かれて管理される

ReactのStateは、コンポーネントごとに個別に管理されています。

たとえば、同じCounterコンポーネントを2つ画面に並べた場合、それぞれのカウントは別々に動きます。これは、独立した部品として動いているからです。

こうすることで、ひとつの部品を複数使っても、それぞれ別のデータを持たせることができます。

6. Stateの値を直接変更してはいけない理由

Reactでは、Stateの値を直接書き換えてはいけません。たとえば次のように書くのはNGです：

count = count + 1; ← これはダメです！

必ずsetCountのような「更新関数」を使って変更します。

理由は、Reactが「いつ画面を更新するか」を内部で管理しているためです。直接変数の値を書き換えても、Reactは変化に気づかないことがあります。

7. 複数のStateを使うこともできる

Reactでは、useStateを何回も使って、複数の情報を別々に管理することができます。

たとえば、名前と年齢をそれぞれ状態として持つような場合も簡単です。


import React, { useState } from "react";

function Profile() {
  const [name, setName] = useState("たろう");
  const [age, setAge] = useState(20);

  return (
    <div>
      <p>名前：{name}</p>
      <p>年齢：{age}歳</p>
      <button onClick={() => setAge(age + 1)}>年齢を1つ増やす</button>
    </div>
  );
}

export default Profile;

（画面に「名前：たろう」「年齢：20歳」と表示され、ボタンを押すと年齢が1つ増えます）

このように複数のStateを組み合わせれば、さまざまな画面の動きを作ることができます。

まとめ

この記事では、ReactのState（ステート）について基本から応用まで学びました。Stateはコンポーネント内でデータや状態を管理する仕組みで、ユーザーの操作に応じて画面を自動で更新できます。useStateフックを使うことで、ボタンを押したときに文字を変えたり、カウントを増やしたりするような動的なUIを簡単に実現できます。また、複数のStateを組み合わせることで、名前や年齢など異なる情報を別々に管理でき、より複雑な画面構成にも対応可能です。

Stateはコンポーネントごとに独立しており、同じコンポーネントを複数配置しても、それぞれ別々の状態を持つことができます。また、Stateの値を直接変更してはいけないことも重要です。必ずsetStateのような更新関数を使うことで、Reactが正しく再描画を行い、UIに最新の情報が反映されます。これにより、画面の状態とデータの整合性を保つことができ、予期しない動作を防ぐことができます。

初心者にとっては、Stateの基本概念、useStateの書き方、複数のStateを使う方法を理解することが大切です。Stateを正しく活用すれば、ReactでのUI更新やユーザーインタラクションの管理が効率よく行え、実践的なアプリ開発に役立ちます。

サンプルプログラムで復習


import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("こんにちは！");
  
  return (
    <div>
      <h1>{message}</h1>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
      <button onClick={() => setMessage("ボタンがクリックされました！")}>メッセージ変更</button>
    </div>
  );
}

export default Counter;

（画面に「こんにちは！」と表示され、ボタンでカウントを増やしたりメッセージを変更したりできます。Stateを組み合わせることで複数の値を管理できます）

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

生徒

「Stateはコンポーネントごとに独立して管理されることがわかりました。同じカウンターを複数置いても、それぞれの数値が別々に動くんですね。」

先生

「その通りです。Stateを理解することで、ReactのUIがどのように動くかがイメージしやすくなります。Stateの値は直接変更せず、必ず更新関数を使うことも覚えておきましょう。」

生徒

「複数のStateを組み合わせると、メッセージやカウントなど、別々のデータを同時に管理できることも便利ですね。」

先生

「そうです。Stateを上手に使うことで、動的でインタラクティブなUIを簡単に作れるようになります。初心者でも、この基本を押さえれば実践的なReactアプリの作成に挑戦できます。」