皆さんこんにちは！底辺プログラマーのヤスです！
今回は現場でもよく使われるシーケンス図を
PlantUMLで描く方法を記事にしたいと思います。
処理の流れをシーケンス図に表せるようになると
コードがキレイに書けるようになります。
導入から基本的な使い方までを説明していきます。
Contents
PlantUML公式ドキュメント
下記のリンクをクリックすればPlantUML公式ドキュメントがあります。
ありますが、非常に広告が多くて鬱陶しい感じなのでお気をつけください。
環境構築
PlantUMLでシーケンス図を描くためにはJavaとVSCodeが必要です。
筆者の環境はWindows10 64bitです。
もしかしたらOSが違うと環境構築方法が違うかもしれませんので、
ここではWindowsの方を対象にしたいと思います。
まぁJavaとVSCodeなんでmacとかでも使えるとは思いますが念の為。。。
Javaのインストール
下記のリンクからJavaをインストールしてください。
無料です。
こんなページが表示されるので『無料Javaのダウンロード』をクリックしてインストールしましょう。
Visual Studio Codeのインストール
下記のリンクからVisual Studio Codeをインストールしてください。
無料です。
こんな画面が表示されるので『今すぐダウンロード』をクリックしてインストールを行ってください。
Visual Studio Codeの拡張機能でPlantUMLをインストール
Visual Studio Codeのインストールが終わったら起動してください。
左側のメニューに『拡張機能』があるので選択してください。
Marketplaceで拡張機能を検索すると表示されているテキストボックスに
【PlantUML】と入力してください。
PlantUMLが表示されたら『インストール』を選択しましょう。
これでPlantUMLでシーケンス図を書く準備は完了です。
基本的な図の書き方
.puのファイルを作成します。
そのファイルを開き、下記のコードを記載します。
|
1 2 3 4 5 6 7 8 9 |
@startuml participant A participant B participant C A -> B B -> C B <-- C A <-- B @enduml |
右クリックで『カーソル位置のダイアグラムをプレビュー』を選択するか、
『Alt+D』でプレビュー画面が表示されます。
こんな感じの図があっという間に描けます。
記載するコードもかなり簡単で直感的じゃないですか？
条件分岐を表現する
次は条件分岐の描き方を説明します。
プログラムで言うとif文にですね。
条件分岐を表したい時は【alt】で記載します。
試しに下記のコードを打ち込んでみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@startuml Login Actor User participant "スマホアプリ" as App database "ユーザー情報" as DB User -> App : ログイン要求(userid, password) App -> DB : ユーザー情報検索 App <-- DB : 検索結果返却 alt userid, password不一致 User <-- App : ログインに失敗しました！ else userid, password一致 User <-- App : ログインに成功しました！ end @enduml |
こんな感じに表示されます。
スマホアプリのログイン機能の流れを表した図になります。
今どきサーバーを介さないでDBにアクセスする手法は使われませんが、
まぁこんな感じで表現できます。
altで記載された部分も直感的でわかりやすいですね！
単純にログインに失敗したら「ログインに失敗しました。」
ログインに成功したら「ログインに成功しました。」
というメッセージを出すだけのロジックです。
ループ処理を表現する
次はループ処理の描き方を説明します。
プログラムで言うところの【for】文【while】文などに相当しますね。
ループ処理を表現したい場合は【loop】で記載します。
試しに下記のコードを入力してみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@startuml Login Actor User participant "ガチャ" as App loop SRが引けるまでループ User -> App : 100円でガチャを1回まわす！ User <-- App alt 資金がない User -> User : 諦めて終了 destroy User end end @enduml |
こんな感じに表示されます。
SRが出るまでひたすらガチャを回し続けるユーザーを表現しました。
最後の【資金がない】の条件分岐を入れておかなくては無限ループになってしまいますね。
リファレンスを使う
次はリファレンスについて説明します。
リファレンスというのは既に作成されている
別のシーケンス図と同じ処理であることを表現しています。
下記のコードを打ち込んでみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@startuml stopcharge Actor User1 Actor User2 participant "ガチャ" as App ref over User2,App ガチャを引き続ける end ref User1 -> User2 : 結果を確認 User1 <-- User2 alt SRが引けなかった User1 -> User2 : 課金をやめろと諭す User1 <-- User2 end @enduml |
こんな感じで表示されます。
前回の章でガチャを回し続けるユーザーについて記載しましたが、
今回はそれを【ref】で表現することにしました。
【ref】内に『ガチャを引き続ける』と記載しましたが、
本来はファイル名か@startumlの横に記載されたタイトルを使うのが良いでしょう。
User1がUser2にこれ以上課金はするなよと諭す場面を図で表現しました。
説明するまでもなく直感的にわかるかと思います！
ノートを使う
ノートとは図だけでは表現しきれない部分を補足するための機能です。
記載すると付箋のような物が表示されます。
下記のコードを入力してみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@startuml stopcharge Actor User1 Actor User2 participant "ガチャ" as App ref over User2,App ガチャを引き続ける end ref User1 -> User2 : 結果を確認 User1 <-- User2 alt SRが引けなかった note right User1 User2が課金を止めないのは わかっているが。。。 end note User1 -> User2 : 課金をやめろと諭す User1 <-- User2 end @enduml |
こんな感じで表示されます。
先程User1がUser2を諭す際に思っていた事をノートで記載しました。
これでUser1はそれほど強くUser2を諭しているわけではないことがわかると思います。
PlantUMLで描ける図の種類
今回はシーケンス図の基本的な書き方のみを紹介していますが、
他にも様々な図が描けるので一覧を挙げておきます。
- シーケンス図
- ユースケース図
- クラス図
- アクティビティ図
- コンポーネント図
- 状態遷移図（ステートマシン図）
- オブジェクト図
- 配置図
- タイミング図
他にも
- ワイヤーフレーム
- アーキテクチャ図
- 仕様及び記述言語 (SDL)
- Ditaa
- ガントチャート
- マインドマップ
- WBS 図 (作業分解図)
- AsciiMath や JLaTeXMath による、数学的記法
シーケンス図を描く利点
シーケンス図を描く利点は以下の通りです。
- 処理の流れを把握しやすい
わざわざコードを１から全て読まなくても、シーケンス図があれば流れが理解できます。
プロジェクトが大きくなればなるほどコードを読むのが大変です。
しかし、シーケンス図があれば処理の流れを直感的に理解できると思います。
- 誰かに説明する手間が省ける
他の作業を行っている際に、自身が書いたコードの説明を求められることは多いです。
そんな時はまずシーケンス図を見てどんなコードを描いたのかを思い出す役にも立ちますし、最悪シーケンス図を読め！って丸投げすることもできます（笑）
これはクライアントに対しても有効な手段です。
PlantUMLで描く利点
正直シーケンス図を描くようなツールは山程あります。
有名所ではastah* UMLでしょうか。
簡単な機能を使うだけなら無料で使えるはずです。
筆者も昔使っていました。
有料版ならEnterprise Architectもよく現場で使われています。
フローティングライセンスなのでインストールは何台にでもできます。
同時に使用する人数に制限がかかるという特殊なライセンス形態です。
これらのツールは非常に優秀で、複雑な図を描くこともできます。
しかし、いざ作成した図に対して修正を入れるのが非常に面倒なんですよね。
その点PlantUMLはコードベースで記載されているので、
修正が簡単ですし、一部の図を別の図に移動するという作業も
コードをコピペすれば済みます。
要は
簡単に描けて、簡単に修正ができ、流用も簡単！
ということです。
まとめ
今回はPlantUMLで基本的なシーケンス図を描くところまで記事にしました。
PlantUMLを使う利点についてもお話しました。
シーケンス図はきれいなコードを描くために必要な事が多いので
書けるようになることをオススメします。
保守の観点からもこのような資料はあったほうがイイですしね！
今回の記事は以上となります。最後まで読んでいただきありがとうございます。
