MENU
  1. ホーム
  2. Column
  3. XStateで状態管理が劇的に楽になる！初心者でもわかる導入から実践まで完全ガイド

XStateで状態管理が劇的に楽になる！初心者でもわかる導入から実践まで完全ガイド

Column

フロントエンド開発で「状態管理が複雑すぎて手に負えない」「バグが頻発して原因がわからない」と悩んだことはありませんか？

本記事では、有限状態機械を活用した次世代状態管理ライブラリ XState について、基本概念から実践的な活用方法まで初心者エンジニア向けに徹底解説します。

目次

XStateとは？状態管理の新しいアプローチ

あわせて読みたい
XState - JavaScript State Machines and Statecharts

XStateは、有限状態機械（Finite State Machine）とステートチャートを活用したJavaScript/TypeScript用の状態管理ライブラリです。従来のReduxやZustandとは異なるアプローチで、複雑な状態遷移を視覚的かつ安全に管理できます。

あわせて読みたい
XState

🎯 XStateの基本概念

📋 有限状態機械（FSM）とは

✅ 定義された状態の集合
- システムが取りうる全ての状態が明確
- 例：ログイン前、ログイン中、ログイン済み

✅ 状態間の遷移ルール
- どの状態からどの状態に移れるかが決まっている
- 不正な状態遷移を防止

✅ イベント駆動
- 外部からのイベントによってのみ状態が変化
- 予測可能で安全な状態管理

💡 XStateの特徴

// 信号機の例：シンプルな状態遷移
import { createMachine, createActor } from 'xstate';

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      on: { TIMER: 'yellow' }
    },
    yellow: {
      on: { TIMER: 'red' }
    },
    red: {
      on: { TIMER: 'green' }
    }
  }
});

const actor = createActor(lightMachine);
actor.subscribe((state) => {
  console.log(state.value); // 現在の状態
});

actor.start(); // 'green'
actor.send({ type: 'TIMER' }); // 'yellow'
actor.send({ type: 'TIMER' }); // 'red'

🔄 従来の状態管理との違い

項目従来の状態管理XStateメリット
状態の定義自由な値の変更明確な状態の集合不正状態の防止
状態遷移手動でロジック実装宣言的な遷移ルールバグの削減
可視化コードから推測状態図の自動生成理解しやすさ
テスト複雑なモック作成状態ベースのテストテスト容易性

なぜXStateが注目されているのか

🚀 複雑な状態遷移の可視化

あわせて読みたい
XState Visualizer Visualizer for XState state machines and statecharts

XStateの最大の強みは、状態遷移を視覚的に確認できることです。上記のStately Visualizerを使用することで、コードから自動的に状態図が生成され、チーム全体で状態の流れを共有できます。

🎨 視覚化のメリット

✅ チーム間のコミュニケーション向上
- デザイナーやPMとの状態共有が簡単
- 言葉での説明が不要

✅ デバッグの効率化  
- 現在の状態と可能な遷移が一目で分かる
- 問題の箇所を素早く特定

✅ 仕様書としての活用
- 状態図がそのまま仕様書になる
- ドキュメント作成工数の削減

🛡️ バグの少ない堅牢なアプリケーション

// 従来の問題例：不正な状態遷移
let isLoading = false;
let data = null;
let error = null;

// 問題：loading中なのにdataとerrorも存在する可能性
async function fetchData() {
  isLoading = true;
  try {
    data = await api.getData();
    error = null; // 忘れがち
  } catch (e) {
    error = e;
    data = null; // 忘れがち  
  }
  isLoading = false;
}

// XStateでの解決
const fetchMachine = createMachine({
  initial: 'idle',
  states: {
    idle: {
      on: { FETCH: 'loading' }
    },
    loading: {
      on: {
        SUCCESS: 'success',
        ERROR: 'error'
      }
    },
    success: {
      on: { FETCH: 'loading' }
    },
    error: {
      on: { RETRY: 'loading' }
    }
  }
});

// 不正な状態が存在しない！

🧪 テスタビリティの向上

// XStateでのテストは状態ベース
import { createMachine } from 'xstate';

test('ログインフローのテスト', () => {
  const loginMachine = createMachine({
    initial: 'loggedOut',
    states: {
      loggedOut: {
        on: { LOGIN: 'loggingIn' }
      },
      loggingIn: {
        on: {
          SUCCESS: 'loggedIn',
          ERROR: 'error'
        }
      },
      loggedIn: {
        on: { LOGOUT: 'loggedOut' }
      },
      error: {
        on: { RETRY: 'loggingIn' }
      }
    }
  });

  // 状態遷移のテスト
  expect(loginMachine.transition('loggedOut', { type: 'LOGIN' }).value)
    .toBe('loggingIn');
  
  expect(loginMachine.transition('loggingIn', { type: 'SUCCESS' }).value)
    .toBe('loggedIn');
});

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

