状態遷移図(ステートマシン図)とは?業務の流れを把握し効率化するためのポイントを解説

状態遷移図(ステートマシン図)はある状態がどう移り変わるか(遷移)ということを図面化して一覧性を高めたものです。
ソフトウェアの設計の際に状態遷移図を作成すれば、テスト項目の漏れや抜けを防げます。

しかし、どのように状態遷移図を作成すればよいか分からないという方もいることでしょう。この記事では状態遷移図とは何か、どのような利点があるのか、どのように作成すれば有効に使えるかご紹介します。状態遷移図を作成する際にはぜひ参考にしてみてください。

状態遷移図について知ろう

ソフトウェアの開発を行うに当たって、やみくもに同じテストを繰り返してしまったり、テストの内容に抜けがあり開発が止まってしまったりなどの事態が発生してしまうことがあります。

無駄な時間や労力を少しでもカットするために設計段階で状態遷移図を作成し、活用しましょう。

状態遷移図とはなにか

状態遷移図とはなにか

状態遷移図とは状態が遷移する様子を図に書いて図形や矢印などのビジュアルで表現したものです。状態遷移図では四角で表現された「状態名」、矢印で表現された「遷移」、その矢印のそばにどういう動作を行ったのか記入する「イベント(アクション)」で構成されます。

例えば扇風機を例に取って状態遷移図の流れを使って考えてみましょう。扇風機にはコンセントにプラグが入っているものとします。

扇風機の操作の手順を次に記載します。

  1. 扇風機は、動作の開始始めはファンが回らずに停止している
  2. 扇風機が停止している時に、使用者が電源ボタンを押すとファンが回り始める。
  3. 扇風機のファンが回っている時に、使用者が風量ボタンを押すとファンの回転速度が早まり、風量が強くなる。
  4. 扇風機のファンが回っている時に、使用者が電源ボタンを押すと動作を停止して、ファンが止まる。
  5. 手順の2から繰り返す

上記のように、対象の状態、遷移、イベント(アクション)を取り出してまとめ、図を作成していきます。

文に書き出してみると仕様はとてもシンプルです。もしこの扇風機の動作に関するソフトウェアを開発する場合は文章を元に作成することもできるでしょう。

しかし、複雑な構造をもつソフトウェアを作成する場合はチェックする項目もより多くなります。抜けや漏れの発生をなくすために流れを状態遷移図で図面化してみましょう。開発するソフトウェアに何ができるか、全体が直感的、視覚的にわかりやすくなります。

状態遷移図を作るメリットは?

状態遷移図を作成することにより、以下のメリットを得られます。

  • 仕様書で遷移を個別に確認することなく、流れをわかりやすく一覧することができます。
  • 分析、設計の段階で状態遷移図を作成して発生する遷移をモデリングすると、仕様の漏れや抜けを発見することができます。
  • 状態遷移図を作成することでプロジェクトのメンバー間で作業の全体的なイメージを合わせることができます。
  • 何か不具合が発生した際に、状態遷移図を参照することで対処するポイントがすぐにわかります。
  • クライアントの要望で作業途中に仕様が変更されても状態遷移図を活かして修正する時間を減らすことができます。

もちろん、状態遷移図は万能ではないので対応ができない事態が発生したり、状態遷移図の見方がわからないメンバーに教育をする必要があったりなどがありますがその手間をかけてもメリットが上回る程、状態遷移図は開発に有効です。

状態遷移図の作り方

状態遷移図を作ってみましょう。こちらでは状態遷移図を作るための要素をご紹介します。

状態名を四角の中に書き並べていく

状態遷移図の書き方_状態名を四角の中に書き並べていく

まず四角を作成し、そこに状態名を書き入れていきましょう。
状態にふさわしい名前を状態名といいます。

例えば扇風機の電源がオフの状態で本体の電源ボタンを押すと扇風機の電源がオンになります。もう一度、本体の電源ボタンを押すと扇風機の電源がオフになります。
この時の「オン」と「オフ」が状態名です。

状態名を書き出したいがどう見つればよいかわからない時は、システムが待機している状態を探してみましょう。

扇風機で言うと電源ボタンを押されるまでは扇風機は待機していて動きません。この状態がオフです。次に電源ボタンを押してファンが回り始めるともう一度電源ボタンを押さないとファンは止まりません。この状態がオンです。

電源の他にファンの回転数の大小で「強、中、弱」という状態名があります。さらに首振りのオンオフやオフタイマーなど外部からの操作がない限りその行動をし続けるという状態があれば書き出します。

遷移を矢印で記入する

状態遷移図の書き方_遷移を矢印で記入する

次にある状態から他の状態へ移行するものを矢印でつなぎます。その矢印が遷移です。

先程の扇風機で例えると、まず電源スイッチを押して電源を入れることによる遷移を表すために、状態名「オフ」から状態名「オン」へ矢印を伸ばします。

次に電源スイッチを押して電源を切る事による遷移を表すために、状態名「オン」から状態名「オフ」へ矢印を伸ばします。

こうして2つの状態名を矢印でつなぐことにより、状態がどう変化するか流れがわかります。

ここで注意することは、矢印の向きは必ず1方向のみ記入することです。もし互いを遷移ので結ぶことがあっても必ず1方向の矢印を2本使って互いを結びましょう。後述するイベントやアクションを記入するため、矢印は1方向で書く必要があります。

