ReactのuseState入門｜状態管理をやさしく解説（WordPressでも使える）

Reactの基本フックuseStateの使い方を初心者向けに解説。状態管理の仕組み、基本構文、実用例、WordPressのGutenbergブロック開発への応用も紹介します。

useStateとは？

useStateは、Reactが提供するフック（Hook）のひとつで、コンポーネント内で状態（state）を持たせるために使います。
状態（state）とは、時間や操作によって変化するデータのことです。

例：

  • カウンターの数字
  • 入力フォームの値
  • タブ切り替えの選択状態

もしuseStateがなければ、画面上のデータを変えるたびにDOM操作を手作業で行う必要があります。
useStateを使うことで、状態が変わると自動的にUIも更新される仕組みになります。

基本構文と使い方

const [state, setState] = useState(initialValue);
  • state → 現在の状態を表す変数
  • setState → 状態を更新するための関数
  • initialValue → 初期値

例：数字をカウントするstate

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

簡単なカウンターアプリ例

import React, { useState } from 'react';

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

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
      <button onClick={() => setCount(count - 1)}>減らす</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
}

export default Counter;

動き

  1. 初期値0でcountがセットされる
  2. ボタンをクリックするとsetCount()が呼ばれ、countが更新される
  3. 状態が変わるとReactが自動で再描画し、UIが更新される

よくある間違いと注意点

1. stateを直接書き換えてしまう

count = count + 1; // ❌ これはUIに反映されない

必ず更新関数（例：setCount()）を使います。

2. 更新が非同期

setCount(count + 1);
setCount(count + 1);

上記は「+2」にはならず、「+1」だけ反映されることがあります。
連続更新する場合は関数型アップデートを使います。

setCount(prev => prev + 1);
setCount(prev => prev + 1); // 合計で+2される

WordPressでの応用例

WordPressのGutenbergブロック開発では、Reactが使われています。
例えば、入力フォームでテキストをリアルタイムに反映するコードは以下のようになります。

const { useState } = wp.element;

function MyCustomBlockEdit() {
  const [text, setText] = useState('');

  return (
    <div>
      <input
        type="text"
        value={text}
        placeholder="テキストを入力"
        onChange={(e) => setText(e.target.value)}
      />
      <p>プレビュー: {text}</p>
    </div>
  );
}

これを使えば、ブロックエディタ上でユーザーが入力した内容を即時にプレビュー表示できます。

まとめ

  • useStateはReactで状態を持たせるための基本フック
  • [state, setState]という形で宣言し、必ずsetStateで更新する
  • GutenbergブロックやWordPressテーマのフロントエンドでも応用可能

状態管理を理解すると、ReactやWordPressのカスタマイズが一気に楽になります。
次はuseEffectを学ぶと、さらに動的な機能が作れるようになります。

-JavaScript, React
-