SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現場で役立つ! React向けライブラリ詳説

ステートマシンを実装するためのJavaScriptライブラリ「XState」の基本的なAPIを解説

現場で役立つ! React向けライブラリ詳説 第11回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 ステートマシンの概念を活用して状態管理を行う「XState」は、複雑な状態を扱うアプリケーションにとって強い味方となります。前回は実用例について解説しましたが、今回はXStateの基本的なAPIを解説します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の経験者

前提環境

 筆者の検証環境は以下の通りです。

  • macOS Monterey 13.0.1
  • Node.js 18.14.2/npm 9.5.0
  • React 18.2.0
  • vite 4.2.0
  • XState 4.37.0
  • @xstate/react 3.2.1

XStateの基本的なAPIを学ぶ

 前回は、XStateの使い方を実用例も交えて解説しました。自動販売機のような、それなりに複雑なステートマシンでも表現できることや、ReactなどのGUIフレームワークへの繋ぎ込みが容易にできることがわかりましたね。

 さて、前回はアプリケーションを作りながら要所要所でコードの意味を解説しましたが、今回は基礎的な内容から順に解説します。基礎を固めることで、より応用的な使い方にもチャレンジできるようになるでしょう。

XStateの基本概念

 まずは、XStateの基本概念を解説します。XStateを理解するためには、次の5つの概念を押さえておくことが重要です。

  • ステートマシン
  • ステート
  • トランジション
  • イベント
  • アクション

 ステートマシンは、システムの振る舞いをモデル化するための抽象概念です。ステートマシンは、いくつかの状態(ステート)とそれらの状態間を移動するための遷移(トランジション)から構成されます。

 ステートは、システムがどんな状態になりうるかを表します。例えば、前回解説したような自動販売機のステートマシンでは、ステートは「初期状態」「お金を投入中」「商品を購入できる」などになります。

 トランジションは、ステート間の移動を表すもので、特定のイベントが発生したときに実行されます。例えば、自動販売機で「お金を投入する」イベントが発生した場合、ステートは「初期状態」から「お金を投入中」に遷移します。

 イベントは、システム内で発生するアクションや通知を表します。イベントは、トリガーとなるアクションや状況に応じて発生し、ステートマシンが新しいステートに遷移する原因となります。例えば、「お金を投入する」や「商品を購入する」などがイベントです。

 アクションは、状態遷移(トランジション)が発生したときに実行される副作用を表します。アクションは、システムが何らかのタスクを実行するために使われます。例えば、自動販売機で「商品を購入する」イベントが発生した場合、アクションは「商品を出す(投入済みの金額を商品価格の分だけ減算する)」といった具合です。

 これらの概念の関係性を簡単に図示すると、図1のようになります。

図1:XStateの基本概念
図1:XStateの基本概念

 図1は「自動販売機のステートマシンの一部分です。初期状態(idle)のステートで、INSERT_COINというイベントを発生させると、お金を投入中(inserting)というステートへのトランジションが発生します。また、イベントが発生した際に、副作用としてアクションが実行されます」という言葉で説明できます。

 これらの基本概念を理解することで、XStateを使って効果的にステートマシンを構築し、アプリケーションの状態管理を行うことができます。

次のページ
XStateのAPI

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
現場で役立つ! React向けライブラリ詳説連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17739 2023/05/25 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング