🧭 はじめに
Reactを学び始めると、最初にぶつかる壁が「状態（State）」の扱い方ではないでしょうか？
その中でも最もよく使われるフックが useState です。
「ボタンを押したら数が増える」
「入力内容をリアルタイムに表示したい」
そんな“動きのあるUI”を作るには、useStateが欠かせません。
この記事では、React初心者でも理解できるようにuseStateの基本的な使い方と注意点を、サンプルコード付きで丁寧に解説します。
⚙️ 前提条件
この記事で想定している環境は以下の通りです👇
- Node.js がインストール済み
- React プロジェクトが作成済み（例：Vite や Create React App）
- JavaScript（ES6）の基本がわかる
もしまだReactプロジェクトを作っていない場合は、Viteを使ってすぐに始められます。
Vite + React プロジェクト作成
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
🎯 今回の目標
この記事で目指すのは以下の2つです👇
- カウンターアプリ：クリックで数値が増える
- 入力フォーム：入力内容をリアルタイムで反映する
この2つを通して、useStateの使い方と仕組みを理解していきましょう！
🧠 useStateとは？
useStateは、Reactが提供する 状態管理のためのフック（Hook） です。
コンポーネントの中で「変化する値」を管理し、それに応じてUIを自動で更新してくれます。
✅ 基本構文
const [state, setState] = useState(initialValue);
- state：現在の状態（値）
- setState：状態を更新するための関数
- initialValue：初期値
たとえば、「カウント数」を管理したい場合は次のように書きます。
const [count, setCount] = useState(0);
🧮 サンプル①：カウンターアプリ
まずは定番の「+1ボタンでカウントアップ」するアプリです👇
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div style={{ textAlign: "center" }}>
<h2>カウント：{count}</h2>
<button onClick={handleClick}>+1</button>
</div>
);
}
export default Counter;
📝 解説
-
useState(0)→ 初期値を「0」に設定 -
setCount(count + 1)→ 現在の値に1を足して更新
状態が変化すると、Reactが自動的に再レンダーし画面を更新します
⚠️ 注意
直接代入しても状態は更新されません！
count = count + 1; // ❌ 画面は変わらない
setCount(count + 1); // ✅ 正しい書き方
状態を更新するときは、必ず setCount() のようにセッター関数を使いましょう。
✍️ サンプル②：入力フォーム（双方向データバインディング）
次に、入力した文字がリアルタイムで画面に反映される例です👇
import { useState } from "react";
function InputExample() {
const [text, setText] = useState("");
const handleChange = (e) => {
setText(e.target.value);
};
return (
<div style={{ textAlign: "center" }}>
<h2>文字を入力してください</h2>
<input
type="text"
value={text}
onChange={handleChange}
placeholder="ここに入力"
/>
<p>入力内容：{text}</p>
</div>
);
}
export default InputExample;
🧩 ポイント
-
value={text}→ inputの値をReactの状態で管理 -
onChange→ 入力のたびにsetText()で状態更新
Reactは「状態がUIを決める」一方向データフローが基本です。
💡 関数型更新で安全に値を更新する
useStateは非同期的に動作するため、連続で更新するときに前の値がずれることがあります。
その場合は「関数型更新」を使うのが安全です👇
setCount(prevCount => prevCount + 1);
これにより、Reactが最新の状態を正しく参照してくれます。
🧩 複数のuseStateを使う
複数の状態を同時に管理することも可能です👇
function MultiStateExample() {
const [count, setCount] = useState(0);
const [name, setName] = useState("React");
return (
<div style={{ textAlign: "center" }}>
<p>{name} カウンター：{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setName("Vite")}>名前を変更</button>
</div>
);
}
✅ まとめ
| 内容 | ポイント |
|---|---|
| useStateとは？ | 状態を管理するReactの基本フック |
| setState関数 | 状態を更新するとUIも更新される |
| 関数型更新 | 安全に前回の状態をもとに更新できる |
| 複数useState | 状態を複数個管理してもOK |
🧭 最後に
この記事では、useStateの基本をサンプル付きで紹介しました。
最後までご覧いただきありがとうございます。この記事が皆様に少しでもお役に立てることを祈っております。これからも色々な記事を投稿していきますので、お付き合いいただければと思います。これからもよろしくお願いします。