これから数回にわたってWEBアプリケーション開発の様子を紹介したいと思います。開発プラットフォームはAWSを使います。

第1回 PlantUMLを使った設計書作成

今回のアプリケーション開発では、設計書の作成にExcelやWordなどを利用しません。Visual Studio Code(以下VSCode)を使ってUMLを作成します。まずはUMLを作成する様子について動画で紹介します。

VSCodeで書いたUMLが以下となります。

①ユースケース図

@startuml
left to right direction
actor : User: as us <<Human>>
actor : DataBase: as db

rectangle 血統表表示 {
    (馬を選択) as (select)
    (血統表を閲覧) as (ped)

    us -- (select)
    us -- (ped)
    (select) -- db:全馬取得
    (ped) -- db:五代血統取得
}
@enduml


②状態遷移図

[*] -> top画面

state top画面 {
    state "select_horse" as select_a : link
    select_a -right-> 選択画面 : click
}

state 選択画面 {
    state 馬選択 : selectbox
    馬選択 --> 馬選択 : select
    state 血統を見る : button
    血統を見る -down-> 血統表表示画面 : click
}
state 血統表表示画面 {
    state 五代血統表 : table
    state top : link
    top --> top画面 : click
    state "select_horse" as select_b : link
    select_b -up-> 選択画面
}



③シーケンス図

@startuml
actor User
participant 選択画面 as select order 1
participant 血統表表示画面 as pedigree order 2
database DataBase as db order 3
User -> select:topから遷移
select -> db:全馬取得
select <-- db:データ
User -> select:馬を選択
select -> pedigree:選択した馬のID
pedigree -> db:五代血統取得
pedigree <-- db:データ
User -> pedigree:血統表を閲覧
@enduml

④クラス図

@startuml
class MySQL{
    +dns
    +dbh
    +_open()
    +_close()
    +query_select_one()
    +query_select_all()
    +query_insert()
}
class pedigree{
    +db
    +stmt
    +pedigree_list
    +search_pedigree()
}
MySQL -right-o pedigree
@enduml

⑤アクティビティ図

@startuml
start
:変数:馬にNoneを格納する;
if (引数id Noneではない) then (yes)
    :idをもとにdbから馬情報を取得し変数:馬に格納する;
    :self変数:馬リストに馬情報を加える;
else (no)
    :self変数:馬リストにNoneを加える;
endif
if (引数:countが0) then (yes)
    stop
endif
:変数:父馬を初期化する;
:変数:母馬を初期化する;
if (変数:馬の父idがNoneではない) then (yes)
    :変数:馬の父idをもとにdbから馬情報を取得し変数:父馬に格納する;
endif
if (変数:馬の母idがNoneではない) then (yes)
    :変数:馬の母idをもとにdbから馬情報を取得し変数:母馬に格納する;
endif
if (変数:父馬がNoneではない) then (yes)
    :自身を呼び出す (変数:父馬のid,引数:count-1);
else (no)
    :自身を呼び出す (None,引数:count-1);
endif
if (変数:母馬がNoneではない) then (yes)
    :自身を呼び出す (変数:母馬のid,引数:count-1);
else (no)
    :自身を呼び出す (None,引数:count-1);
endif
detach
@enduml

次回は作成したUMLをもとに開発を進めていきたいと思います。