そろそろPlantUMLで設計しよう

## はじめに
こんにちは。NTTテクノクロスの野村（[@CorydorasNomu](https://qiita.com/CorydorasNomu)）です。この記事は「[NTTテクノクロスAdvent Calendar 2024（シリーズ2）](https://qiita.com/advent-calendar/2024/ntt-tx)」の 19日目の記事になります。

ウェブアプリケーションやシステム開発のプロジェクトでは、クライアントとの円滑なコミュニケーションが重要です。しかし、技術的な内容や複雑な仕様を正確に共有することは、簡単ではありません。そこで注目されるのが [PlantUML](https://plantuml.com/ja/) です。
今この記事を読んでいる皆さんは、「なにを今さら、そんなこと誰でも知ってるし使ってるよ」と思われるかもしれません。はい、筆者もそう思っています。しかし最近気づいたのですが、どうやらそうでもないらしい。
なので本記事では、[PlantUML](https://plantuml.com/ja/) を活用することでクライアントとのコミュニケーションがどのように効率化できるかについて解説します。本記事がプロジェクトへの [PlantUML](https://plantuml.com/ja/) 導入の契機になり、作業に携わるすべてのメンバの業務負担が少しでも軽減できれば嬉しいです。

## PlantUMLの導入と使い方
先述のとおり、[PlantUML](https://plantuml.com/ja/) は既に広く知られたツールです。
なので、[導入方法](https://qiita.com/opengl-8080/items/98c510b8ca060bdd2ea3) や実際の [使い方](https://plantuml.com/ja/guide) については既にネット上に十分な情報がありますので、細かい話はご自身で調べてみてください。
とりあえず以下の3つがあれば使い始められるはずです。
- [Java](http://jdk.java.net/)
- [graphviz](https://www.graphviz.org/download/)
- [Visual Studio Code PlantUML拡張](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)  

Visual Studio Codeでの作業は以下のとおり。
1. 作業フォルダにテキストファイルを作成し、拡張子を `.pu` に変更する
2. 上記のファイルに設計のコードを書き、`Alt + D` でプレビュー表示して内容を確認する
3. 設計がFixしたら `Ctrl + Shift + P` でコマンドパレットを開き、`export` と入力する
4. サジェスト表示される `Export Current Diagram` を選択する
![advcal_2024_plantuml_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542200/5a53ce97-2aba-cfe4-80d8-779e87064171.png)
5. 出力する設計画像の拡張子を選択すると、`.pu` ファイルの階層にフォルダが作成され、その中に設計画像が保存される

## PlantUMLを活用するメリット
### 1. 視覚的な表現で仕様を明確化できる
クライアントと仕様を確認する際、複雑な条件の分岐やループ処理を日本語だけで記述しても、書き手の文章力や読み手の読解力によって認識の相違が生じます。しかし[PlantUML](https://plantuml.com/ja/) を使えば、テキストベースで記述した仕様から下図のような視覚的なUML図を自動生成できるため、上述したような誤謬を最小限にすることができます。筆者は海外のメンバと一緒に仕事をして言葉の壁に苦労したので、このメリットはとても大きいと考えています。
![advcal_2024_plantuml_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542200/ef2f2c89-34e5-651f-5541-d7ef392a107f.png)

### 2. リアルタイムでの変更が容易である
[PlantUML](https://plantuml.com/ja/) を使用すると、テキストベースで設計を管理できます。そのため、プロジェクトの打ち合わせ中にクライアントからのフィードバックがあった場合、その場でコードを編集して即座に新しい設計図を生成・共有することで、誤解や認識の相違が原因の手戻り作業を減少させることができます。  
![advcal_2024_plantuml_02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542200/d179ae32-3906-2ce0-14b3-d0e4b9710031.gif)

### 3. 作業コストを削減できる
テキストベースで設計を管理するとで、作業コストの削減を期待できます。
- 設計図の履歴管理
Gitなどのバージョン管理ツールと連携することで、簡単に変更履歴を追跡できます。WordやExcelでもそうしたことは可能ですが、テキストベースのファイルと比べると、やはり変更差分の視認性という点で後者が優れます。[標準化されたルール](https://qiita.com/itosho/items/9565c6ad2ffc24c09364)に沿ったコミットメッセージの形式を採用すると、変更履歴のトレーサビリティは更に向上します。レビュー記録票を別途Excelで書き起こしたり、仕様を確認するためにファイルサーバで過去の記録票を探し回るといった作業は最小化して、「良いものをつくる」ことに注力しましょう。
![advcal_2024_plantuml_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542200/657bd46b-dc83-685b-d8c6-0657a47dead9.png)

- ドキュメント生成との統合
[PlantUML](https://plantuml.com/ja/) を Markdown と組み合わせてドキュメントを生成することで、その作成とメンテナンスの作業効率が向上します。Markdown に設計図の画像ファイルへの参照さえ記述しておけば、独立した `.pu` の設計ファイルを修正するだけで最新の設計をドキュメントに反映することができます。ブラウザで GitHub や GitLab のリポジトリを表示したとき、Markdown を自動でレンダリングしてくれるので「今の最新版はどのファイル？」といった確認作業が不要になり、クライアントとの設計情報の共有にかかる工数も削減できます。
![advcal_2024_plantuml_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542200/72e191f0-2933-703f-b83c-a9dbfc3e0f60.png)

## ラクして「伝わる設計」を
[PlantUML](https://plantuml.com/ja/) を使った設計により仕様を視覚化し、誰もが直感的に内容を理解できるようにすることで、コミュニケーションの効率が向上します。また、テキストベースという特性上、その管理にかかわる作業も効率化され、プロジェクトを円滑な推進に寄与します。今回紹介した [PlantUML](https://plantuml.com/ja/) のほかに、[Mermaid](https://mermaid.js.org/#/) もテキストベースのファイルで設計図を可視化するツールとして有名ですね。いずれにしろ、クライアントとのやり取りが多いプロジェクトほどこれまで述べてきたツールを活用する価値があります。まだこうしたツールを導入していないプロジェクトがありましたら、これからの設計業務での活用を前向きに検討してみてはいかがでしょうか。