Vue Academy · レッスン

VueでのXStateによるステートマシン

Q: 「VueでのXStateによるステートマシン」で何を学びますか？

XState v5でのuseMachine()、状態と遷移の定義、devtoolsでのマシンの可視化 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

XState v5でのuseMachine()、状態と遷移の定義、devtoolsでのマシンの可視化

「VueでのXStateによるステートマシン」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

ステートマシンを使う理由

isLoading、isError、isSuccessのようなBooleanフラグは、あり得ない組み合わせになってしまうことがあります。ステートマシンは有限個の状態と、それらの間で許可される遷移をモデル化するため、無効な状態を表現できないようにします。

XStateの概要

XStateは、JavaScriptで有限ステートマシンとステートチャートを扱うライブラリです。@xstate/vueパッケージは、コンポーザブルを通じてXStateをVueのリアクティビティと統合します。

// terminal
// npm install xstate @xstate/vue

マシンを定義する

createMachineで状態と遷移を記述します。各状態では、onの下に、その状態から遷移するイベントを記述します。

import { createMachine } from "xstate"

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

状態と遷移

マシンはinitialで指定した状態から開始します。現在の状態のonに記述された名前のイベントを送信すると、指定されたターゲット状態へ遷移します。記述されていないイベントは無視されるため、無効な遷移は発生しません。

フェッチマシン

ステートマシンは非同期処理のフローで特に役立ちます。フェッチには、idle、loading、success、failureという明確な状態があり、それぞれに適切な遷移を定義できます。

const fetchMachine = createMachine({
  initial: "idle",
  states: {
    idle: { on: { FETCH: "loading" } },
    loading: { on: { RESOLVE: "success", REJECT: "failure" } },
    success: {},
    failure: { on: { RETRY: "loading" } },
  },
})

VueでのuseMachine

@xstate/vueのuseMachineは、コンポーネント内でマシンを実行し、リアクティブなsnapshotとsend関数を返します。

import { useMachine } from "@xstate/vue"

const { snapshot, send } = useMachine(fetchMachine)

現在の状態を読み取る

リアクティブなsnapshotが現在の状態を保持します。snapshot.value.matches("loading")で確認でき、条件付きレンダリングに最適です。

// template
// <Spinner v-if="snapshot.matches('loading')" />
// <Error v-if="snapshot.matches('failure')" />
console.log(snapshot.value.value) // "idle"

イベントを送信する

イベントを指定してsendを呼び出すと、遷移を開始できます。現在の状態にその遷移が定義されている場合にだけ、マシンは次の状態へ移動します。

function load() {
  send({ type: "FETCH" })
}
// later, on resolve:
// send({ type: "RESOLVE" })

テンプレートでイベントを接続する

UIの操作をsendにバインドします。ステートマシンにより、ボタンは有効な方法でのみフローを進められます。

<template>
  <button @click="send({ type: 'FETCH' })">Load</button>
  <button v-if="snapshot.matches('failure')" @click="send({ type: 'RETRY' })">
    Retry
  </button>
</template>

追加データのためのコンテキスト

マシンにはコンテキストを持たせられます。これは、取得結果やエラーメッセージなどの拡張データで、遷移中のアクションによって更新されます。状態は有限のまま、コンテキストに変動するデータを保持できます。

createMachine({
  context: { data: null, error: null },
  initial: "idle",
  states: { /* assign to context in transitions */ },
})

Devtoolsで可視化する

XStateのマシンは図として可視化できます。XState devtools／Stately inspectorは実行中のマシンを描画し、現在の状態を強調表示して、遷移を再生できるようにします。複雑なフローを理解するうえで非常に役立ちます。

確認テスト

VueでのXStateについての理解度を確認します。

まとめ

XStateを使ったステートマシンについて学びました。

ステートマシンは、有限個の状態と許可された遷移を定義することで、無効な状態を不可能にします。
createMachineは、onでイベントからターゲットへの遷移を定義したstatesを宣言します。
@xstate/vueのuseMachineは、リアクティブなsnapshotとsendを返します。
snapshot.matches("...")で状態を読み取り、send({ type })で遷移を開始します。
contextは追加データを保持し、XState devtoolsはマシンを可視化します。

よくある質問

「VueでのXStateによるステートマシン」レッスンは無料ですか？

はい。「VueでのXStateによるステートマシン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「VueでのXStateによるステートマシン」で何を学びますか？

XState v5でのuseMachine()、状態と遷移の定義、devtoolsでのマシンの可視化ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「VueでのXStateによるステートマシン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る