Stateパターン - TypeScriptでのステートマシン

ステートマシンを実装するStateパターンを学びましょう。注文処理、UIワークフロー、ゲームロジック、接続管理のTypeScript実装例。

Behavioral

詳細な説明

Stateパターン

Stateパターンは、オブジェクトの内部状態が変化したときにその振る舞いを変更できるようにします。オブジェクトはクラスが変わったように見えます。有限状態機械のオブジェクト指向実装です。

問題: 条件分岐の爆発

Stateなしでは、複数の状態を持つオブジェクトは巨大なswitch文を蓄積します。新しい状態を追加するたびにすべてのメソッドを変更する必要があります。

Stateパターンの解決策

各状態が独自のクラスになります。コンテキストは現在の状態オブジェクトに委譲し、状態オブジェクトは別の状態に遷移できます。各状態は遷移先の状態を知っており、遷移ルールを関連する場所の近くにカプセル化します。

State vs Strategy

どちらも合成を使用します。重要な違い: Stateの遷移は内部条件に基づいて自動的に発生します。Strategyはクライアントによって明示的に設定されます。信号機は自動で状態を変更しますが、圧縮アルゴリズムはユーザーが選択します。

現代の代替手段

XStateなどのライブラリは、ビジュアライザー、ガード、副作用を備えたJavaScript/TypeScriptでステートマシンを宣言的に定義する方法を提供します。複雑なステートマシンには、手書きのStateパターンよりも専用ライブラリの方が保守しやすい場合があります。

ユースケース

Stateは、注文処理ワークフロー(保留中、支払済み、出荷済み、配達済み)、TCP接続状態(リスン、確立、クローズ)、ゲームキャラクターの振る舞い(待機、歩行、攻撃)、UIウィザードステップ、明確に定義された状態と遷移を持つあらゆるシステムに最適です。

試してみる — Design Pattern Reference

フルツールを開く