📊 主要ライブラリ比較表

ライブラリ学習コスト可視化型安全性複雑度対応おすすめ度
XState中〜高⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Redux高⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Zustand低⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Jotai中⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Recoil中⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

🎯 Redux vs XState

// Redux: アクション・リデューサーパターン
const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    case 'TOGGLE_TODO':
      return { 
        ...state, 
        todos: state.todos.map(todo => 
          todo.id === action.id 
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      };
    // 状態遷移のロジックが分散
    default:
      return state;
  }
};

// XState: 状態中心の設計
const todoMachine = createMachine({
  context: { todos: [] },
  initial: 'idle',
  states: {
    idle: {
      on: {
        ADD_TODO: {
          actions: assign({
            todos: ({ context, event }) => [
              ...context.todos,
              { id: Date.now(), text: event.text, completed: false }
            ]
          })
        },
        TOGGLE_TODO: {
          actions: assign({
            todos: ({ context, event }) => 
              context.todos.map(todo => 
                todo.id === event.id 
                  ? { ...todo, completed: !todo.completed }
                  : todo
              )
          })
        }
      }
    }
  }
});

// 状態遷移が明確で予測可能

💡 Zustand vs XState

// 用途別の使い分け

// 🎯 簡単な状態管理 → Zustand
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// 🎯 複雑な状態遷移 → XState  
const complexMachine = createMachine({
  initial: 'loading',
  states: {
    loading: {
      invoke: {
        src: 'fetchData',
        onDone: { target: 'success' },
        onError: { target: 'error' }
      }
    },
    success: {
      on: {
        EDIT: 'editing',
        DELETE: 'deleting'
      }
    },
    editing: {
      on: {
        SAVE: 'saving',
        CANCEL: 'success'
      }
    },
    saving: {
      invoke: {
        src: 'saveData',
        onDone: { target: 'success' },
        onError: { target: 'error' }
      }
    },
    error: {
      on: { RETRY: 'loading' }
    }
  }
});

// 複雑な状態遷移はXStateの得意分野

XStateの導入方法

GitHub
GitHub - statelyai/xstate: State machines, statecharts, and actors for complex logic State machines, statecharts, and actors for complex logic - statelyai/xstate

🚀 インストールと基本セットアップ

# XStateのインストール
npm install xstate

# React用フック（Reactを使用する場合）
npm install @xstate/react

# Vue用（Vueを使用する場合）
npm install @xstate/vue

# TypeScript型生成（推奨）
npm install --save-dev @xstate/cli

⚛️ Reactとの統合

// machine.js - 状態機械の定義
import { createMachine, assign } from 'xstate';

export const counterMachine = createMachine({
  id: 'counter',
  context: {
    count: 0
  },
  initial: 'active',
  states: {
    active: {
      on: {
        INCREMENT: {
          actions: assign({
            count: ({ context }) => context.count + 1
          })
        },
        DECREMENT: {
          actions: assign({
            count: ({ context }) => context.count - 1
          })
        }
      }
    }
  }
});

// Counter.jsx - Reactコンポーネント
import { useMachine } from '@xstate/react';
import { counterMachine } from './machine';

function Counter() {
  const [state, send] = useMachine(counterMachine);

  return (
    <div>
      <h1>Count: {state.context.count}</h1>
      <button onClick={() => send({ type: 'INCREMENT' })}>
        +
      </button>
      <button onClick={() => send({ type: 'DECREMENT' })}>
        -
      </button>
    </div>
  );
}

🔒 TypeScriptでの型安全な実装

// types.ts - 型定義
interface CounterContext {
  count: number;
}

type CounterEvent = 
  | { type: 'INCREMENT' }
  | { type: 'DECREMENT' }
  | { type: 'RESET' };

// machine.ts - 型安全な状態機械
import { createMachine, assign } from 'xstate';

export const typedCounterMachine = createMachine({
  types: {} as {
    context: CounterContext;
    events: CounterEvent;
  },
  id: 'typedCounter',
  context: {
    count: 0
  },
  initial: 'active',
  states: {
    active: {
      on: {
        INCREMENT: {
          actions: assign({
            count: ({ context }) => context.count + 1
          })
        },
        DECREMENT: {
          actions: assign({
            count: ({ context }) => context.count - 1
          })
        },
        RESET: {
          actions: assign({
            count: 0
          })
        }
      }
    }
  }
});

