M

MLOG

日本語

グローバルな開発者に向けたReactの状態管理の包括的ガイド。useState、Context API、useReducer、そしてRedux、Zustand、TanStack Queryなどの人気ライブラリを探求します。

React状態管理のマスター：グローバル開発者ガイド

フロントエンド開発の世界において、状態の管理は最も重要な課題の一つです。Reactを使用する開発者にとって、この課題は単純なコンポーネントレベルの懸念から、アプリケーションのスケーラビリティ、パフォーマンス、保守性を定義しうる複雑なアーキテクチャ上の決定へと進化しました。シンガポールで個人開発をしている方、ヨーロッパ中に分散したチームの一員である方、ブラジルでスタートアップを立ち上げた方など、世界のどこにいても、Reactの状態管理の全体像を理解することは、堅牢でプロフェッショナルなアプリケーションを構築するために不可欠です。

この包括的なガイドでは、Reactに組み込まれたツールから強力な外部ライブラリまで、状態管理の全領域を案内します。それぞれのアプローチの背後にある「なぜ」を探求し、実用的なコード例を提供し、世界のどこにいても自分のプロジェクトに適したツールを選択するための意思決定フレームワークを提案します。

Reactにおける「状態」とは何か、そしてなぜそれが重要なのか？

ツールに飛び込む前に、「状態」について明確で普遍的な理解を確立しましょう。本質的に、状態とは、特定の時点におけるアプリケーションの状況を記述するあらゆるデータのことです。これは何でもあり得ます：

Reactは、UIが状態の関数である（UI = f(state)）という原則に基づいて構築されています。状態が変化すると、Reactはその変化を反映するためにUIの必要な部分を効率的に再レンダリングします。課題が生じるのは、この状態をコンポーネントツリー内で直接関連していない複数のコンポーネントで共有し、変更する必要がある場合です。ここで、状態管理が重要なアーキテクチャ上の懸念事項となります。

基礎：useStateによるローカル状態

すべてのReact開発者の旅はuseStateフックから始まります。これは、単一のコンポーネントにローカルな状態を宣言する最も簡単な方法です。

例えば、シンプルなカウンターの状態を管理する場合：


import React, { useState } from 'react';

function Counter() {
  // 'count'が状態変数
  // 'setCount'がそれを更新するための関数
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times

      
    

  );
}

useStateは、フォーム入力、トグル、またはその状態がアプリケーションの他の部分に影響を与えないUI要素など、共有する必要のない状態に最適です。問題は、別のコンポーネントが`count`の値を知る必要が出てきたときに始まります。

クラシックなアプローチ：状態のリフトアップとプロップドリル

コンポーネント間で状態を共有するための伝統的なReactの方法は、最も近い共通の祖先まで「リフトアップ」することです。その後、状態はプロップを介して子コンポーネントに流れていきます。これはReactの基本的で重要なパターンです。

しかし、アプリケーションが大きくなるにつれて、これは「プロップドリル（prop drilling）」として知られる問題につながる可能性があります。これは、実際にはデータを必要としない中間コンポーネントの複数のレイヤーを通してプロップを渡さなければならず、ただ深くネストされた子コンポーネントにデータを届けるためだけに行われる状況です。これにより、コードが読みにくく、リファクタリングしにくく、保守しにくくなる可能性があります。

ユーザーのテーマ設定（例：「dark」または「light」）が、コンポーネントツリーの奥深くにあるボタンからアクセスする必要があると想像してみてください。このように渡す必要があるかもしれません：App -> Layout -> Page -> Header -> ThemeToggleButton。このプロップを気にするのは`App`（状態が定義されている場所）と`ThemeToggleButton`（それが使用される場所）だけですが、`Layout`、`Page`、`Header`は仲介役を強制されます。これが、より高度な状態管理ソリューションが解決しようとする問題です。

Reactの組み込みソリューション：ContextとReducerの力

プロップドリルの課題を認識し、ReactチームはContext APIとuseReducerフックを導入しました。これらは強力な組み込みツールであり、外部依存関係を追加することなく、かなりの数の状態管理シナリオを処理できます。

1. Context API：状態をグローバルにブロードキャストする

Context APIは、コンポーネントツリーを通じてデータを渡す方法を提供し、各レベルで手動でプロップを渡す必要がありません。アプリケーションの特定の部分のためのグローバルなデータストアと考えてください。

Contextの使用には、主に3つのステップが含まれます：

  1. Contextの作成： `React.createContext()` を使用してコンテキストオブジェクトを作成します。
  2. Contextの提供： `Context.Provider` コンポーネントを使用してコンポーネントツリーの一部をラップし、それに `value` を渡します。このプロバイダー内のどのコンポーネントもその値にアクセスできます。
  3. Contextの利用： コンポーネント内で `useContext` フックを使用してコンテキストを購読し、現在の値を取得します。

