React状態管理完全ガイド：ReduxとContext APIの違いと使い分け

로

Reactはコンポーネントベースのアーキテクチャを採用し、再利用性と柔軟性に優れたUI開発が可能です。しかし、アプリケーションの規模が大きくなるにつれて、複数のコンポーネント間でのデータ共有や状態の整合性を保つことが難しくなります。状態管理（ステートマネジメント）は、こうした課題を解決するための重要な要素です。


React状態管理完全ガイド

本記事では、Reactにおける主要な状態管理手法であるContext APIとReduxに焦点を当て、各ツールの特徴や違い、実装例、さらに選定基準までを詳しく解説します。初心者から中級者、そして実務に携わるエンジニアまで幅広く役立つ内容になっています。


📑 目次


1. Reactで状態管理が重要な理由

Reactの魅力の一つは、ユーザーインターフェースを状態（state）によって動的に制御できる点にあります。ユーザーの操作、外部APIからのデータ取得、内部的なイベントなどによって状態が変化すると、それに応じて自動的にUIが再描画される仕組みです。

しかし、アプリケーションの規模が拡大すると、コンポーネント同士が状態を共有する必要が出てきます。単一コンポーネントの状態管理（ローカルステート）では限界があり、アプリ全体に影響を及ぼすようなグローバルステートの管理が求められるようになります。

この課題に対応するために、Reactでは標準でContext APIが提供されており、さらにより強力で拡張性のある外部ライブラリとしてReduxが利用されています。本記事ではそれぞれのツールの特徴や使い方を、具体的なコードとともに段階的に解説していきます。


2. 状態（state）とは何か？

Reactにおける状態（state）とは、あるコンポーネントが保持しているデータや情報を指します。これはユーザーの操作や外部からの入力、あるいは内部処理によって変化し、状態が変わるたびにUIもそれに応じて更新されます。この「状態 = 表示の源」という概念が、Reactの宣言的UI設計の中核をなしています。

useStateによる基本的な状態管理

Reactでは、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>
  );
}

このように、useStateを使うことで、コンポーネント内部で「ローカル状態」を簡単に管理できます。しかし、この方法では状態がそのコンポーネントの中に閉じており、他のコンポーネントと共有することができません。

ローカルステートとグローバルステートの違い

Reactでは状態の管理方法を大きく2つに分類できます：

種類 概要 適用例
ローカルステート コンポーネント単位で管理され、他から直接参照できない フォームの入力値、UIの開閉状態など
グローバルステート 複数のコンポーネント間で共有される状態 ログインユーザー情報、アプリ全体のテーマ設定、言語設定など

小規模なアプリケーションではローカルステートだけで十分ですが、コンポーネントが増えたり、同じデータを複数箇所で使いまわすようになると、グローバルステートの導入が不可欠になります。

このような場面で力を発揮するのが、次に紹介するContext APIです。標準機能でありながら、コンポーネント間の状態共有をシンプルに実現する強力なツールです。


3. Context APIの概要と使い方

Context APIは、Reactに標準で備わっているグローバル状態共有のための機能です。主に「propsのバケツリレー（prop drilling）」と呼ばれる問題を解決するために用いられます。

たとえば、深い階層の子コンポーネントに状態を渡す場合、通常は親から子へpropsを繰り返し渡す必要がありますが、Contextを使えば階層に関係なく直接状態にアクセスできます。

Context APIの構成要素

  • Contextオブジェクト: createContext()で生成される状態のコンテナ
  • Provider: コンテキストの値を子コンポーネントに供給するラッパー
  • Consumer / useContext: コンテキストの値を受け取って使用するための方法

基本的な使用例

以下は、テーマの状態をContext APIで管理するシンプルな例です。

import React, { createContext, useState, useContext } from 'react';

// 1. Contextの作成
const ThemeContext = createContext();

// 2. Providerの定義
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. Contextの利用
function ThemedComponent() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>現在のテーマ: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        テーマを切り替える
      </button>
    </div>
  );
}

Context APIのメリット

  • 外部ライブラリ不要：React本体のみで完結
  • コードの簡潔化：不要なpropsの受け渡しを排除
  • Hooksとの相性が良い：useContextで簡潔に使用可能

