ステート マシン UI: 決定論的でバグのないインターフェイスの構築
React で、ビジュアル ステート マシンが不可能な UI 状態を排除し、複雑なインタラクティブ コンポーネントを簡素化し、決定論的でバグのないインターフェイスを作成する方法を学びます。
核心
UI ステート マシンは、インターフェイス コンポーネントが占めることができるすべての有効な状態、およびユーザー イベントまたはシステム条件によってトリガーされるそれらの状態間の明示的な遷移を記述する数学的モデルです。ステート マシンは、「不可能な状態」を不可能にすることで、UI バグのカテゴリ全体を排除します。ステート マシンがその組み合わせを禁止している場合、読み込みスピナーと成功チェックマークの両方を同時に表示することはできません。
ステートマシンが解決する問題
ほとんどの UI バグは、論理的に不可能な状態に入る可能性のあるコンポーネントに起因します。典型的な例: 明示的な状態モデルを持たないフォーム送信ボタンは、2 つの別個のブール フラグによって同時に「読み込み中」状態と「無効」状態になる可能性があります。ステートマシンは、コンポーネントがいつでも正確に 1 つの明確に定義された状態にあることを要求することで、これを防ぎます。
- 「ブールフラグ地獄」 — isLoading、isDisabled、isError、isSuccess がすべて競合しています
- 高速ユーザーが複数の状態を同時にトリガーする競合状態
- アニメーションが間違った中間位置から始まるトランジションのバグ
- コードレビューでn×nのフラグの組み合わせを追跡することによる開発者の認知負荷
コア ステート マシンの概念
ステート マシンは、有限の状態セット、遷移をトリガーできるイベントの語彙、および遷移が許可されるかどうかを決定するガード条件で構成されます。
州
各状態はコンポーネントの特定の状態を表します。データ取得コンポーネントの例: アイドル、ロード、成功、エラー、リフレッシュ。
イベント/遷移
イベントは状態の変化をトリガーします。 「SUBMIT」はフォームをアイドル状態から読み込み状態に遷移します。 「SUCCESS」はロードから成功に移行します。 「ERROR」はロードからエラーに遷移します。
衛兵
遷移が起動するために真でなければならない条件。 「SUBMIT」イベントは、フォーム検証ガードが通過した場合にのみ、アイドル→読み込みへの遷移をトリガーできます。
コンテキスト/拡張状態
現在の状態名とともにマシンが保持する補助データ (ユーザー入力値、エラー メッセージ、ロードされたデータ)。
ExodeUI のステート マシン
ExodeUI は、視覚的なノードグラフ ステート マシン エディターを提供します。状態を円として描画し、イベントを表すラベル付きの矢印でそれらを接続し、スプリング アニメーションと視覚的なプロパティの変更を各状態に付加します。マシンは .exode ファイルに保存されます。React では、ExodeUICanvas でロードして入力を通じて駆動し、Swift では ExodeUIController を通じて駆動します。
実装コード例
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function AuthFlow() {
return (
<ExodeUICanvas
src="/auth_flow.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}