orangain flavor

じっくりコトコト煮込んだみかん2。知らないことを知りたい。

PR同士の関係を可視化するgh pr-graphコマンドを作った

GitHubには、作成したりレビュー依頼を受けたりしたPull Request(以下PR)の一覧を表示するページがあります。業務では、Slackでリアルタイムの通知を受けつつ、これらのページを行き来して対応漏れがないようにしてきました。

AIを利用した開発でPRの作成量が増え、PRのネストも一般的になる中、1次元のPR一覧ではPR同士の対応関係がわからないという課題がありました。Stacked PRは、このような状況を改善する新機能ですが、レビュー依頼の一覧に含まれるPRが、どのスタックのどの位置に相当するのかは自明ではありません。

また、作成したPRレビュー依頼を受けたPRのページが分かれていたことから、どちらかに集中しすぎてしまい、自分の開発とレビューをバランスよく進めることができていませんでした。いつからかInboxというページが利用できるようになり、1ページ内でどちらも見られるようになりました。ただ、デフォルトだとレビュー依頼の方がページ上部に表示されるため、レビューの方が目につきやすい状況は変わりません。

gh pr-graphによる可視化

そこで作ったのがgh pr-graphというコマンドです。GitHub CLIの拡張機能として開発しており、起動するとローカルでWebサーバーが起動し、ブラウザで次のような画面が表示されます。

gh pr-graphのスクリーンショット

左側にあるリポジトリ(のデフォルトブランチ)をルートとして、あるPRからそのheadブランチをbaseブランチとするPRにエッジを引くことで、PR同士の関係性を表すグラフを構築しています。角丸四角のノードがPRを表し、色ごとにそれぞれ次の意味を持ちます。

  • 緑: レビュー依頼を受けたPR
  • 青: 自分が作成したPR *1
  • 水色: 自分がアサインされたPR *2
  • 灰色: 関係性を表現するために補完されたPR

いわゆるRelease PRのように、他のPRを包含するPRについても、Included PRs内に表示され、PR同士の関係を容易に理解できます。あるPRのレビューをする際に、前後のPRから立ち位置を理解した上で、レビューに臨めます。

このようなPR同士の関係は、PRの作成者の頭の中にはあったはずです。ただ、それをレビュアーに伝えるのは少し手間で、PRのdescriptionに前後のPRの一覧を書いて説明するなどの工夫がなされてきました。このツールがあれば、そのような工夫はなくせるかもしれません。

レビュー依頼されたPRと自分が作成したPRが混ざって表示されるので、どちらか片方を忘れてしまうこともありません。

gh pr-graphの使い方

以下のコマンドでインストールできます。

gh extension install orangain/gh-pr-graph

gh auth login が完了した状態で、以下のコマンドで起動し、Webブラウザが開きます。PRのタイトルをクリックすると、PRのページが開きます。

gh pr-graph

自身に関連するPRの量によっては、初回表示は時間がかかるかもしれませんが、リロード時は少し効率よくデータを取得できます。デフォルトではタブがアクティブな場合、5分おきに自動リロードされます*3

地味に便利な機能として、自分がコメントした後に再レビュー依頼されたPRや、自分がコメントをpending状態のままにしているPRに表示される、右上のアイコンがあります。これによって、早く再レビューすべきPRや、レビュー途中で忘れてしまっているPRに気づきやすくなります。

詳しくはgh pr-graphのページを参照してください。

github.com

最後に

本来は、このようなツールが必要ないよう、PRを作成した側からレビューしてマージできるようチームで協働できるのが望ましいのかもしれません。また、AIを使った開発の進展によって、そもそもPRのレビューを完全に不要にできたり、PRという概念が不要になったりする可能性も大いにあります。

ただ、現状の働き方で多くのPRを作成したり、レビューしたりする必要がある方向けに、お役に立てば幸いです。

*1:色だけでなく、自身のアカウント名とアイコンでもわかります。

*2:色だけでなく、Assigneeの表示でもわかります。

*3:本当はPRの状態変更をリアルタイムで反映できるといいのですが、クライアントアプリケーションとして実装している限りは難しいと考えています。