XStateによるReactの状態管理

2025年2月15日

1. はじめに

Reactの状態管理ライブラリには、Redux、Recoil、Zustand などさまざまな選択肢があります。その中でも XState は状態遷移を明確に定義できる ステートマシン に基づいたアプローチを提供し、複雑な状態管理を直感的に記述できます。

本記事では、XStateの基本仕様と使い方を解説し、他の状態管理ライブラリとの比較、実際のコードを使った導入方法を紹介します。

2. XStateの仕様と使い方

XStateとは？

XState は 有限状態機械 (FSM: Finite State Machine) や 階層型状態機械 (Statecharts) の考え方に基づいた状態管理ライブラリです。状態管理を視覚的に理解しやすくなり、複雑なアプリケーションの状態遷移を明確に定義できます。

インストール

まず、XStateをインストールします。

npm install xstate @xstate/react

また、開発時にはXStateの可視化ツール（XState Visualizer）を利用すると便利です。

簡単なステートマシンの作成

以下のコードで、簡単な トグルボタン のステートマシンを作成できます。

import { createMachine } from 'xstate';

const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
});

このマシンは inactive と active の2つの状態を持ち、TOGGLE イベントで遷移します。

3. XStateと他の状態管理ライブラリの比較

ライブラリ	メリット	デメリット
XState	状態遷移を明確に定義できる、視覚的な理解がしやすい、イベントドリブン	学習コストがやや高い、単純な状態管理にはオーバースペック
Redux	大規模開発に向いている、エコシステムが充実	ボイラープレートが多い、シンプルな状態管理には冗長
Recoil	Reactと親和性が高い、非同期処理が簡単	エコシステムが少ない、React専用
Zustand	APIがシンプルで軽量	中規模以上のアプリでは管理が難しくなる

4. XStateを使ってReactで状態管理をする

プロジェクトのセットアップ

まず、Reactの新規プロジェクトを作成します。

npx create-react-app xstate-demo --template typescript
cd xstate-demo
npm install xstate @xstate/react

ステートマシンをReactコンポーネントで使用する

次に、作成したステートマシンを React で利用します。

import React from 'react';
import { useMachine } from '@xstate/react';
import { createMachine } from 'xstate';

const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
});

const ToggleButton = () => {
  const [state, send] = useMachine(toggleMachine);

  return (
    <button onClick={() => send('TOGGLE')}>
      {state.matches('active') ? 'ON' : 'OFF'}
    </button>
  );
};

export default ToggleButton;

このコードでは、useMachine フックを使い、現在の状態 (state.matches('active')) に応じてボタンのテキストを変更しています。