IT 技書の森

ステートマシン

有限個の状態と遷移で振る舞いを定義する計算モデルで、ワークフローや UI の状態管理に使う

設計アルゴリズム

ステートマシンとは

ステートマシン (有限状態機械, FSM) は、有限個の状態と、イベントによる状態遷移で振る舞いを定義する計算モデルである。ワークフロー、UI の状態管理、プロトコル設計に使われる。

基本要素

要素 説明
状態 (State) システムが取りうる状態
イベント (Event) 状態遷移のトリガー
遷移 (Transition) イベントによる状態の変化
初期状態 開始時の状態
最終状態 終了時の状態

注文のステートマシン

[pending] --pay--> [paid] --ship--> [shipped] --deliver--> [delivered]
    |                 |
    +--cancel-->  [cancelled]
    |
    +--expire-->  [expired]

TypeScript での実装

type OrderState = 'pending' | 'paid' | 'shipped' | 'delivered' | 'cancelled';
type OrderEvent = 'pay' | 'ship' | 'deliver' | 'cancel';

const transitions: Record<OrderState, Partial<Record<OrderEvent, OrderState>>> = {
  pending: { pay: 'paid', cancel: 'cancelled' },
  paid: { ship: 'shipped', cancel: 'cancelled' },
  shipped: { deliver: 'delivered' },
  delivered: {},
  cancelled: {},
};

function transition(state: OrderState, event: OrderEvent): OrderState {
  const next = transitions[state]?.[event];
  if (!next) throw new Error(`Invalid: ${state} + ${event}`);
  return next;
}

ステートマシンのメリット

定義されていない遷移はエラーになるため不正な状態遷移を防止できる。状態遷移図で全体を可視化でき、状態 × イベントの組み合わせで網羅的にテストしやすい。状態遷移表がそのまま仕様書として機能する。

XState (フロントエンド)

import { createMachine } from 'xstate';

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

React の複雑な UI 状態管理に XState を使うと、状態遷移が明示的になる。

現場での応用を知るには関連書籍も役立つ。

関連用語