【React】ローカルステート管理

はじめに

Reactアプリケーションを開発する上で、状態管理は非常に重要な概念です。ここでは、React初学者向けに、ローカルステート管理の基本と、useStateおよびuseReducerフックの使用方法について説明します。

状態管理とは？

状態（state）とは、アプリケーションのデータを表します。例えば、ユーザーの入力、APIからのデータ、UIの表示状態などがこれに該当します。状態管理とは、これらのデータを効率的に保持し、更新する方法のことを指します。

Reactでは、コンポーネントごとに状態を持つことができ、これをローカルステートと呼びます。

useState フック

useStateは、関数コンポーネントで状態を扱うための最も基本的なフックです。

基本的な使い方

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        増やす
      </button>
    </div>
  );
};

ここでのポイントは

1. useState(0) で、初期値0のステートを作ります。
2. count が現在の値、setCount が値を更新する関数です。
3. ボタンをクリックすると setCount が呼ばれて、count が増えます。

useStateの使い所

• 単純な値（数字、文字列、真偽値）の管理
• それほど複雑でないオブジェクトの管理

useReducer フック

レデューサー関数は1つの関数で複数の方法でデータを処理できます。行動（action）の種類によって、異なる計算や操作を行い、新しい状態を生成します。

    状態: 5
       │
       ▼
 ┌──────────────┐
 │ Reducer      │
 │ (INCREMENT)  │
 │ (+1)         │
 └──────────────┘
        │
        ▼
     状態: 6
        │
        ▼
 ┌──────────────┐
 │ Reducer      │
 │ (DECREMENT)  │
 │ (-3)         │
 └──────────────┘
        │
        ▼
     状態: 3
        │
        ▼
 ┌──────────────┐
 │ Reducer      │
 │ (RESET)      │
 └──────────────┘
        │
        ▼
     状態: 5

基本的な使い方

import React, { useReducer } from 'react';

// ステートの型定義
interface CounterState {
  count: number;
}

// アクションの型定義
type CounterAction = 
  | { type: 'INCREMENT' }
  | { type: 'DECREMENT' }
  | { type: 'RESET' };

// 初期状態
const initialState: CounterState = { count: 0 };

// レデューサー関数
function reducer(state: CounterState, action: CounterAction): CounterState {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return initialState;
    default:
      return state;
  }
}

const Counter: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      カウント: {state.count}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>リセット</button>
    </div>
  );
};

ここでのポイントは

1. reducer 関数で、アクションに応じてステートをどう変更するか定義します。
2. useReducer(reducer, initialState) でステートと dispatch 関数を取得します。
3. ボタンクリックで dispatch を呼び出し、アクションを送信します。

useReducerの使い所

• 状態の更新ロジックを一箇所にまとめられる
• ステートの変更に特定のルールがある場合
• ステートの変更ロジックを一箇所にまとめたい場合

まとめ

TypeScriptを使用することで、型安全なReactアプリケーションを開発できます。
useStateは単純な状態管理に、useReducerはより複雑な状態ロジックに適しています。
適切な型定義を行うことで、バグの早期発見とコードの可読性向上につながります。

TypeScriptを活用したReactのローカルステート管理を理解し、適切に使用することで、より堅牢なアプリケーション開発が可能になります。