// TypeScriptによる型チェックが効く！

基本的な使い方とサンプルコード

XState by Example
XState by Example Learn XState from real examples accompanied by interactive demos.

実際のサンプルコードを見ながら学習したい方は、上記のXState by Exampleで豊富な実例を確認できます。

🎮 簡単なトグル機能の実装

// toggle-machine.js
import { createMachine } from 'xstate';

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

// Toggle.jsx
import { useMachine } from '@xstate/react';
import { toggleMachine } from './toggle-machine';

function Toggle() {
  const [state, send] = useMachine(toggleMachine);

  return (
    <div>
      <h2>状態: {state.value}</h2>
      <button 
        onClick={() => send({ type: 'TOGGLE' })}
        className={state.matches('active') ? 'active' : 'inactive'}
      >
        {state.matches('active') ? 'ON' : 'OFF'}
      </button>
    </div>
  );
}

📊 状態遷移図の作成方法

📈 状態遷移図の読み方

┌─────────────┐  TOGGLE   ┌─────────────┐
│  inactive   │ ────────→ │   active    │
│             │           │             │
│  [初期状態]   │ ←──────── │             │
└─────────────┘  TOGGLE   └─────────────┘

✅ 状態遷移図のメリット
- 一目でシステムの動作が分かる
- 設計段階での問題発見が容易
- ドキュメント作成が不要
- チーム間での認識共有が簡単

⚡ イベントとアクションの定義

// アクション付きの状態機械
import { createMachine, assign } from 'xstate';

const timerMachine = createMachine({
  id: 'timer',
  context: {
    elapsed: 0,
    duration: 60
  },
  initial: 'idle',
  states: {
    idle: {
      on: {
        START: 'running'
      }
    },
    running: {
      // entry: 状態に入る時のアクション
      entry: assign({
        elapsed: 0
      }),
      
      // exit: 状態から出る時のアクション  
      exit: 'logElapsed',
      
      on: {
        TICK: {
          actions: assign({
            elapsed: ({ context }) => context.elapsed + 1
          }),
          // ガード: 条件付き遷移
          target: 'finished',
          guard: ({ context }) => context.elapsed >= context.duration
        },
        PAUSE: 'paused',
        RESET: 'idle'
      }
    },
    paused: {
      on: {
        RESUME: 'running',
        RESET: 'idle'
      }
    },
    finished: {
      on: {
        RESET: 'idle'
      }
    }
  }
}, {
  actions: {
    logElapsed: ({ context }) => {
      console.log(`タイマー終了: ${context.elapsed}秒経過`);
    }
  }
});

実践的な活用例

🔐 ログインフォームの状態管理

// login-machine.js
import { createMachine, assign } from 'xstate';

export const loginMachine = createMachine({
  id: 'login',
  context: {
    email: '',
    password: '',
    error: null,
    user: null
  },
  initial: 'idle',
  states: {
    idle: {
      on: {
        SUBMIT: {
          target: 'validating',
          guard: ({ context }) => 
            context.email.length > 0 && context.password.length > 0
        },
        UPDATE_EMAIL: {
          actions: assign({
            email: ({ event }) => event.value
          })
        },
        UPDATE_PASSWORD: {
          actions: assign({
            password: ({ event }) => event.value
          })
        }
      }
    },
    validating: {
      invoke: {
        src: 'validateCredentials',
        onDone: {
          target: 'success',
          actions: assign({
            user: ({ event }) => event.output,
            error: null
          })
        },
        onError: {
          target: 'error',
          actions: assign({
            error: ({ event }) => event.error.message
          })
        }
      }
    },
    success: {
      on: {
        LOGOUT: {
          target: 'idle',
          actions: assign({
            user: null,
            email: '',
            password: ''
          })
        }
      }
    },
    error: {
      on: {
        RETRY: 'idle',
        SUBMIT: 'validating'
      }
    }
  }
}, {
  actors: {
    validateCredentials: async ({ context }) => {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: context.email,
          password: context.password
        })
      });
      
      if (!response.ok) {
        throw new Error('ログインに失敗しました');
      }
      
      return response.json();
    }
  }
});

🎭 モーダルの開閉制御

// modal-machine.js
import { createMachine, assign } from 'xstate';

