TypeScript Academy · レッスン

XState：型付きステートマシン

Q: 「XState：型付きステートマシン」で何を学びますか？

XStateでTypeScriptを使ってステートマシンをモデル化します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

XStateでTypeScriptを使ってステートマシンをモデル化します。

レッスン 3/413 ステップ

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

XStateをTypeScriptと使う理由

XStateはアプリケーションの状態を明示的なステートマシンとしてモデル化します。TypeScriptを使うと、状態、イベント、コンテキストが完全に型付けされ、コンパイル時に不正な状態遷移を防げます。

import { createMachine, assign } from "xstate";

マシンの型を定義する

XState v5では、コンテキスト、イベント、状態に型パラメーターを使用します。マシンを作成する前に、それらを定義します。

type TrafficContext = { count: number };
type TrafficEvent =
  | { type: "TURN_GREEN" }
  | { type: "TURN_YELLOW" }
  | { type: "TURN_RED" };

型付きマシンの作成

コンテキストとイベントの型をcreateMachineに渡し、状態と遷移を完全に型チェックできるようにします。

const trafficMachine = createMachine({
  types: {} as { context: TrafficContext; events: TrafficEvent },
  id: "traffic",
  initial: "red",
  context: { count: 0 },
  states: {
    red:    { on: { TURN_GREEN: "green" } },
    green:  { on: { TURN_YELLOW: "yellow" } },
    yellow: { on: { TURN_RED: "red" } },
  },
});

assignで型付きコンテキストを扱う

assignを使ってコンテキストを更新します。TypeScriptによって、返される部分的なコンテキストが定義済みの型と一致することが保証されます。

const machine = createMachine({
  types: {} as { context: TrafficContext; events: TrafficEvent },
  // ...
  entry: assign({ count: 0 }),
  on: {
    TURN_GREEN: {
      actions: assign(({ context }) => ({ count: context.count + 1 })),
    },
  },
});

Reactでマシンを使う

@xstate/reactのuseMachineフックは、型付きの状態とsend関数を返します。

import { useMachine } from "@xstate/react";

function TrafficLight() {
  const [state, send] = useMachine(trafficMachine);
  // state.value: "red" | "green" | "yellow"
  // send: (event: TrafficEvent) => void
  return <button onClick={() => send({ type: "TURN_GREEN" })}>Go</button>;
}

型付きガード

型ガード関数は型付きのコンテキストとイベントを受け取り、条件が正しい型に対してチェックされるようにします。

const machine = createMachine({
  types: {} as { context: TrafficContext; events: TrafficEvent },
  states: {
    red: {
      on: {
        TURN_GREEN: {
          guard: ({ context }) => context.count < 10, // context: TrafficContext
          target: "green",
        },
      },
    },
  },
});

型付きアクション

名前付きアクションは、マシン設定で宣言し、setupを通じて実装することで型付けできます。

import { setup } from "xstate";
const machine = setup({
  types: {} as { context: TrafficContext; events: TrafficEvent },
  actions: {
    logTransition: ({ context, event }) => {
      console.log(context.count, event.type);
    },
  },
}).createMachine({ /* ... */ });

並列状態

XStateは並列（直交）リージョンをサポートしています。TypeScriptは、並列状態の状態値をオブジェクトとして追跡します。

states: {
  ui: {
    type: "parallel",
    states: {
      modal: { initial: "closed", states: { closed: {}, open: {} } },
      tooltip: { initial: "hidden", states: { hidden: {}, visible: {} } },
    },
  },
}

状態の照合

state.matches()を使って現在の状態を確認します。XStateは既知の状態名に対してこの処理を型付けします。

const [state] = useMachine(trafficMachine);
if (state.matches("green")) {
  // TypeScript knows we're in the green state
}

XState Inspector

開発中にステートマシンを視覚的にデバッグするには、XState Inspectorを接続します。本番コードの型安全性は失われません。

import { inspect } from "@xstate/inspect";
inspect({ iframe: false }); // opens state machine inspector

まとめ：XStateの型付け

XStateの型付きマシンでは、コンテキストとイベントの型を定義し、assignで型付きのコンテキスト更新を行います。また、useMachineを通じてReactと統合し、状態とイベントのディスパッチを完全に型付けします。

確認問題

XState v5のマシン設定にあるtypesプロパティは何を行いますか。

対話的なレッスンで答える

学習内容

TypeScriptとXStateを組み合わせると、完全に型付けされたステートマシンを利用できます。コンテキストとイベントの型を定義し、assignで型付きの更新を行い、ガード条件とアクションを型付けします。useMachineフックは、Reactコンポーネントで型付きの状態とディスパッチを提供します。

無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 101
レッスン: 352

無料で学習を始めるコース全体を表示

よくある質問

「XState：型付きステートマシン」レッスンは無料ですか？

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

「XState：型付きステートマシン」で何を学びますか？

XStateでTypeScriptを使ってステートマシンをモデル化します。ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「XState：型付きステートマシン」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← TypeScript Academyに戻る