ステートマシンを実装するためのJavaScriptライブラリ「XState」の基本的なAPIを解説

現場で役立つ！ React向けライブラリ詳説 第11回

　ステートマシンの概念を活用して状態管理を行う「XState」は、複雑な状態を扱うアプリケーションにとって強い味方となります。前回は実用例について解説しましたが、今回はXStateの基本的なAPIを解説します。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactを用いたJavaScriptアプリケーション開発の経験者

前提環境

　筆者の検証環境は以下の通りです。

• macOS Monterey 13.0.1
• Node.js 18.14.2／npm 9.5.0
• React 18.2.0
• vite 4.2.0
• XState 4.37.0
• @xstate/react 3.2.1

XStateの基本的なAPIを学ぶ

　前回は、XStateの使い方を実用例も交えて解説しました。自動販売機のような、それなりに複雑なステートマシンでも表現できることや、ReactなどのGUIフレームワークへの繋ぎ込みが容易にできることがわかりましたね。

　さて、前回はアプリケーションを作りながら要所要所でコードの意味を解説しましたが、今回は基礎的な内容から順に解説します。基礎を固めることで、より応用的な使い方にもチャレンジできるようになるでしょう。

XStateの基本概念

　まずは、XStateの基本概念を解説します。XStateを理解するためには、次の5つの概念を押さえておくことが重要です。

• ステートマシン
• ステート
• トランジション
• イベント
• アクション

　ステートマシンは、システムの振る舞いをモデル化するための抽象概念です。ステートマシンは、いくつかの状態（ステート）とそれらの状態間を移動するための遷移（トランジション）から構成されます。

　ステートは、システムがどんな状態になりうるかを表します。例えば、前回解説したような自動販売機のステートマシンでは、ステートは「初期状態」「お金を投入中」「商品を購入できる」などになります。

　トランジションは、ステート間の移動を表すもので、特定のイベントが発生したときに実行されます。例えば、自動販売機で「お金を投入する」イベントが発生した場合、ステートは「初期状態」から「お金を投入中」に遷移します。

　イベントは、システム内で発生するアクションや通知を表します。イベントは、トリガーとなるアクションや状況に応じて発生し、ステートマシンが新しいステートに遷移する原因となります。例えば、「お金を投入する」や「商品を購入する」などがイベントです。

　アクションは、状態遷移（トランジション）が発生したときに実行される副作用を表します。アクションは、システムが何らかのタスクを実行するために使われます。例えば、自動販売機で「商品を購入する」イベントが発生した場合、アクションは「商品を出す（投入済みの金額を商品価格の分だけ減算する）」といった具合です。

　これらの概念の関係性を簡単に図示すると、図1のようになります。

図1：XStateの基本概念

　図1は「自動販売機のステートマシンの一部分です。初期状態（idle）のステートで、INSERT_COINというイベントを発生させると、お金を投入中（inserting）というステートへのトランジションが発生します。また、イベントが発生した際に、副作用としてアクションが実行されます」という言葉で説明できます。

　これらの基本概念を理解することで、XStateを使って効果的にステートマシンを構築し、アプリケーションの状態管理を行うことができます。