【Reactの核心】画面を動的に更新する！useState でデータと表示を連動させる仕組みをマスター

関野泰宏

2025年12月20日 15:00

はじめに：State（状態）とは？

これまでのJavaScriptでは、ボタンが押されたら `innerText` を書き換えるといった「命令的」な操作をしていました。しかしReactでは、「データ（状態）が変われば、表示も自動的に変わる」 という考え方をします。

この「アプリが保持している動的なデータ」のことを State（状態） と呼びます。

💡 1. `useState` フックの使い方

ReactでStateを扱うには、`useState` という特別な関数（フック）を使います。

基本の書き方

import { useState } from 'react';

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

状態変数: 現在の値が格納される変数。
更新関数: 値を書き換えるための専用の関数。
初期値: 最初にその変数に入れたい値。

💡 2. カウンターアプリで実践

実際にボタンを押すと数字が増える簡単なアプリで見てみましょう。

💻 サンプルコード

import { useState } from 'react';

function Counter() {
  // countという状態を定義。初期値は 0。
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // countを直接書き換えるのではなく、setCountを使う！
    setCount(count + 1);
  };

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

ここがポイント！
`setCount` が呼ばれると、Reactは「あ、データが変わったな」と検知し、自動的に画面（コンポーネント）を再描画（リレンダリング）してくれます。これがReactの魔法の正体です。

💡 3. なぜ直接書き換えてはいけないのか？

`count = count + 1` のように変数を直接書き換えても、Reactはその変化に気づけません。「更新関数（setCount）」を通すことが、Reactに再描画を依頼する合図になります。

💡 4. 入力フォームの制御

Stateはフォームの入力内容をリアルタイムで反映させるのにも使われます。

function NameForm() {
  const [name, setName] = useState("");

  return (
    <div>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
      />
      <p>こんにちは、{name}さん！</p>
    </div>
  );
}

ユーザーが1文字入力するたびに `setName` が呼ばれ、`name` が更新され、画面下の挨拶テキストも即座に書き換わります。

📝 39日目のまとめと課題

✅ 本日の習得ポイント

State：画面の表示に影響を与える「動的なデータ」。
`useState`：Stateを作成するためのReact標準のフック。
更新関数：Stateを書き換えるための専用関数。これを使うと画面が自動で再描画される。
双方向データバインディング：入力内容と表示をリアルタイムで同期できる。

📝 39日目の課題

`useState` を使って、ボタンを押すたびに「ON」と「OFF」が切り替わる `ToggleButton` コンポーネントを作成するイメージを固めてください。
その際、初期値は `false`（OFF）とし、`set` 関数を使って値を反転させるにはどう書けばよいか考えてみましょう（ヒント：`!（否定演算子）` を使います）。

これで39日目の学習は完了です！`useState` をマスターすれば、一気に「アプリらしい動き」を作れるようになります。明日も継続して頑張っていきましょう！

もっとReactを学びたい人はここから！

#駆け出しエンジニアと繋がりたい #プログラミング学習 #React #100DaysOfCode #今日の積み上げ #useState #フロントエンド開発