はじめに
この記事は、Reactを学ぶ中で得た知識や感じたことを記録したメモをまとめたものです。エンジニア初学者として学習する中で気づいたポイントや躓いた部分を整理し、後から振り返った際に役立てるとともに、Reactを学び始めた方々にも少しでも参考になる内容になれば幸いです。
< 用語の区別 >
- プロパティ: クラス内に保持される値。一般的なクラス構造で利用される。
- props: 親コンポーネントから渡された属性。読み取り専用。
-
state: コンポーネントごとに管理される値。
stateを更新することで画面に変化を反映する。
Stateの役割
状態（state）とは、コンポーネントごとに保持・管理される値のこと。
通常の変数は再レンダリングのたびに初期化されてしまうが、stateを使うことでその値を保持し、画面に反映することができる。
< 状態管理が必要な理由 >
Reactでは、画面の更新は状態（state）の変化に依存している。たとえば、ボタンをクリックしてカウントを増やす、入力フィールドに入力された文字を表示する、といった動的な操作を実現するために、状態管理が必要となる。
ReactのuseStateフック
useStateはReactの「フック（Hook）」の一つで、コンポーネント内で状態を管理するために使用する。
useStateの基本構文
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0); // 初期値は0
const handleClick = () => {
setCount(count + 1); // 状態を更新
};
return (
<div>
<p>現在のカウント: {count}</p>
<button onClick={handleClick}>+1</button>
</div>
);
};
export default Counter;
useStateの仕組み
-
接続（Hook into）
React内部と接続し、状態を管理する仕組みを提供する。 -
現在の値と更新関数を返却
-
useStateは、状態管理のための配列を返す。 - 配列の1番目の要素は「現在の状態」、2番目の要素は「状態を更新するための関数」。
- 例えば、
const [count, setCount] = useState(0)では、countが現在の状態、setCountが状態を更新する関数となる。
-
-
状態を更新
更新関数を使って新しい値を渡すと、Reactがコンポーネントを再レンダリングする。
状態変更時の注意点
Reactでは、useStateの更新関数（例: setState）を使わずに直接状態を変更することはできない。
以下のように状態を直接変更しても、画面に反映されない：
let count = 0; // 状態を直接変更する変数
const handleClick = () => {
count = count + 1; // NG: Reactはこの変更を検知しない
};
Reactでは必ず、setState関数を使って状態を更新する必要がある：
const [count, setCount] = useState(0); // Reactが管理する状態
const handleClick = () => {
setCount(count + 1); // OK: Reactが状態の更新を検知し、再レンダリングが実行される
};
状態管理とイベントリスナーの連携
以下は、useStateとonClickイベントリスナーを組み合わせて、ボタンをクリックするたびにカウントが増加するようになっている。
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1); // 状態を更新
};
return (
<div>
<p>現在のカウント: {count}</p>
<button onClick={handleClick}>+1</button>
</div>
);
};
export default Counter;
コード解説
-
useStateで状態を管理-
useState(0)で状態（count）を初期化している。初期値は0。 -
useStateは配列を返し、1番目の要素が「現在の状態」、2番目の要素が「状態を更新する関数」。 -
countが現在の状態、setCountが状態を更新するための関数となっている。
-
-
handleClick関数で状態を更新-
handleClick関数内でsetCount(count + 1)を呼び出すことで、状態を1増加させている。 - 状態が更新されると、Reactが自動的に再レンダリングを行い、新しい状態が画面に反映される。
-
-
再レンダリングと画面表示
- 再レンダリング時、
<p>現在のカウント: {count}</p>の{count}部分が最新の値に更新される。 - これにより、カウントの増加がリアルタイムで画面に反映される。
- 再レンダリング時、
-
ボタンのクリックイベント
-
<button onClick={handleClick}>+1</button>により、クリックイベントを監視し、クリックされるたびにhandleClick関数が実行される。
-
実行結果
- 初期状態では、「現在のカウント: 0」と表示される。
- ボタンをクリックするたびに、カウントが
1ずつ増加する。
画面更新の仕組み
状態を変更して画面を更新するには、以下の2つの処理が必要：
-
Reactにコンポーネントの再レンダリングを依頼
状態が変更されたことをReactに伝えると、Reactはそのコンポーネントを再実行して、変更後の状態に基づいたUIを生成する。 -
変更した値を状態として保持
useStateを使用して状態を更新すると、その値がReactの内部で記録され、次回の再レンダリングで最新の状態が反映される。
再レンダリングの流れ
- 状態の更新関数（例:
setCount(count + 1)）を呼び出す - Reactが状態の変化を検知
- コンポーネントを再レンダリングし、新しいUIを生成
- ユーザーに画面の変更が反映される
まとめ
-
stateは、コンポーネントの内部で管理される値で、画面の更新を可能にする仕組みである。 - 状態を変更するには、
useStateが提供する更新関数を使う必要がある。 - 状態管理とイベントリスナーを連携することで、Reactの動的なUIを簡単に構築できる。
- Reactの再レンダリングの仕組みを理解することで、より効率的にコンポーネントを設計できるようになる。