export const modalMachine = createMachine({
  id: 'modal',
  context: {
    title: '',
    content: '',
    confirmCallback: null
  },
  initial: 'closed',
  states: {
    closed: {
      on: {
        OPEN: {
          target: 'open',
          actions: assign({
            title: ({ event }) => event.title || '',
            content: ({ event }) => event.content || '',
            confirmCallback: ({ event }) => event.confirmCallback || null
          })
        }
      }
    },
    open: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            CONFIRM: 'confirming',
            CANCEL: '#modal.closed',
            CLOSE: '#modal.closed'
          }
        },
        confirming: {
          invoke: {
            src: 'executeConfirmCallback',
            onDone: '#modal.closed',
            onError: 'error'
          }
        },
        error: {
          on: {
            RETRY: 'confirming',
            CANCEL: '#modal.closed'
          }
        }
      }
    }
  }
}, {
  actors: {
    executeConfirmCallback: async ({ context }) => {
      if (context.confirmCallback) {
        await context.confirmCallback();
      }
    }
  }
});

// Modal.jsx
import { useMachine } from '@xstate/react';
import { modalMachine } from './modal-machine';

function Modal() {
  const [state, send] = useMachine(modalMachine);

  if (state.matches('closed')) {
    return null;
  }

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <h2>{state.context.title}</h2>
        <p>{state.context.content}</p>
        
        {state.matches('open.error') && (
          <p className="error">操作中にエラーが発生しました</p>
        )}
        
        <div className="modal-actions">
          <button 
            onClick={() => send({ type: 'CANCEL' })}
            disabled={state.matches('open.confirming')}
          >
            キャンセル
          </button>
          <button 
            onClick={() => send({ type: 'CONFIRM' })}
            disabled={state.matches('open.confirming')}
          >
            {state.matches('open.confirming') ? '実行中...' : '確認'}
          </button>
        </div>
      </div>
    </div>
  );
}

🌐 非同期処理の状態管理

// data-fetch-machine.js
import { createMachine, assign } from 'xstate';

export const dataFetchMachine = createMachine({
  id: 'dataFetch',
  context: {
    data: null,
    error: null,
    retryCount: 0,
    maxRetries: 3
  },
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      invoke: {
        src: 'fetchData',
        onDone: {
          target: 'success',
          actions: assign({
            data: ({ event }) => event.output,
            error: null,
            retryCount: 0
          })
        },
        onError: [
          // 最大リトライ回数に達していない場合
          {
            target: 'retrying',
            guard: ({ context }) => context.retryCount < context.maxRetries,
            actions: assign({
              error: ({ event }) => event.error,
              retryCount: ({ context }) => context.retryCount + 1
            })
          },
          // 最大リトライ回数に達した場合
          {
            target: 'failure',
            actions: assign({
              error: ({ event }) => event.error
            })
          }
        ]
      }
    },
    retrying: {
      after: {
        // 2秒後に自動リトライ
        2000: 'loading'
      },
      on: {
        CANCEL: 'idle'
      }
    },
    success: {
      on: {
        REFRESH: 'loading',
        CLEAR: 'idle'
      }
    },
    failure: {
      on: {
        RETRY: 'loading',
        CLEAR: 'idle'
      }
    }
  }
}, {
  actors: {
    fetchData: async () => {
      const response = await fetch('/api/data');
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      return response.json();
    }
  }
});

ベストプラクティスと注意点

あわせて読みたい
XState VSCode - Visual Studio Marketplace Extension for Visual Studio Code - Visual editing, autocomplete and typegen for XState

VS Code拡張機能を活用することで、XStateの開発体験が大幅に向上します。自動補完、型生成、ビジュアルエディタなどの機能を利用できます。

🎯 状態設計のコツ

💡 効果的な状態設計のポイント

✅ 状態は動詞ではなく名詞で命名
- 良い例: 'loading', 'success', 'error'
- 悪い例: 'load', 'succeed', 'fail'

✅ 不正な状態を作らない
- 同時に存在してはいけない状態を避ける
- 例：'loading' と 'success' は同時に存在しない

✅ 階層状態を活用する
- 複雑な状態は親子関係で整理
- 共通の振る舞いは親状態にまとめる

✅ 状態数を適切に保つ
- 多すぎる状態は管理が困難
- 少なすぎる状態は柔軟性に欠ける
// ❌ 悪い例：不正な状態が存在する可能性
const badMachine = createMachine({
  context: {
    isLoading: false,
    data: null,
    error: null,
    isSuccess: false
  },
  // isLoading=true, isSuccess=true が同時に存在する可能性
});

// ✅ 良い例：排他的な状態設計
const goodMachine = createMachine({
  context: {
    data: null,
    error: null
  },
  initial: 'idle',
  states: {
    idle: {},
    loading: {},    // loading状態では他の状態は存在しない
    success: {},    // success状態では他の状態は存在しない
    error: {}      // error状態では他の状態は存在しない
  }
});