例：Contextを使用したシンプルなテーマスイッチャー


// 1. Contextの作成 (例: theme-context.jsファイル内)
import { createContext, useState } from 'react';

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  // valueオブジェクトはすべてのコンシューマコンポーネントで利用可能になります
  const value = { theme, toggleTheme };

  return (
    
      {children}
    
  );
}

// 2. Contextの提供 (例: メインのApp.jsファイル内)
import { ThemeProvider } from './theme-context';
import MyPage from './MyPage';

function App() {
  return (
    
      
    
  );
}

// 3. Contextの利用 (例: 深くネストされたコンポーネント内)
import { useContext } from 'react';
import { ThemeContext } from './theme-context';

function ThemeToggleButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
  );
}

Context APIの利点：

欠点とパフォーマンスに関する考慮事項：

2. `useReducer`フック：予測可能な状態遷移のために

useStateが単純な状態に適しているのに対し、useReducerはより強力な兄弟であり、より複雑な状態ロジックを管理するために設計されています。特に、複数のサブ値を含む状態や、次の状態が前の状態に依存する場合に便利です。

Reduxに触発されたuseReducerは、reducer関数とdispatch関数を含みます：

例：インクリメント、デクリメント、リセットアクションを持つカウンター


import React, { useReducer } from 'react';

// 1. 初期状態を定義
const initialState = { count: 0 };

// 2. reducer関数を作成
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return initialState;
    default:
      throw new Error('Unexpected action type');
  }
}

function ReducerCounter() {
  // 3. useReducerを初期化
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      
Count: {state.count}

      {/* 4. ユーザーインタラクションでアクションをディスパッチ */}
      
      
      
    
  );
}

useReducerを使用すると、状態更新ロジックが1つの場所（reducer関数）に集中化され、特にロジックが複雑になるにつれて、より予測可能で、テストしやすく、保守しやすくなります。

最強の組み合わせ：`useContext` + `useReducer`

Reactの組み込みフックの真価は、useContextとuseReducerを組み合わせたときに発揮されます。このパターンにより、外部依存関係なしで、堅牢なReduxのような状態管理ソリューションを作成できます。

このパターンが素晴らしいのは、dispatch関数自体が安定したアイデンティティを持ち、再レンダリング間で変更されないためです。これは、アクションを`dispatch`する必要があるだけのコンポーネントは、状態の値が変更されても不必要に再レンダリングされないことを意味し、組み込みのパフォーマンス最適化を提供します。

例：シンプルなショッピングカートの管理


// 1. cart-context.jsでの設定
import { createContext, useReducer, useContext } from 'react';

const CartStateContext = createContext();
const CartDispatchContext = createContext();

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      // アイテムを追加するロジック
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      // idでアイテムを削除するロジック
      return state.filter(item => item.id !== action.payload.id);
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
};

export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, []);

  return (
    
      
        {children}
      
    
  );
};

// 簡単な利用のためのカスタムフック
export const useCart = () => useContext(CartStateContext);
export const useCartDispatch = () => useContext(CartDispatchContext);

// 2. コンポーネントでの使用
// ProductComponent.js - アクションのディスパッチのみが必要
function ProductComponent({ product }) {
  const dispatch = useCartDispatch();
  
  const handleAddToCart = () => {
    dispatch({ type: 'ADD_ITEM', payload: product });
  };

  return ;
}

// CartDisplayComponent.js - 状態の読み取りのみが必要
function CartDisplayComponent() {
  const cartItems = useCart();

  return 
Cart Items: {cartItems.length}
;
}

状態とディスパッチを2つの別々のコンテキストに分割することで、パフォーマンス上の利点が得られます：`ProductComponent`のようなアクションをディスパッチするだけのコンポーネントは、カートの状態が変更されても再レンダリングされません。

いつ外部ライブラリに手を出すべきか

useContext + useReducerのパターンは強力ですが、万能薬ではありません。アプリケーションがスケールするにつれて、専用の外部ライブラリによってより良く対応できるニーズに遭遇するかもしれません。外部ライブラリを検討すべき時は以下の通りです：

人気の状態管理ライブラリのグローバルツアー

Reactのエコシステムは活気に満ちており、それぞれ独自の哲学とトレードオフを持つ多種多様な状態管理ソリューションを提供しています。世界中の開発者に最も人気のある選択肢のいくつかを探ってみましょう。

1. Redux (& Redux Toolkit)：確立された標準

Reduxは長年にわたり状態管理ライブラリの主流でした。厳格な単一方向のデータフローを強制し、状態の変更を予測可能で追跡可能にします。初期のReduxはボイラープレートで知られていましたが、Redux Toolkit (RTK) を使用する現代的なアプローチは、プロセスを大幅に効率化しました。