注意すべき制限

  • 全てのコンシューマーが再レンダリングされる：Contextの値が変わると、全ての使用コンポーネントが再描画されるため、パフォーマンス問題の原因に
  • 非同期処理が弱い：Reduxのようなミドルウェアやロジック層を持たない
  • スケーラビリティに限界がある：小中規模には最適だが、大規模アプリでは管理が煩雑になりがち

Context APIは「小さく始める」には最適な手段です。しかし、アプリのロジックが複雑になったり、状態の種類が増える場合には、より構造化されたReduxのようなライブラリの利用を検討すべきです。

次のセクションでは、Reduxがなぜ登場したのか、その構造や利点について詳しく見ていきます。


4. Reduxの登場背景と必要性

Context APIは簡潔で便利な状態共有手段ですが、アプリケーションの規模や複雑さが増すといくつかの限界に直面します。特に、状態の種類が多くなり、複数のコンポーネント間で依存関係が強くなると、予測性・一貫性・デバッグの難しさが課題になります。こうした背景のもとに生まれたのがReduxです。

Reduxとは？

Reduxは、JavaScriptアプリケーションの状態を一元的かつ予測可能に管理するためのライブラリです。Facebookが提唱したFluxアーキテクチャに影響を受けており、状態の変更を明示的に管理することで、アプリ全体の動作を把握しやすくします。

Reduxの特徴的なコンセプトは以下の3つです：

要素 説明
Store アプリ全体の状態を保持する唯一の場所
Action 状態の変化を記述するプレーンなオブジェクト
Reducer 現在の状態とActionに基づき新しい状態を返す純粋関数

Reduxの基本的な流れ

  1. ユーザーがUIを操作する
  2. その操作に対応するActionが生成・dispatchされる
  3. ReducerがActionに基づいて新しい状態を計算する
  4. Storeが更新され、関連するコンポーネントが再レンダリングされる

以下はシンプルなReduxカウンターの例です：

import { createStore } from 'redux';

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

// Reducer
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

// Storeの作成
const store = createStore(counterReducer);

// 状態の監視と更新
store.subscribe(() => console.log(store.getState()));
store.dispatch({ type: 'INCREMENT' });

Reduxのメリット

  • 予測可能な状態変更：すべての変更はActionを通じて行われ、デバッグが容易
  • 一元管理：アプリケーションの状態が一か所に集約される
  • 強力な開発ツール：Redux DevToolsによるタイムトラベルデバッグが可能
  • ミドルウェアの活用：redux-thunkやredux-sagaで非同期処理も制御しやすい

ただし、Reduxには初期設定の煩雑さやボイラープレートコードの多さといった課題もあります。それらを解決するために登場したのがRedux Toolkitです（詳細は後ほど紹介します）。

次のセクションでは、Context APIとReduxを実際に比較しながら、それぞれの特性と選定基準を詳しく見ていきましょう。


5. Context APIとReduxの比較

Context APIとReduxは、どちらもReactで状態を管理する手段ですが、その設計思想や使い方、スケーラビリティにおいて大きく異なります。このセクションでは、両者の主な違いを表形式で比較しながら、どのような場面でどちらを選ぶべきかを解説します。

機能・構造の比較表

比較項目 Context API Redux
導入の手軽さ Reactのみで完結 ライブラリの追加が必要
構造 Provider / Consumer のシンプルな構造 Store、Action、Reducer、Middlewareの構成
デバッグ性 限定的（開発ツールなし） Redux DevToolsなど充実したツール
非同期処理 対応が難しい ミドルウェア（Thunk/Saga）で柔軟に対応
パフォーマンス すべてのConsumerが再レンダリング Selectorやメモ化で最適化可能

選択の判断基準

  • Context APIを使うべき場合：
    • アプリの規模が小〜中程度
    • 共有したい状態が限定的（例：テーマ、認証情報など）
    • シンプルに構築したい、依存ライブラリを増やしたくない
  • Reduxを使うべき場合：
    • 状態が複雑かつコンポーネント間の依存が強い
    • 非同期処理やロジックの集中管理が必要
    • 開発ツールやミドルウェアを活用したい

どちらが「優れているか」ではなく、「プロジェクトの特性に最適か」が重要です。また、両者は排他的ではなく、用途によって併用することも可能です（例：Contextで認証管理、Reduxでビジネスロジック）。

次のセクションでは、実際にContext APIとReduxを用いて、同じTodoアプリを構築してみましょう。実装の違いがより明確になります。


6. 実装例：シンプルなTodoアプリの作成

