ReactJS - useStateの使用：初めての人向けガイド
こんにちは、未来のReact開発者さんたち！React hooks、特にuseState hookの世界に陪你案内するのを嬉しく思っています。プログラミングを教えて数年になる者として、状態管理を理解することは自転車に乗ることのようなものだと言えます。最初は不安定に思えるかもしれませんが、一度コツを覚えると、Reactプロジェクトをスムーズに進めることができるでしょう！
useStateとは何か、そしてなぜ必要なのか？
本題に入る前に、まずuseStateがなぜ必要なのかについて話しましょう。シンプルなカウンターアプリを作成しているとします。数を表示し、増やすか減らすかのボタンがあります。現在のカウントをどのように追跡するのか？それがuseStateの登場です！
useStateは、私たちが関数コンポーネントに状態を追加できるようにするReact hookです。まるでコンポーネントに記憶を与えるようなものです。
useStateの特徴
useStateの主要な特徴を見ていきましょう：
| 特徴 | 説明 |
|---|---|
| 関数コンポーネントに状態を追加 | useStateは、以前はクラスコンポーネントでのみ可能だった状態を使用できるようにします。 |
| 配列を返す | useStateは、現在の状態値とそれを更新する関数を含む配列を返します。 |
| 任意の型の値を保持 | 状態は数、文字列、ブール値、オブジェクト、配列、または他のJavaScript型のいずれでもできます。 |
| 再レンダリングを引き起こす | 状態が更新されると、コンポーネントが再レンダリングされ、新しい状態が反映されます。 |
useStateの能力を理解したので、実際に使ってみましょう！
状態フックの適用
まずはシンプルな例、私たちのカウンターアプリから始めましょう。useStateを使ってどのように実装するか見てみましょう：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>あなたは{count}回クリックしました</p>
<button onClick={() => setCount(count + 1)}>
クリックしてね
</button>
</div>
);
}これを分解してみましょう：
- 我们从React中导入了useState。
- コンポーネント内でuseState(0)を呼び出し、初期値0の状態変数countを作成します。
- useStateは配列を返すので、それをcount（現在の状態）とsetCount（状態を更新する関数）に分解します。
- JSX内で現在のcountを表示し、クリック時にsetCountを呼び出してcountをインクリメントするボタンを作成します。
ボタンがクリックされるたびに、setCountが呼び出され、状態が更新され、コンポーネントが再レンダリングされ、新しいcount値が反映されます。
複数の状態変数
useStateの素晴らしいところ之一は、一つのコンポーネント内で複数回使用できることです。カウンターアプリに名前を追加してみましょう：
function NamedCounter() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');
return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="あなたの名前を入力してください"
/>
<p>{name ? `${name}のカウント` : 'カウント'}: {count}</p>
<button onClick={() => setCount(count + 1)}>
インクリメント
</button>
</div>
);
}ここでは、useStateを二回使用しています - 一回はcount、もう一回は名前の入力です。それぞれの状態変数は完全に独立しており、複数の状態を簡単に管理できます。
オブジェクトを状態として使用
複数回のuseState呼び出しが独立した状態に非常に効果的ですが、関連する状態をグループ化する方が便利な場合もあります。オブジェクトを使って状態を管理する方法を見てみましょう：
function UserProfile() {
const [user, setUser] = useState({
name: '',
age: 0,
hobby: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setUser(prevUser => ({
...prevUser,
[name]: value
}));
};
return (
<div>
<input
name="name"
value={user.name}
onChange={handleChange}
placeholder="名前"
/>
<input
name="age"
type="number"
value={user.age}
onChange={handleChange}
placeholder="年齢"
/>
<input
name="hobby"
value={user.hobby}
onChange={handleChange}
placeholder="趣味"
/>
<p>
{user.name}は{user.age}歳で、{user.hobby}が大好きです。
</p>
</div>
);
}この例では、一つのuseState呼び出しで複数のプロパティを持つオブジェクトを管理しています。handleChange関数はスプレッド演算子(...)を使って新しいオブジェクトを作成し、変更されたプロパティを更新します。
このアプローチはフォームや関連する状態が複数ある状況で非常に便利です。
注意点
オブジェクト（または配列）を状態として使用する際には、状態を更新する際に新しいオブジェクトを作成するように常に覚えておいてください。Reactは参照の等価性を使って状態の変更を判定するため、オブジェクトのプロパティを直接変更しても再レンダリングは引き起こされません。
結論
そして、皆さん！useStateの土地を旅しました。シンプルなカウンターよりも複雑なオブジェクトの状態管理までです。覚えるのには時間がかかるかもしれませんが、すぐにプロのように状態を管理できるようになるまで実験を続けてください！
お別れ前に、学んだことを簡単にまとめます：
- useStateは関数コンポーネントに状態を追加できるようにします。
- それは現在の状態とそれを更新する関数を含む配列を返します。
- 我们可以在独立した状態に対して複数回useStateを使用します。
- オブジェクトを状態として使用して関連データをグループ化できます。
- オブジェクトの状態を更新する際には常に新しいオブジェクトを作成します。
さあ、素晴らしい、状態を持つReactアプリケーションを作成しましょう！そして、Reactの世界では、唯一恒常的なものは（状態の）変化です！
Credits: Image by storyset