statelyai/xstate

これは何？

主な機能

• 01階層状態・並列状態・履歴状態を持つ状態機械とステートチャートを定義できます。
• 02状態スナップショットを購読者に公開するアクターとしてロジックを実行できます。
• 03ランタイム依存関係がありません。
• 04Stately Studioでビジュアルに設計し、エクスポートできます。
• 05React、Vue、Svelte、Solid向けのバインディングを利用できます。
• 06イベントベースの状態管理に使える、軽量な別パッケージ@xstate/storeを提供します。

ユースケース

• フォーム、ウィザード、チェックアウトなど、複数ステップからなるUIフローの管理。
• 長時間実行されるバックエンドのワークフローやバックグラウンドジョブのオーケストレーション。
• 複雑なコンポーネントの状態遷移を明示し、テスト可能にする。
• ReduxやZustandの代わりに、小規模なイベント駆動型ストアを使う。

クイックスタート

1. 1

   npmでxstateパッケージをインストールします

   npm install xstate

収録されている特集

トピック

よくある質問

xstate とは？

複雑なアプリやワークフローのロジックを管理する、状態機械・ステートチャート・アクター向けの依存関係ゼロのJavaScript/TypeScriptライブラリ。 XStateは、フロントエンドとバックエンドの両方で使えるJavaScriptおよびTypeScript向けの状態管理・オーケストレーションライブラリです。アプリケーションのロジックを状態機械、ステートチャート、アクターとしてモデル化し、遷移や副作用、許可されるイベントを条件分岐の中に散在させず、明示的に宣言できます。

xstate は無料で使えますか？ライセンスは？

xstate は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

xstate は今もメンテナンスされていますか？

活発にメンテナンス中。xstate の最終コミットは 2026年11月6日 です。

xstate は何に使えますか？

フォーム、ウィザード、チェックアウトなど、複数ステップからなるUIフローの管理。 長時間実行されるバックエンドのワークフローやバックグラウンドジョブのオーケストレーション。 複雑なコンポーネントの状態遷移を明示し、テスト可能にする。 ReduxやZustandの代わりに、小規模なイベント駆動型ストアを使う。

xstate のインストール方法は？

npmでxstateパッケージをインストールします: npm install xstate

xstate はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/statelyai/xstate