JavaScriptステートマシンライブラリ

import { createMachine, createActor } from "xstate";

const trafficLightMachine = createMachine({
  id: "trafficLight",
  initial: "red",
  states: {
    red: {
      after: { 5000: "green" }, // 5秒後に緑に変わる
      on: { TIMER: "green" },
    },
    green: {
      after: { 5000: "yellow" }, // 5秒後に黄に変わる
      on: { TIMER: "yellow" },
    },
    yellow: {
      after: { 2000: "red" }, // 2秒後に赤に変わる
      on: { TIMER: "red" },
    },
  },
});

const trafficLightActor = createActor(trafficLightMachine);

trafficLightActor.subscribe((state) => {
  console.log(state.value);
});

trafficLightActor.start();