第4話 状態遷移図とは
みなさん、こんにちは。鎌倉です。皆さんは音楽プレイヤーを使っていますか？ ウォークマンやiPodといった製品が有名ですが、最近はスマートフォンにワイヤレスイヤホンを接続して音楽プレイヤー代わりにしている方も多いかもしれません。
音楽プレイヤーには
- 停止中に再生ボタンを押すと、音楽が再生される
- 再生中に停止ボタンを押すと、音楽が停止する
といったように、ボタンを押したときの挙動が定義されています。こうした挙動をメーカーが出荷前にテストしているので、期待通りに動いてくれるわけですね。再生ボタンと停止ボタンの動作が逆になっていたり、再生ボタンを2回続けて押したら輪唱のように重なって再生されたりしたらイヤですよね。
このような場面で良く用いられるのが「状態遷移テスト」とよばれる技法です。今回から複数回に分けて状態遷移テストのお話をしたいと思います。第4話のテーマは「状態遷移図」です。
状態遷移図とは
状態遷移図は状態遷移テストで利用する最も基本的なツールで、Webサイトやアプリでボタン押下や時間経過などのイベント（事象）が発生したとき、どの状態からどの状態へ変化するのかを分析する目的で作成します。
状態遷移図の特徴
状態遷移図は「状態」と「イベント」で構成されます。状態は丸や長方形の中に状態名を記入し、イベントは矢印の横にテキストを付けて表現します。
上の例は自動車用信号機の状態遷移図です。「青」「黄」「赤」と書かれた丸が状態で、「時間の経過」と書かれた3つの矢印がイベントにあたります。
状態遷移図の利点
状態遷移図の最大の強みは、どの状態からどの状態へ遷移できるかを「視覚的に把握できる」点です。これにより、次のようなメリットが得られます。
- イベントと状態遷移の対応関係の妥当性を検証できる
- どこからも遷移できない状態や、どこへも遷移できない状態を発見可能
- テストケース作成時の仕様解釈の誤りや考慮もれの発生リスクを低減
- 新しい担当者がシステム概要を素早く把握するための資料に使える
状態遷移図の欠点
状態遷移図にも苦手なことがあります。仕様書で規定していない想定外の操作や無意味な操作については、図の中に表現されないので把握できません。例としては、次のようなものがあります。
- 音楽プレイヤーの停止中に停止ボタンを押す
- 自販機の投入金額が0円の状態で返却ボタンを押す
状態遷移図を作成してみよう
例題
あるメーカーの扇風機は次のような仕様になっています。
- 電源ボタンと切替ボタンが付いている
- 「待機」「送風（弱）」「送風（強）」の3つの状態がある
- 「待機」状態で電源ボタンを押すと「送風（弱）」状態になる
- 「送風（弱）」状態で切替ボタンを押すと「送風（強）」状態になる
- 「送風（強）」状態で切替ボタンを押すと「送風（弱）」状態になる
- 「送風（弱）」状態で電源ボタンを押すと「待機」状態になる
- 「送風（強）」状態で電源ボタンを押すと「待機」状態になる
この扇風機の状態遷移図を作成してください。
※この課題では、電源プラグの抜けや停電は考えないものとします。
各状態を表す図形を配置する
まずは状態を表す図形を配置しましょう。状態は「待機」「送風（弱）」「送風（強）」の3つなので、丸を3つ配置します。長方形の方が使い慣れている方は長方形でもOKです。矢印と文字が書きこめるように、ある程度の間隔をあけてくださいね。
状態間を矢印で結ぶ
続けて状態遷移の矢印を追加します。まずは「待機」状態からの遷移ですが、「待機」から「送風（弱）」へ向かって矢印を引き、「電源ボタン押下」と書きましょう。
次は「送風（弱）」状態からの遷移です。「送風（弱）」から「待機」と「送風（強）」に向かって矢印を引きましょう。「送風（弱）」⇒「待機」の矢印には「電源ボタン押下」、「送風（弱）」⇒「送風（強）」の矢印には「切替ボタン押下」と書きます。
最後は「送風（強）」状態からの遷移です。「送風（強）」から「待機」と「送風（弱）」に向かって矢印を引きましょう。「送風（強）」⇒「待機」の矢印には「電源ボタン押下」、「送風（強）」⇒「送風（弱）」の矢印には「切替ボタン押下」と書きます。これで状態遷移図が完成しました。
【コラム】グラディウスの隠しコマンド
35年ほど前、家庭用ゲーム機向けの「グラディウス」というシューティングゲームが人気を博していました。このゲームには、ポーズを掛けてからコントローラーの十字キーとA、Bボタンを使って「↑ ↑ ↓ ↓ ← → ← → B A」と入力すると、装備が強化される有名な隠しコマンドが存在します。この隠しコマンドは少しずつ形を変えながら、後続の作品にも引き継がれていきました。もしかすると、ゲームの開発チームでも隠しコマンド入力の状態遷移をテストしていたかもしれませんね。
実践演習
あるキッチンタイマーは次のような仕様になっています。
- 「待機」「カウントダウン」「一時停止」「終了」の4つの状態がある
- 「待機状態」のとき画面には3分00秒が表示されている
- 「待機」状態でSボタンを押すと「カウントダウン」状態になり、残り時間が1秒ずつカウントダウンする
- 「カウントダウン」状態でSボタンを押すと、「一時停止」状態になり、カウントダウンが止まる
- 「一時停止」状態でSボタンを押すと「カウントダウン」状態になり、カウントダウンが再開する
- 「カウントダウン」状態で残り時間が0秒になると「終了」状態になり、アラーム音が鳴る
- 「終了状態」でRボタンを押すとアラーム音が止まり、「待機」状態に戻る
このキッチンタイマーの状態遷移図を作成してください。
正解と解説
まずは状態の丸を配置しましょう。状態は「待機」「カウントダウン」「一時停止」「終了」の4つですね。どのように配置しても構いませんが、今回は英文字の「T」のような配置にしてみます。
次に状態遷移の矢印を追加しましょう。最初に「待機」状態からの遷移です。「待機」から「カウントダウン」へ向かって矢印を引き、「Sボタン押下」と書きましょう。
続いて「カウントダウン」状態からの遷移です。「終了」状態と「一時停止」状態に矢印を引きましょう。「終了」状態への矢印に「残り時間が0秒になる」、「一時停止」状態への矢印には「Sボタン押下」と書きます。
同様に「一時停止」状態からの遷移も追加します。「カウントダウン」状態に矢印を引きましょう。「カウントダウン」状態への矢印には「Sボタン押下」と書けばOKです。
最後は「終了」状態からの遷移です。「待機」状態に矢印を引きましょう。「終了」状態への矢印に「Rボタン押下」を書き加えれば完成です。
まとめ
今回は「状態遷移テスト」に用いるツールの「状態遷移図」についてご説明しました。押さえておくべきポイントは
- どの状態からどの状態へ遷移できるかを視覚的に把握できる
- 仕様書で規定していない想定外の操作や無意味な操作は、
図に表現されないので把握できない
といった点です。次回は「状態遷移図」の兄弟分にあたる「状態遷移表」をご紹介する予定です。どうぞお楽しみに！