それでは、Context APIとReduxを使って、同じ機能を持つTodoアプリを実装してみましょう。実際にコードを書きながら、構造や可読性、拡張性などの違いを体験してみてください。

① Context APIによる実装

まずはContextを使って、グローバルな状態としてTodoリストを管理します。

// TodoContext.js
import React, { createContext, useState, useContext } from 'react';

const TodoContext = createContext();

export function TodoProvider({ children }) {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text }]);
  };

  const removeTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <TodoContext.Provider value={{ todos, addTodo, removeTodo }}>
      {children}
    </TodoContext.Provider>
  );
}

export const useTodos = () => useContext(TodoContext);
// App.js
import React, { useState } from 'react';
import { TodoProvider, useTodos } from './TodoContext';

function TodoList() {
  const { todos, removeTodo } = useTodos();
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={() => removeTodo(todo.id)}>削除</button>
        </li>
      ))}
    </ul>
  );
}

function AddTodo() {
  const [text, setText] = useState('');
  const { addTodo } = useTodos();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim()) {
      addTodo(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">追加</button>
    </form>
  );
}

function App() {
  return (
    <TodoProvider>
      <h2>Context API版 Todoアプリ</h2>
      <AddTodo />
      <TodoList />
    </TodoProvider>
  );
}

export default App;

② Reduxによる実装

次に、Reduxを使って同じ機能を実装します。状態の管理がより明確に分離され、拡張しやすい構造になります。

// actions.js
export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';

export const addTodo = (text) => ({
  type: ADD_TODO,
  payload: { id: Date.now(), text }
});

export const removeTodo = (id) => ({
  type: REMOVE_TODO,
  payload: id
});
// reducer.js
import { ADD_TODO, REMOVE_TODO } from './actions';

const initialState = {
  todos: []
};

export default function todoReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return { todos: [...state.todos, action.payload] };
    case REMOVE_TODO:
      return { todos: state.todos.filter((todo) => todo.id !== action.payload) };
    default:
      return state;
  }
}
// App.js
import React, { useState } from 'react';
import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';
import todoReducer from './reducer';
import { addTodo, removeTodo } from './actions';

const store = createStore(todoReducer);

function TodoList() {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={() => dispatch(removeTodo(todo.id))}>削除</button>
        </li>
      ))}
    </ul>
  );
}

function AddTodo() {
  const [text, setText] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim()) {
      dispatch(addTodo(text));
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">追加</button>
    </form>
  );
}

function App() {
  return (
    <Provider store={store}>
      <h2>Redux版 Todoアプリ</h2>
      <AddTodo />
      <TodoList />
    </Provider>
  );
}

export default App;

実装上の違いまとめ

  • Context API: 構造がシンプルで、セットアップが早い。軽量な用途に最適。
  • Redux: 構成が明確で拡張しやすく、大規模開発や複雑な状態管理に向いている。

次のセクションでは、Reduxの最新形であるRedux Toolkitと、React Hooksとの組み合わせによる現代的な状態管理手法をご紹介します。


7. Redux ToolkitとReact Hooksによる最新の管理方法

Reduxは強力な状態管理ライブラリですが、従来の書き方は冗長でボイラープレートが多いという課題がありました。そこで公式に推奨されているのが、Redux Toolkit（RTK）です。これはReduxの使い勝手を大幅に向上させるための標準化されたツールセットです。

Redux Toolkitの主な特徴

  • configureStore(): ミドルウェアやDevToolsが自動で設定される
  • createSlice(): アクションとリデューサーを一括で生成可能
  • createAsyncThunk(): 非同期処理のための標準的な仕組みを提供

RTKを使ったカウンターの例

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
    reset: (state) => { state.value = 0 }
  }
});

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;
// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});
// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './counterSlice';

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Redux Toolkit カウンター</h2>
      <p>現在のカウント: {count}</p>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
      <button onClick={() => dispatch(reset())}>リセット</button>
    </div>
  );
}

export default App;

useReducer + useContextによる軽量な代替

大規模なReduxの導入が不要な場合、useReducerとuseContextを組み合わせて独自の状態管理パターンを構築することも可能です。

// CounterContext.js
import React, { createContext, useReducer, useContext } from 'react';

const CounterContext = createContext();

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    case 'DECREMENT': return { count: state.count - 1 };
    default: return state;
  }
}

export function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
}

