機能リストを元にウェブアプリの画面遷移を考えてみましょう。

今回はUMLの一種であるステートマシン図を使います。
ステート（状態）を画面に置き換えて、それぞれの画面で何をしたら次の画面に遷移するのかを考えていきます。

PlantUML

今回はPlantUMLというツールを使って図を作成していきます。
http://plantuml.com/ja/

テキストでルールを書いていく事でキレイな図を出力してくれます。
細かい図の調整などをしなくて良いので、実際の開発の現場でも人気があります。

この教材ではPlantUMLの書式などの解説は省きますが、興味があれば是非調べてみてください。

基本となる図を作る

まずは大まかに考えられる画面を並べてみます。図1-3-1

図1-3-1 ステートマシン図基本

参考までに、PlantUMLのコードは以下です。

Copied!
@startuml

[*] --> トップページ
トップページ -> 会員登録
トップページ -left-> ログイン
トップページ --> カート
カート -> お届け先入力
お届け先入力 -> お届け先入力内容確認
お届け先入力内容確認 -> 購入完了

@enduml

イベントを追加する

次に、画面遷移するきっかけとなるイベントを追加していきます。図1-3-2

図1-3-2 ステートマシン図イベント追加

Copied!
@startuml

[*] --> トップページ
トップページ -> 会員登録:会員登録をクリック
トップページ -left-> ログイン:ログインをクリック
トップページ --> カート:カートをクリック
カート -> お届け先入力:注文をクリック
お届け先入力 -> お届け先入力内容確認:入力内容確認をクリック
お届け先入力内容確認 -> 購入完了:注文確定をクリック

@enduml

さらにイベントを追加する

図を見ながら足りない画面や遷移が無いかを考えます。

• 「トップページ」には全てのページから戻れるようにしたい
• 全てのページから「商品検索」したい
• 「カート」にはログインしていたら全てのページから戻れるようにしたい
• カートに入れた商品の「数量変更」や「削除」をしたい
• 「お届け先入力内容確認」から「修正」をクリックしたら「お届け先入力」に戻りたい
• ログアウトしたら「トップページ」が表示されるようにしたい

これらを図に反映すると図1-3-3のようになります。

図1-3-3 ステートマシン図イベント追加2

Copied!
@startuml

[*] --> トップページ
トップページ --> トップページ:ログアウトをクリック
トップページ -> トップページ:商品検索する
トップページ -> 会員登録:会員登録をクリック
会員登録 -> トップページ:トップページをクリック
会員登録 -> トップページ:商品検索する
トップページ -left-> ログイン:ログインをクリック
ログイン -> トップページ:トップページをクリック
ログイン -> トップページ:商品検索する
トップページ --> カート:カートをクリック
カート -> トップページ:トップページをクリック
カート -> お届け先入力:数量を変更/商品を削除
カート -> お届け先入力:注文をクリック
カート --> トップページ:ログアウトをクリック
カート -> トップページ:商品検索する
お届け先入力 -> トップページ:トップページをクリック
お届け先入力 -> カート:カートをクリック
お届け先入力 -> お届け先入力内容確認:入力内容確認をクリック
お届け先入力 --> トップページ:ログアウトをクリック
お届け先入力 -> トップページ:商品検索する
お届け先入力内容確認 -> トップページ:トップページをクリック
お届け先入力内容確認 -> カート:カートをクリック
お届け先入力内容確認 -> お届け先入力:修正をクリック
お届け先入力内容確認 -> 購入完了:注文確定をクリック
お届け先入力内容確認 --> トップページ:ログアウトをクリック
お届け先入力内容確認 -> トップページ:商品検索する
購入完了 -> トップページ:トップページをクリック
購入完了 -> カート:カートをクリック
購入完了 --> トップページ:ログアウトをクリック
購入完了 -> トップページ:商品検索する

@enduml

図を整理する

だいぶ図がごちゃごちゃしてきたので画面をグルーピングして整理します。図1-3-4

図1-3-4 ステートマシン図整理

Copied!
@startuml

[*] -> トップページ
会員登録 --> トップページ:トップページをクリック/商品検索
ログイン --> トップページ:トップページをクリック/商品検索
トップページ -> トップページ:ログアウトをクリック
トップページ -> トップページ:商品検索
トップページ -left-> 会員登録:会員登録をクリック
トップページ -left-> ログイン:ログインをクリック
トップページ --> カート内:カートをクリック
カート内 -up-> トップページ:トップページをクリック/商品検索
カート内 -up-> トップページ:ログアウトをクリック

state カート内 {
  [*] --> カート
  カート -> 注文:注文をクリック
  カート -> カート:数量を変更/商品を削除
  注文 --> カート:カートをクリック
  state 注文 {
    [*] --> お届け先入力
    お届け先入力 -> お届け先入力内容確認:入力内容確認をクリック
    お届け先入力内容確認 -> お届け先入力:修正をクリック
    お届け先入力内容確認 -> 購入完了:注文確定をクリック
  }
}

@enduml

状態遷移表を作る

作成した図を元に、状態遷移表を作ります。
縦軸に画面、横軸にイベントを書きます。

表1-3-1 状態遷移表 画面とイベント

左側の画面とイベントの組み合わせで、次に遷移する画面を空いているマスに埋めていきます。
埋めた結果が表1-3-2になります。
赤字にしている部分がステートマシン図では漏れていた

表1-3-2 状態遷移表 遷移を埋める

表1-3-2で赤字になっている部分がステートマシン図では漏れていた箇所です。
漏れていた部分をステートマシン図に反映しましょう。図1-3-5

図1-3-5 ステートマシン図修正

Copied!
@startuml

[*] -> トップページ
会員登録 --> トップページ:トップページをクリック/商品検索
ログイン --> トップページ:トップページをクリック/商品検索
トップページ -> トップページ:ログアウトをクリック
トップページ -> トップページ:商品検索
トップページ -left-> 会員登録:会員登録をクリック
会員登録 -> 会員登録:会員登録をクリック
ログイン -> 会員登録:会員登録をクリック
トップページ -left-> ログイン:ログインをクリック
会員登録 -> ログイン:ログインをクリック
ログイン -> ログイン:ログインをクリック
トップページ --> カート内:カートをクリック
カート内 -up-> トップページ:トップページをクリック/商品検索
カート内 -up-> トップページ:ログアウトをクリック

state カート内 {
  [*] --> カート
  カート -> 注文:注文をクリック
  カート -> カート:数量を変更/商品を削除/カートをクリック
  注文 --> カート:カートをクリック
  state 注文 {
    [*] --> お届け先入力
    お届け先入力 -> お届け先入力内容確認:入力内容確認をクリック
    お届け先入力内容確認 -> お届け先入力:修正をクリック
    お届け先入力内容確認 -> 購入完了:注文確定をクリック
  }
}

@enduml

このように画面とイベントの組み合わせを全て確認する事で、設計の段階で漏れている部分を洗い出します。

作ったアプリのテストをする際にも、この状態遷移表をもとに実装漏れが無いかチェックすることが出来ます。

これで画面遷移が洗い出せました。
次にデータベース設計をしていきます。