XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2

Transcript

1. © DressCode Inc . XStateを用いた堅牢な React Components設計 ~複雑なClient Stateをシンプルに~ React Tokyo Meetup #2 Dress Code株式会社 古庄 和也
2. • React歴 ◦ 約3年 • 業務 ◦ BtoB SaaS「DRESS CODE」のプロダクト開発 • 経歴 ◦ 2020年 レバレジーズ新卒入社 ◦ 2024年 - Dress Code株式会社 • 趣味 ◦ React / ゴルフ / 競馬 / ポーカー 自己紹介 ふるしょう(@k_furusho_)
3. © DressCode Inc . 1. XStateとは 2. 複雑なReactComponentsの事例 3. 状態遷移の流れ 4. UIと状態の連携 5. まとめ Agenda
4. © DressCode Inc . XStateとは
5. XStateとは • TypeScript/Vanilla JSで使えるState Machine/Chartライブラリ ◦ 有限状態とイベントを用いて状態遷移を厳密に管理 ◦ Backendでも活用可能 ◦ @xstate/reactでは、専用のフックuseMachineを使用 • 推しポイント ◦ DMMF本で提唱されている「Make Illegal States Unrepresetable」の実現容易性 が高く、「有り得る状態の型定義」に加えて状態遷移が明確に定義可能。ガード条 件で不正な状態遷移を防げる • XStateに関するおすすめ資料 ◦ Xstate Stately ◦ Xstate Catalogue ◦ susiyakiさんのJS/TSで堅牢な状態管理を可能にするXStateの解説
6. 実装例：SimpleCounterMachine • 状態の定義 ◦ active状態のみ ◦ INCREMENTとDECREMENTの2つ イベントで状態を管理 • ガード条件 ◦ DECREMENTイベントにはガード条 件を設定し、valueが0よりも大きい 場合のみ減算を許可 ◦ valueが負の値になる状態を防ぐ
7. © DressCode Inc . 複雑な React Componentsの事例
8. 「企業における汎用的なルール策定に必要なフィルタリングの実現」 • 条件設定 ◦ 検索対象(Subject), 演算子(Operator), 値(Object)から構成 ◦ 条件の組み合わせはAND/OR条件で個別に指定可能 ◦ 条件毎のグルーピング可能 • 状態のUIへの反映 ◦ ユーザーの入力に応じて、動的にフィルタリング結果を更新 ◦ フィルタリング条件の変更が即時反映されるインタラクションの実現 • 不正な状態の防止 ◦ ex: 検索対象の選択前に演算子を選択, 同一リソースに対する複数操作の同時実行 複雑な機能要件例
9. © DressCode Inc .
10. © DressCode Inc . 状態遷移の流れ
11. © DressCode Inc . Xstateとは
12. © DressCode Inc . Xstateとは MainStates
13. © DressCode Inc . Xstateとは MainStates SubStates
14. © DressCode Inc . UIとClient Stateの連携
15. 具体的なディレクトリ構成例と依存関係
16. UIと状態の連携フロー Server State Client State
17. © DressCode Inc . まとめ
18. • 堅牢なClient Stateの管理が実現できる ◦ 状態遷移が明確に定義され、予期しない状態遷移を防止 • 開発効率の改善 ◦ 状態遷移ロジックをコンポーネントから分離できるため、 テストしやすく際利用 可能なロジックの構築が可能 ◦ StateMachine × LLM テスト生成の相性が良い ◦ 仕様の認識齟齬防止にも繋がる ▪ 可視化したStateMachineをベースにPdMや関係者と仕様を擦り合わせやすい • 拡張性と保守性 ◦ 状態遷移が一元化できるため、追加要求が生じた場合にも品質保証しやすい ◦ ドメインモデリングとの相性も良いため、featruesベースの開発にも相性が良い まとめ
19. © DressCode Inc . End