useStateとは
useStateは、Reactコンポーネントの状態（データ）を保存し、変更するためのフック（機能）です。
💡 状態（State）とは？
状態（State）とは、コンポーネントが持つ「変化するデータ」のことです。 例えば、ユーザーの入力値、クリック回数、ON/OFFの切り替えなどが状態に当たります。
🎯 例えで理解しよう
💾 メモ帳の例: useStateは「メモ帳」のようなものです。 情報を書き留めて（状態を保存）、後で見返したり書き直したり（状態を変更）できます。
📦 箱の例: useStateは「データを入れる箱」のようなものです。 箱に何かを入れて（状態を保存）、中身を取り出したり、別のものに入れ替えたり（状態を変更）できます。
🔄 変数の進化版: useStateは「普通の変数の進化版」です。 変数と違って、値が変わると画面が自動的に更新されます。
useStateの流れ図解
1. 初期化: useState(0)で初期値0を設定
2. 戻り値: 現在の値（count）と更新関数（setCount）を取得
3. 更新: setCount(5)で状態を5に更新
4. 再描画: 状態が変わると、コンポーネントが自動的に再描画され、画面が更新されます
✅ useStateを使う理由
- データの保存: ユーザーの入力や操作結果を保存できます
- 自動更新: 状態が変わると、コンポーネントが自動的に再描画されます
- リアルタイム反映: 状態の変更が即座に画面に反映されます
基本的な使い方
useStateの基本的な書き方を学びましょう。
📝 useStateの基本構文
import { useState } from "react";
const MyComponent = () => {
// useStateの基本的な書き方
// const [状態の名前, 状態を変更する関数] = useState(初期値);
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
};1. useStateのインポート: ReactからuseStateをインポートします
2. 状態の定義: const [count, setCount] = useState(0);のように書きます
3. 状態の使用: {count}のように状態を表示に使います
4. 状態の更新: setCount(count + 1)のように関数を使って状態を更新します
✅ ポイント
useStateは2つの値を返します：現在の値と、その値を変更する関数- 状態を変更する関数名は通常、
set + 状態名とします（例：count → setCount） - 状態が変更されると、コンポーネントが自動的に再描画されます
- 直接状態を変更してはいけません（例：
count = count + 1は❌）
🎯 成果物（実際の動作）
カウント: 0
様々な型の状態
useStateは、数値、文字列、真偽値、配列、オブジェクトなど、様々な型のデータを保存できます。
📝 数値型の状態
const Counter = () => {
// 数値型の状態（初期値は0）
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>増やす</button>
<button onClick={() => setCount(count - 1)}>減らす</button>
</div>
);
};🎯 成果物（実際の動作）
カウント: 0
📝 文字列型の状態
const TextInput = () => {
// 文字列型の状態（初期値は空文字列）
const [text, setText] = useState("");
return (
<div>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="入力してください"
/>
<p>入力された値: {text}</p>
</div>
);
};🎯 成果物（実際の動作）
入力された値:
📝 真偽値型の状態
const Toggle = () => {
// 真偽値型の状態（初期値はfalse）
const [isOn, setIsOn] = useState(false);
return (
<div>
<button onClick={() => setIsOn(!isOn)}>
{isOn ? "ON" : "OFF"}
</button>
<p>状態: {isOn ? "オン" : "オフ"}</p>
</div>
);
};状態の更新方法
状態を更新するには、useStateから返された関数を使用します。
状態更新の流れ
初期状態
count = 0
useState(0)で初期化
更新関数を呼ぶ
setCount(5)ボタンクリックなどで実行
状態が更新
count = 5
値が0から5に変更
自動再描画
画面が更新
新しい値が画面に反映
💡 状態が更新されると、Reactが自動的にコンポーネントを再描画し、画面に新しい値が反映されます
📝 直接値を設定する方法
const [name, setName] = useState("");
// 新しい値を直接設定
setName("太郎");
setName("花子");📝 現在の値を使って更新する方法
const [count, setCount] = useState(0);
// 現在の値を使って更新
const increment = () => {
setCount(count + 1); // countの現在の値に1を足す
};
const decrement = () => {
setCount(count - 1); // countの現在の値から1を引く
};💡 関数を使って更新する場合は、現在の値を参照して新しい値を計算します。
⚠️ 重要な注意点
- 状態を直接変更してはいけません（例：
count = count + 1は❌） - 必ず更新関数を使用してください（例：
setCount(count + 1)は✅） - 状態の更新は非同期で行われます。更新直後に状態を参照しても、古い値が返される可能性があります。
📚 例題
実際にuseStateを使ってコンポーネントを作成してみましょう。
例題: 年齢表示コンポーネント
年齢を状態として管理し、数値入力で変更できるコンポーネントを作成してください。
const AgeDisplay = () => {
// 年齢を状態として定義（初期値は20）
const [age, setAge] = useState(20);
return (
<div>
<label>
年齢:
<input
type="number"
value={age}
onChange={(e) => setAge(Number(e.target.value))}
/>
</label>
<p>私は{age}歳です</p>
</div>
);
};実際の表示結果
私は20歳です
💡 上のコードを実行すると、このように変数の値が表示されます。年齢を変更して、表示が更新されることを確認してみましょう！
まとめ
🎯 覚えておきたいポイント
useStateは状態を保存し、変更するためのフックですconst [値, 更新関数] = useState(初期値);の形式で使用します- 状態を変更するには、必ず更新関数を使用します（直接変更は❌）
- 状態が変更されると、コンポーネントが自動的に再描画されます