イベントを矢印のそばに記入する

状態遷移図の書き方_イベントを矢印のそばに記入する

遷移の矢印の隣りにはどういうことが起きて、状態が遷移したかというきっかけとなる情報を記入します。その情報をイベントといいます。

イベントは状態にある時点で発生する出来事と考えます。さらに遷移に付いてくる動作があれば記入します。これをアクションといいます。

扇風機の例で言うと、「電源オフ」から「電源オン」へ延びる矢印の隣に「電源ボタンが押された」と記入します。イベントを記入することがによってどういう働きかけがあって、状態が遷移したかが具体的にわかります。

「電源オン」から「電源オフ」へ延びる矢印にも忘れずにイベントを記入しましょう。「電源ボタンが押された」と記入することで、扇風機の電源ボタンを押すことによって、電源がオフの状態に遷移したと一目でわかるようになります。

遷移におけるアクションがあればそれもイベントの隣に記入しましょう。扇風機の「電源オフ」から「電源オン」になる「電源ボタンが押された」の隣には「モーターを回転させ、ファンを回す」という具体的なアクションを記入します。

扇風機の「電源オン」から「電源オフ」になる「電源ボタンが押された」というイベントの隣にはアクションとして「モーターの回転を停止し、ファンを止める」という処理が入ります。

状態遷移図を書き終えたら、状態名を1つずつチェックしていきます。どこにも遷移をしていない、どこからも遷移をされていない、複数遷移されているなど、遷移の数が0や複数ついている状態名は仕様の不備になるので、確認し修正しましょう。

上記のように、状態遷移図を作成することで遷移の道筋が一覧でき視覚的にわかりやすくなります。仕様書で遷移を個別に確認するよりもより全体のイメージをつかみやすく、共有しやすくなります。

今回の例は機能がシンプルな扇風機でしたが、ソフトウェアの構造が複雑になると、状態名や遷移もその分多くなります。状態遷移図を作成する際は1人でもよいですが、複数名で確認を行うとより抜けや漏れが少なくなります。

状態遷移図を作るためのポイント

状態遷移図を作成する際に見逃せないポイントがあります。もし要素が漏れていたり、不十分な図を作成してしまったりすると後で修正するのが難しくなります。こちらでは状態遷移図を作成する際に気をつけるポイントを解説していきます。

状態遷移図を書く前に状態遷移表で確認する

状態遷移図の書き方_状態遷移図を書く前に状態遷移表で確認する

状態遷移図は見てわかりやすく確認することができますが、作成の際にある状態がアクションを受けた時のパターンがもれてしまうことがあります。
もれが無いようにパターンを始めに全て出すため作成するのが状態遷移表です。状態遷移表は縦軸にイベント、横軸に状態を入れて作ります。

想定される全ての状態とイベントを項目に当てはめ、総当たり戦的にその遷移した先を書き込んでいきます。

後で不具合が発覚してしまうと、余計な手戻りコストが発生し、開発効率が低下します。そのためには設計の初期段階で状態遷移表と状態遷移図を同時に作成し全ての項目を挙げていくことが大切です。

また、状態遷移表を作成する段階では「できること」だけでなく、「できないこと」を明らかにしておくと、余分な作業が減り、開発も効率的に行えるメリットがあります。

項目が抜けていたり、もれていたりすることがない良質な設計を目指しましょう。

作業と並行して状態遷移図も更新していく

状態遷移図は一度作成したら、それで終わりということはありません。実際の作業を行っていると、どうしても当初予測できないような事態が発生することがあります。

状態遷移図に新たに発生した状態を書き加えて、作業を行いながら状態遷移図を更新していきましょう。その際にプロジェクトのメンバーと一緒に確認・更新することで、情報共有のもれも無くなります。

また、作業と並行して状態遷移図を確認することによって、作業の方向性がずれてしまっていないか確認することができます。実際に作業が始まって自分の担当部分しかわからない時には状態遷移図はシステム全体を見ることができる地図となるのです。

まとめ

状態遷移図は図形や矢印を使って、状態が遷移する様子をわかりやすく図にしたものです。状態名を矢印で結び、イベントやアクションを記入していくことで遷移の流れが一覧できます。

状態遷移図と状態遷移表を組み合わせて作成し、設計の段階で起こりがちな抜けや漏れを防ぎましょう。状態管理表をマスターして、手戻りを防ぐことで、ムダなコストや時間の生が防止できます。

フローチャートやワイヤーフレーム、プレゼン資料まで作れる | Cacoo(カクー)


記事の監修
砂川 祐樹

Backlog開発チームで開発を担当する傍ら、プロジェクト管理について噛み砕いて解説する入門サイト、サル先生のプロジェクト管理入門サル先生のバグ管理入門の制作に携わった他、プロジェクト管理を楽しく学べるボードゲーム「プロジェクトテーマパーク」を制作。プロジェクト管理を身近なものとして広めるヌーラボの活動に関わっている。


記事の作成
Cacoo編集部

フローチャートやワイヤーフレームに関する情報を発信しています。お役に立てた情報がありましたら是非シェアをお願いします!
フローチャートやワイヤーフレーム、プレゼン資料まで作れる | Cacoo(カクー)
についてはこちら

チームのアイデアを、いつでもどこからでも視覚的に共有しよう