2. Zustand：ミニマリストで自由な選択肢

ドイツ語で「状態」を意味するZustandは、ミニマリストで柔軟なアプローチを提供します。ボイラープレートなしで中央集権的なストアの利点を提供する、Reduxのよりシンプルな代替案としてしばしば見なされます。


// store.js
import { create } from 'zustand';

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

// MyComponent.js
function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return 
{bears} around here ...
;
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return ;
}

3. Jotai & Recoil：アトミックなアプローチ

JotaiとRecoil（Facebook製）は、「アトミック」な状態管理の概念を普及させました。一つの大きな状態オブジェクトの代わりに、状態を「アトム」と呼ばれる小さく独立した断片に分割します。

4. TanStack Query（旧React Query）：サーバー状態の王様

おそらく近年の最も重要なパラダイムシフトは、私たちが「状態」と呼ぶものの多くが実際にはサーバー状態であるという認識です — つまり、サーバー上に存在し、クライアントアプリケーションでフェッチ、キャッシュ、同期されるデータです。TanStack Queryは汎用的な状態マネージャーではありません。サーバー状態を管理するための専門ツールであり、それを非常にうまく行います。

正しい選択をするための意思決定フレームワーク

状態管理ソリューションの選択は、圧倒されるように感じることがあります。あなたの選択を導くための実用的で、世界的に適用可能な意思決定フレームワークを以下に示します。以下の質問を順番に自問してみてください：

  1. その状態は本当にグローバルですか、それともローカルにできますか？
    常にuseStateから始めてください。絶対に必要でない限り、グローバルな状態を導入しないでください。
  2. 管理しているデータは、実際にはサーバー状態ですか？
    もしAPIからのデータであれば、TanStack Queryを使用してください。これにより、キャッシング、フェッチ、同期が処理されます。これがおそらくアプリの「状態」の80%を管理するでしょう。
  3. 残りのUI状態について、プロップドリルを避けたいだけですか？
    状態の更新が頻繁でない場合（例：テーマ、ユーザー情報、言語）、組み込みのContext APIが完璧で、依存関係のないソリューションです。
  4. UI状態のロジックが複雑で、予測可能な遷移がありますか？
    useReducerとContextを組み合わせてください。これにより、外部ライブラリなしで状態ロジックを管理するための強力で整理された方法が得られます。
  5. Contextでパフォーマンスの問題が発生していますか、または状態が多くの独立した断片で構成されていますか？
    Jotaiのようなアトミックな状態マネージャーを検討してください。不要な再レンダリングを防ぐことで、シンプルなAPIと優れたパフォーマンスを提供します。
  6. 厳格で予測可能なアーキテクチャ、ミドルウェア、強力なデバッグツールを必要とする大規模なエンタープライズアプリケーションを構築していますか？
    これがRedux Toolkitの主な使用例です。その構造とエコシステムは、大規模チームでの複雑さと長期的な保守性のために設計されています。

比較概要表

ソリューション 最適な用途 主な利点 学習曲線
useState ローカルコンポーネントの状態 シンプル、組み込み 非常に低い
Context API 低頻度のグローバル状態（テーマ、認証） プロップドリルを解決、組み込み 低い
useReducer + Context 外部ライブラリなしの複雑なUI状態 整理されたロジック、組み込み 中程度
TanStack Query サーバー状態（APIデータのキャッシュ/同期） 大量の状態ロジックを排除 中程度
Zustand / Jotai シンプルなグローバル状態、パフォーマンス最適化 最小限のボイラープレート、優れたパフォーマンス 低い
Redux Toolkit 複雑な共有状態を持つ大規模アプリ 予測可能性、強力な開発ツール、エコシステム 高い

結論：実用的かつグローバルな視点

Reactの状態管理の世界は、もはや一つのライブラリ対別のライブラリという戦いではありません。それは、異なるツールが異なる問題を解決するために設計された、洗練されたランドスケープへと成熟しました。現代的で実用的なアプローチは、トレードオフを理解し、アプリケーションのための「状態管理ツールキット」を構築することです。

世界中のほとんどのプロジェクトにとって、強力で効果的なスタックは以下から始まります：

  1. すべてのサーバー状態にTanStack Query。
  2. 共有されない、すべての単純なUI状態にuseState。
  3. シンプルで低頻度のグローバルUI状態にuseContext。

これらのツールが不十分な場合にのみ、Jotai、Zustand、Redux Toolkitのような専用のグローバル状態ライブラリに手を出すべきです。サーバー状態とクライアント状態を明確に区別し、最もシンプルな解決策から始めることで、チームの規模やユーザーの場所に関わらず、パフォーマンスが高く、スケーラブルで、保守が楽しいアプリケーションを構築することができます。