対象読者
- 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は「自動販売機のステートマシンの一部分です。初期状態（idle）のステートで、INSERT_COINというイベントを発生させると、お金を投入中（inserting）というステートへのトランジションが発生します。また、イベントが発生した際に、副作用としてアクションが実行されます」という言葉で説明できます。
これらの基本概念を理解することで、XStateを使って効果的にステートマシンを構築し、アプリケーションの状態管理を行うことができます。
