Tagbangers Blog

XState

XStateは有限状態機械(= 有限オートマトン)を実装するライブラリです。

まず、どういうものなのか:

import { createMachine, interpret } from 'xstate'

const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: { on: { TOGGLE: 'active' } },
    active: { on: { TOGGLE: 'inactive' } },
  },
})

const toggleService = interpret(toggleMachine)
  .onTransition(state => console.log(state.value))
  .start()

toggleService.send('TOGGLE')
toggleService.send('TOGGLE')


実行すると、以下のようにコンソールに出力されます。

inactive
active
inactive


有限オートマトンは「ある時点で、ある1つの状態になるシステム」の動作を表すことができます。チェックボックスを例に考えてみましょう。最初は「OFF」の状態だとすると、クリックすることで「ON」の状態になります。

「ON」でも「OFF」でもない、または「ON」でも「OFF」でもある状態というのはありえません。さらにクリックすると「現在はON」であることから次は「OFF」になるという変化をたどります。

つまり、以下の要素を持ちます。

  • 有限個の状態を持つ(ON/OFF)
  • 有限個のトリガーを持つ (toggle)
  • 初期状態を持つ(OFF)
  • 現在の状態とトリガーを受け取り、次の状態を決定する
  • 結果を出力する

先の例を見ると

inactive -> TOGGLE -> active -> TOGGLE -> inactive ...

inactiveな状態のときにTOGGLEイベントが起こるとactiveな状態になる。activeな状態のときにTOGGLEイベントが起こるとinactiveになる、という遷移を定義しているのが見えてきました。

このような状態の遷移は状態遷移図で表現できますが、XStateでは

createMachine

の定義を視覚化ツールが用意されています。


https://xstate.js.org/viz/?gist=1792b79ec54228fd53cb23aaf9763901

UIをデザインする過程では、Componentの振る舞いと、それによってどの様にStateが変化するのか、あるいはどの様なタイミングでどの様なStateになるかを考えます。

その際に役立つのが実装視点寄りのEvent Stormingだと思いますが、個人的にこれまではOmni Graffleなどのツールで図を書きながら考えてからReduxで表現するというフローでしたが、これを使うとTrigger、Domain Event, Workflowを宣言的に記述しながら、プロトタイピングできるのではないかと思いました。