これから数回にわたって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をもとに開発を進めていきたいと思います。