Speaker

「送信ボタンを2回押されて二重登録」「演出の途中で操作されて画面が壊れる」こういうバグは、たいてい「いま画面がどのフェーズか」をフラグの寄せ集めで持ってるのが原因だと思っています。

フラグが N 個あれば状態は 2^N 通りになり、バグの元になりやすいです。

このLTでやるのは、フラグを増やすのをやめて、画面の状態を 「今どこにいるか」1個＋「どこへ行けるか」の道順表 にまとめること。いわゆるステートマシンです（目新しい概念ではなく、昔からある考え方です）。

これだけで連打・二重送信・非同期処理中の暴発が解決できることを、自作デモで見せます。defineStore に道順表と、状態を切り替える唯一の関数を置くだけのものです。

回答ボタンの連打や演出中のタイムアップ割り込みを実際に起こし、ステートマシンで弾く様子を見せます。

持ち帰れるのはウィザード/決済/アップロードなど 「非同期 ＋ ユーザーがボタンを押す」UI 全般に有用です。

なお、ステートマシンライブラリといえばXStateが定番（公式の@xstate/vue ）。

本トークはXStateを入れずPinia直書きで、さらに非同期処理中の意図しない動作を状態の再チェックで消せる方法になります。

（XState作者自身も「ステートマシンにライブラリは必須ではない」と述べており、本トークはその“ライブラリ無し版”の実演にあたります）。

https://dev.to/davidkpiano/you-don-t-need-a-library-for-state-machines-k7h

「ならXStateで良いのでは」への答えも用意します、今回話すのは「1フェーズ＋ガード遷移」だけなので、XStateの主役機能（階層・並行状態・アクター・SCXML・visualizer）は使いません。

状態が階層化・並行化したり、非同期をアクターで宣言的に扱いたくなったらXStateが必要になる、その線引きまで示します。