●目次
useStateはReactのフックの一つで、コンポーネント内で状態（State）を管理するために使われます。
状態管理はReactの基本的な機能で、アプリが動的にデータを更新し、UIにその変化を反映させるために非常に重要です。
今回は、useStateフックを使ってReactアプリに状態管理を組み込む方法をわかりやすく説明します。
useStateとは？
useStateは、Reactの状態管理を実現するための関数で、状態を設定し、その状態を更新するための2つの値を返します。
この関数はReactが提供する「フック」の一種であり、コンポーネント内で状態を管理できるようにします。
const [state, setState] = useState(initialValue);stateは現在の状態を表す値です。setStateは状態を更新するための関数です。initialValueは状態の初期値です。
useStateの基本的な使い方
useStateを使って、カウンター機能を作成してみましょう。
ボタンをクリックするたびにカウントが増加するシンプルな例です。
import React, { useState } from 'react';
function Counter() {
// useState（状態変数countとそれを更新するための関数setCountを宣言）
// 初期値を0に設定
const [count, setCount] = useState(0);
// onClickイベントの関数「handleIncrement」（カウントを1増やす）
function handleIncrement() {
// 現在のcountに1を加算して更新
setCount(count + 1);
}
return (
<div>
{ /* 現在のcountの値を表示 */ }
<p>Count: {count}</p>
{ /* ボタンをクリックするとhandleIncrement関数が実行され、カウントが増える */ }
<button onClick={handleIncrement}> +1 </button>
</div>
);
}
export default Counter;
useState(0)を使って、countという状態を作り、その初期値を0に設定しています。setCount関数を使うと、countの値を更新し、画面に自動的に反映されます。handleIncrement関数をボタンクリック時のイベントとして設定し、setCountでcountの値を1ずつ増やします。
useStateの動作の流れ
useStateを使うと、以下のような流れで状態が管理されます。
- 状態の宣言:
useStateを呼び出し、状態変数と更新関数を定義します。 - 状態の利用:
状態変数（例：count）を表示したり、他の処理で使用します。 - 状態の更新:
イベント（ボタンクリックなど）で更新関数（例：setCount）を呼び出し、新しい値を設定します。 - 再レンダリング:
状態が更新されると、Reactがコンポーネントを再レンダリングし、新しい状態が画面に反映されます。
文字列を状態として管理する
数値だけでなく、文字列もuseStateで管理できます。
次の例では、テキストフィールドの入力値をリアルタイムで表示します。
import React, { useState } from 'react';
function TextInput() {
// useState（状態変数textとそれを更新するための関数setTextを宣言）
// 初期値を空に設定
const [text, setText] = useState('');
// onChangeイベントの関数「handleChange」（テキストフィールドの値が変化するたびtextを更新）
function handleChange(event) {
setText(event.target.value);
}
return (
<div>
{/* テキストフィールドの値が変化するたびにhandleChangeが実行される */}
<input type="text" value={text} onChange={handleChange} />
<p>Input: {text}</p>
</div>
);
}
export default TextInput;useState('')で空の文字列を初期値にし、textという状態を定義。onChangeイベントを使用し、テキストフィールドが変化するたびに入力値が更新されます。
オブジェクトや配列を状態として管理する
useStateは、オブジェクトや配列を状態として管理することもできます。例えば、名前と年齢を含むプロフィール情報を管理する場合、次のように書けます。
import React, { useState } from 'react';
function UserProfile() {
const [profile, setProfile] = useState({ name: 'Alice', age: 25 });
function updateAge() {
setProfile({ ...profile, age: profile.age + 1 });
}
return (
<div>
<p>Name: {profile.name}</p>
<p>Age: {profile.age}</p>
<button onClick={updateAge}>Increase Age</button>
</div>
);
}
export default UserProfile;useStateでオブジェクト（{ name: 'Alice', age: 25 }）を状態として管理。setProfileを使う際は、...profileで現在の状態を保持しつつ、ageのみを更新しています。
配列の状態管理
配列もuseStateで管理可能です。次の例では、新しい項目をリストに追加する処理を行います。
import React, { useState } from 'react';
function ItemList() {
// useState（状態変数itemsと更新するための関数setItemsを宣言）
// 初期値を空の配列に設定
const [items, setItems] = useState([]);
// onClickイベントの関数（新しいアイテムを追加する関数addItemを定義）
function addItem() {
// 現在のitems配列に新しいアイテムを追加し、配列全体を更新
setItems([...items, `Item ${items.length + 1}`]);
}
return (
<div>
{ /* ボタンをクリックするとaddItem関数が実行され、アイテムが追加される */ }
<button onClick={addItem}>Add Item</button>
{ /* items配列の各要素を<li>要素として表示 */ }
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default ItemList;useState([])で空の配列を初期値にし、itemsを管理。addItem関数では...itemsで現在の配列の内容を保持し、末尾に新しい項目を追加しています。
非同期の状態更新に注意
setStateで新しい状態を設定しても、即座に更新されるわけではありません。
状態の変更は非同期で行われ、更新後にレンダリングされます。
このため、現在の状態を基に新しい状態を設定する場合は、次のようにコールバック関数を使うと安全です。
function Counter() {
const [count, setCount] = useState(0);
function handleIncrement() {
setCount((prevCount) => prevCount + 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
}setCount((prevCount) => prevCount + 1)のように、前回の状態prevCountを引数として受け取り、確実に状態を更新しています。
useStateの初期値設定
複雑な計算や重い処理が必要な場合、関数で初期値を設定する方法もあります。次の例では、計算結果を初期値に設定しています。
const [count, setCount] = useState(() => calculateInitialCount());useState(() => calculateInitialCount())のように関数で初期値を設定すると、初回レンダリング時にのみ関数が実行され、パフォーマンスが向上します。
まとめ
useStateは、Reactコンポーネント内で状態を管理するための基本で、インタラクティブなUIを作成するために欠かせない機能です。以下のポイントを押さえましょう。
useStateで状態と更新関数を宣言し、状態を管理する。setStateを使って状態を更新すると、Reactが再レンダリングしてUIに反映。- 文字列やオブジェクト、配列も
useStateで管理できる。 - 現在の状態に基づく更新には、関数を使って確実に更新する。
useStateを使いこなして、動的でインタラクティブなReactアプリケーションを構築してみましょう！