⚡ パフォーマンス最適化

// React.memoとの組み合わせ
import React from 'react';
import { useMachine } from '@xstate/react';

const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
  // 重い処理のコンポーネント
  return <div>{/* 複雑なレンダリング */}</div>;
});

function OptimizedParent() {
  const [state, send] = useMachine(dataMachine);

  // 必要な値のみを子コンポーネントに渡す
  return (
    <ExpensiveComponent
      data={state.context.data}
      onUpdate={(value) => send({ type: 'UPDATE', value })}
    />
  );
}

// セレクタパターンの活用
import { useSelector } from '@xstate/react';

function OptimizedSelector() {
  const [state, send] = useMachine(largeMachine);
  
  // 必要な部分のみを選択
  const count = useSelector(largeMachine, (state) => state.context.count);
  
  return <div>Count: {count}</div>;
}

⚠️ よくある間違いと解決策

🚨 よくある問題と対策

❌ 問題1：状態機械が複雑すぎる
const overComplexMachine = createMachine({
  initial: 'loading',
  states: {
    loading: {
      // 20個以上の遷移がある...
    }
  }
});

✅ 解決策：状態機械を分割する
const userMachine = createMachine({
  // ユーザー関連の状態のみ
});

const dataMachine = createMachine({
  // データ関連の状態のみ
});

❌ 問題2：副作用を状態機械の外で実行
function BadComponent() {
  const [state, send] = useMachine(machine);
  
  // 副作用が外に漏れている
  useEffect(() => {
    if (state.matches('success')) {
      localStorage.setItem('data', JSON.stringify(state.context.data));
    }
  }, [state]);
}

✅ 解決策：アクションとして定義
const goodMachine = createMachine({
  states: {
    success: {
      entry: 'saveToLocalStorage'  // 副作用をアクションとして定義
    }
  }
}, {
  actions: {
    saveToLocalStorage: ({ context }) => {
      localStorage.setItem('data', JSON.stringify(context.data));
    }
  }
});

🔧 デバッグとトラブルシューティング

// 開発時のデバッグ設定
import { createMachine } from 'xstate';
import { inspect } from '@xstate/inspect';

// 開発環境でのみ有効化
if (process.env.NODE_ENV === 'development') {
  inspect({
    // ブラウザの開発者ツールで状態を確認
    iframe: false
  });
}

const debugMachine = createMachine({
  // 状態遷移のログ出力
  entry: () => console.log('Machine started'),
  exit: () => console.log('Machine stopped'),
  
  states: {
    idle: {
      entry: () => console.log('Entered idle state'),
      exit: () => console.log('Exited idle state')
    }
  }
});

// React開発時のヒント
function DebugComponent() {
  const [state, send] = useMachine(debugMachine, {
    devTools: true  // Redux DevToolsでの確認が可能
  });

  // 現在の状態をコンソールで確認
  console.log('Current state:', state.value);
  console.log('Context:', state.context);
  console.log('Can transition:', state.nextEvents);

  return <div>{/* コンポーネント */}</div>;
}

まとめ

XStateは複雑な状態管理を視覚的かつ安全に行うための強力なツールです。従来の状態管理ライブラリとは異なるアプローチですが、一度マスターすれば開発効率と品質が大幅に向上します。

🎯 重要ポイントの復習

✅ XStateの核心価値

  • 有限状態機械による安全な状態管理
  • 視覚的な状態遷移図でチーム間コミュニケーション向上
  • 不正な状態の防止によるバグ削減

✅ 導入のメリット

  • 複雑な状態遷移の可視化と管理
  • テスタビリティの向上
  • TypeScriptとの相性が良く型安全

✅ 成功の秘訣

  • シンプルな状態機械から始める
  • 状態設計を慎重に行う
  • ビジュアルツールを積極活用

🚀 次のステップ

XStateをマスターしたら、以下の技術も習得してより高度な状態管理を実現しましょう：

  • Actorモデルによる分散状態管理
  • 状態機械のテスト手法
  • パフォーマンス最適化テクニック

XStateは学習コストは高めですが、複雑なアプリケーションの状態管理においては非常に強力なツールです。今回学んだ基礎知識を活用して、より安全で保守性の高いアプリケーション開発を実現してください！

💡 参考リンク

Column
API Reactアプリ開発 Webアプリ開発 Web開発 エンジニアリング効率化 ソフトウェアエンジニアリング
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次