状態遷移図（State Diagram）

🚦

状態遷移図とは

状態遷移図（じょうたいせんいず）とは、システムが取りうる「状態」を丸（ノード）で、状態が切り替わる「遷移」を矢印（エッジ）で表した図です。矢印にはその遷移を引き起こすきっかけ（イベントや条件）がラベルとして書かれます。「いま何ができて、何が起きると次に何になるか」を一目で表せます。

身近な例が信号機です。「青」「黄」「赤」という3つの状態があり、一定時間が経つ（タイマー）というイベントで「青→黄→赤→青…」と移り変わります。他にも自動ドア（人を検知すると開く）や改札（硬貨を入れると通れる）など、身の回りの多くの機器がこの考え方で動いています。

上のツールでプリセットを選び▶ボタンを押すと、イベントが順に発生して現在の状態（赤い丸）が移っていきます。発火した遷移は青い矢印で強調されるので、「どの条件でどう動いたか」を追いかけられます。

✏️

表記法のルール

状態遷移図を読み書きするうえで覚えておくべき記法は次の通りです。シンプルですが、正しく読めると問題が一気に解きやすくなります。
・状態は丸（円）で描き、中に状態名を書く
・遷移は矢印で、向きが「移る方向」を表す
・矢印のラベルは「遷移のきっかけ（イベント・条件）」。必要なら「条件 ／ 動作」の形で動作も書く
・開始状態には、どこにもつながっていない矢印が外から刺さる
・自分自身に戻る矢印（自己ループ）は「そのイベントでは状態が変わらない」ことを表す

とくに注意したいのが自己ループです。例えば自動ドアが「開」のときにさらに人を検知しても、状態は「開」のまま変わりません。これを表すのが自分自身に戻る矢印です。上のツールで「自動ドア」を選び、「人を検知」を続けて発生させると、状態が変わらない様子（自己ループ）が確認できます。

図を読むときは、「今いる状態の丸から出ている矢印だけを見る」のがコツです。出ていく矢印のラベルが、その状態でできる操作（受け付けるイベント）の一覧になっています。

🛠️

用途(プログラム設計等)

状態遷移図は「状態によって動きが変わるシステム」の設計に欠かせない道具です。仕様を図にしておくと、抜け漏れや矛盾を早い段階で見つけられます。

代表的な使いどころは次の通りです。
・組込み機器・制御プログラム：信号機、自動販売機、エレベーターなどの動作仕様
・UI（画面）の遷移設計：ログイン前／後、入力中／確認中／完了といった画面の切り替え
・通信プロトコル：接続要求→接続中→確立→切断 のような通信状態の管理
・ゲーム・キャラクターの行動：待機／移動／攻撃／やられた の状態管理（ステートマシン）

プログラムで実装するときは、現在の状態を変数で持ち、「状態」と「受け取ったイベント」の組み合わせで次にどうするかを決める形（ステートマシン）にすると、複雑な if 文の山にならず、図と1対1で対応した分かりやすいコードになります。状態遷移図を先に描いておくと、その実装やテストケースの洗い出しがとても楽になります。

なお、状態遷移図の情報を表の形に整理したものが状態遷移表です。図は全体像を直感的に掴むのに向き、表は「どの状態でも全イベントに対する動きが定義されているか」を漏れなく確認するのに向いています。両者は同じ情報を別の見せ方で表したものです。