😸

ClaudeCodeで作るシーケンス図、クラス図でレビュー効率化(バックエンドもレイアウトの修正も)

に公開

HERP Careersのエンジニアをしています。松山です。今回は普段の業務でLLMを使ったレビュー効率化の知見共有です。

先に言っておくと全然高度なことはしてないです。レビューするときに全体像の把握ができてたらレビュー捗ったのになーっていう体験からあれこれやってたらここに行き着いたので知見共有です。

今作っているPRをレビュー出す前にClaudeCodeに次のようにお願いしてください。

今のブランチと(main or master)との差分をgit diffで取得して、変更内容をmarmeidのシーケンス図とクラス図にしてマークダウンファイルとして保存してください。

優れている点まとめ

  • AIは無理やり答えを出してくれるので、フロントのレイアウト変更のようなところでも威力を発揮します。(バックエンドじゃないから、クラスがないからシーケンス図、クラス図が作れないなんてことはありません)
  • ものによってはレビューが一瞬で終わります。
  • 同期的にコミュニケーション取ろうとすると相手のスケジュールみないと作業がとまるってこともないです。

事例共有

これを実行してできたシーケンス図をいくつか共有します。クラス図はぼかしていると雰囲気もわからないので省略します。

例1. LLMを使ったHRのPoC機能

こちらがシーケンス図です。

最終的に5つのAPIとやり取りをする実装で、どのタイミングでどのAPIを呼び出す。どういう状態遷移があるのかを把握しておく必要があります。これは全体像がないとレビューはきつかったと思います。下記にAPI呼び出しの箇所のマークをつけておいたので頭の中でイメージしてみてください。

クラス図はぽかしをいれるとみてもわからないので省略です。

例1. レイアウト修正のPRのレビュー

問題提起から入るのですが、フロントのViewの部分のレビューって結構辛くないですか?
事前にすり合わせてたらわかるけれど、すり合わせてなかった場合に。変更差分が緑と赤がチカチカするし、ファイルのリネームとかも結構読み込まないと気づかなかったりしませんか?

ぼかしてますけどみなさんみたことあると思います。

シーケンス図があるとどのコンポーネントがどこから呼び出しているかがわかったらレビューは劇的に速くなります。(ぼかしているからよくわかりませんねw)

まとめ

ドキュメント自動化のために色々実験していて、その中でやっぱりクラス図とシーケンス図が一番しっくりきました。他の図はたまにflowchart図もお願いしたりします。みなさんも快適レビュー生活を。

Discussion