export const useCounter = () => useContext(CounterContext);

どちらを選ぶべきか？

  • Redux Toolkit：
    • アプリが中〜大規模で、状態の種類が多い場合
    • 非同期処理やロジックの再利用、開発ツールの活用が必要な場合
  • useReducer + Context：
    • 小規模で単純な状態管理にとどまるアプリ
    • 外部ライブラリを使いたくない場合や試作段階

次のセクションでは、状態管理におけるパフォーマンスの最適化について、注意点と改善テクニックをご紹介します。


8. 状態管理におけるパフォーマンス最適化

Reactの状態管理において、見落とされがちなのが再レンダリングのコストです。アプリケーションの規模が拡大すると、状態の変更が不要なコンポーネントにまで影響を及ぼし、パフォーマンスの低下につながることがあります。ここでは、よくある問題とその最適化方法を紹介します。

Context APIにおける注意点と改善策

Context APIでは、Providerのvalueが変更されると、全てのコンシューマーが再レンダリングされるという特性があります。これは非常に便利である一方、意図しない再描画の原因となることもあります。

以下のテクニックで最適化を図りましょう：

  • Contextの分割：1つの巨大なContextを複数の小さなContextに分け、必要なデータだけを供給する
  • useMemo()の活用：Providerに渡すvalueをメモ化し、無駄な更新を防止
  • React.memo()の使用：再レンダリングを防ぎたいコンポーネントをメモ化
  • グローバルにしすぎない：ローカルステートで十分な場合は、それを優先

Reduxでの最適化ポイント

Reduxでは、useSelector()を使って必要な状態だけを取得することで、より細かくレンダリングの制御が可能です。ただし、設定が不適切だと、やはり不要な再レンダリングが発生します。

  • Selectorの最小化：必要な最小限の状態だけを選択
  • React.memo()とuseCallback()の併用：関数やコンポーネントの再生成を避ける
  • reselectライブラリの利用：メモ化されたSelectorでパフォーマンス向上
  • 状態の正規化：ネストが深い構造を避け、平坦に保つ

その他の汎用的なReactパフォーマンス改善策

  • 入力イベントのデバウンス：検索フィールドなどは、入力ごとに状態を変更せず遅延処理を導入
  • React 18のバッチ更新：複数の状態変更をまとめて処理し、レンダリング負荷を軽減
  • コンポーネントの遅延読み込み（Lazy Load）：必要なタイミングでのみ読み込む

状態管理の最適化は「速度」だけの話ではありません。ユーザーにとっての「レスポンスの良さ」や「操作感」を左右する、極めて重要なUX設計でもあります。

次の最終セクションでは、本記事の内容を総括し、用途に応じたツール選びの指針をまとめます。


9. 状況に応じた最適な選択とは

Reactの状態管理は、アプリケーションの設計と拡張性に大きな影響を与える重要なアーキテクチャ上の決断です。小さなコンポーネントから始まり、やがて複雑な状態を扱う必要が出てくると、どのように状態を「共有」し「制御」するかが成功の鍵を握ります。

Context APIとRedux、それぞれの特徴を再確認

  • Context API: 軽量でReactに内蔵された手軽な手段。小規模アプリやテーマ・ログイン情報のような限定的なデータ共有に適しています。
  • Redux: 状態の一元管理・予測可能性・デバッグ性に優れ、大規模開発に向いています。Redux Toolkitを使えば設定も簡素化されます。
  • useReducer + Context: 状態が単純な場合、最小構成で柔軟に対応可能なミニマルアーキテクチャです。

どのように選べば良いのか？

  • 🟢 状態がシンプル or 限定的 → Context API
  • 🟡 中規模で、非同期や構造の再利用が必要 → useReducer + Context または Redux Toolkit
  • 🔴 複雑な状態・ロジックを持つ大規模アプリ → Redux（+ Toolkit）

重要なのは「最も強力なツールを使うこと」ではなく、「必要十分なツールを選ぶこと」です。状態が増えれば増えるほど、それをどう構造化するかが問われます。

状態とはアプリケーションの“心臓”です。それをどう扱うかは、開発者の思想と設計力を最も如実に映し出す鏡と言えるでしょう。

小さく始めて、大きく育てる。今のあなたのプロジェクトに「ちょうどよい」状態管理を選んでみてください。

댓글 남기기

Table of Contents

→ Table of Contents