はじめに
こんにちは。
今回は、自身がレビュワーに設定されているPRを一覧で確認することができるChrome拡張機能を開発したので、その内容についてお話ししたいと思います。
また、この拡張機能はGitHubでのPRレビューを効率化したいという思いがあり、業務では拡張機能の開発をしていますが、個人では開発したことがなかったので良い機会だと思い、成果物を Chrome Web Store に公開するところまで行いました。
エンジニアは日常業務において毎日のようにコードレビューを行なっていると思いますが、
以下のような課題があり、どうにか解決できないかと考えていました。
- レビューの見逃しでレビューが遅れてしまう
- レビュー待ちのPRを確認するのが手間（複数リポジトリを横断している場合など）
- 承認状況や作成からの経過時間を視覚的に確認したい
そこで、Chrome拡張機能として、自分がレビュアーに設定されているPRを簡単に一覧表示し、バッジで件数を常時可視化できるようにしました。
それによって、レビューの見逃しが少なくなり、効率的にレビューを行うことができるのではないかと考えました。
技術スタック
- React
- TypeScript
- Vite
- Chrome Storage API（個人アクセストークンの保存）
- GitHub REST API（PR 情報の取得）
主な機能
個人アクセストークン設定
拡張機能の設定画面から、個人アクセストークンを設定することができるようにしました。
個人アクセストークンは、GitHubの設定画面から作成することができます。
リポジトリの情報にアクセスするため、repoスコープのチェックが入っている必要があります。
レビュー依頼されているPRの一覧表示
レビュー待ちのPRを一覧で表示する機能です。
GitHub REST APIを利用して、レビューが依頼されているPRをモーダルに一覧で表示して直接リンクでアクセスできるようにしました。
一覧表示しているPR情報には以下のような詳細情報を含めています。
- PRのタイトル
- リポジトリ名
- PR作成者
- PR作成日時・更新日時
- コメント数
- 変更量（追加行数、削除行数、変更ファイル数）
- 各レビュワーのレビュー状態
- PR作成からの経過時間
具体的には、PRの情報を取得するために、以下のようなGitHub REST APIのエンドポイントを使用しています。
- ユーザー自身にレビュー依頼されているPRを取得
https://api.github.com/search/issues?q=review-requested:@me+is:open+is:pr&sort=updated&order=desc&per_page=100
- PRの詳細情報を取得（追加行数、削除行数、変更ファイル数）など
https://api.github.com/repos/${owner}/${repo}/pulls/${pullNumber}
- PRのレビュワー情報を取得
https://api.github.com/repos/${owner}/${repo}/pulls/${pullNumber}/reviews
GitHub REST APIには、1時間あたりのリクエスト数のレート制限があり、未認証の状態で実行すると1時間に60回しかAPIを実行できません。
この拡張機能では、個人アクセストークンの設定を必須とし、1時間あたりのリクエスト数の制限は、5,000リクエストとなるようにしました。
GitHub REST APIのレート制限
- 未認証：1時間あたり60リクエスト
- 認証済み：1時間あたり5,000リクエストの制限内でAPIを利用可能
フィルタリング機能
PR数が多くなった場合に、必要なPRをすぐに見つけるためにフィルタリング機能を実装しました。
とくに経過時間に関してはPRが作成されてから時間が経ってしまっているPRが視覚的に分かりやすくなり、見逃しているPRを早めに発見できるようになりました。
- リポジトリ単位のフィルタリング: 特定のプロジェクトのPRだけを表示
- 経過時間によるフィルタリング: 1日、3日、7日以上経過したPRを表示
- コメント有無によるフィルタリング: コメントがあるPR、またはコメントがないPRだけを表示
- 変更ファイル数によるフィルタリング: 変更量が少ないPRを表示
- 承認状態によるフィルタリング: 承認済みや未承認のPRを区別して表示
ソート機能
PRを以下の基準でソートすることができます。
変更量でのソートは、短時間でレビュー可能な小さな変更を先にチェックしたいときに使用できると思い追加しました。
- 更新日（新しい順/古い順）
- 作成日（新しい順/古い順）
- コメント数（多い順/少ない順）
- 変更量（多い順/少ない順）
拡張機能のアイコンにPR件数をバッジで表示
拡張機能のアイコンに、レビュー待ちのPRの件数をバッジで表示します。
この機能があることによって、何件のPRがあるのかを常に確認できるため、レビューを忘れてしまうことが少なくなると思い実装しました。
また、PRの件数が0件の場合はバッジは表示されません。
バッジの実装詳細
バッジの実装は、chrome.action.setBadgeText APIを使用して、拡張機能のアイコンにバッジを表示することができます。
const pullRequestsCount = pullRequests.length;
const badgeText = pullRequestsCount > 0 ? pullRequestsCount.toString() : '';
chrome.action.setBadgeText({ text: badgeText });
chrome.action.setBadgeBackgroundColor({ color: '#4285F4' });
chrome.action.setBadgeTextColor({ color: '#FFFFFF' });
バッジ更新タイミング
- 拡張機能のアイコンをクリックしたとき
chrome.runtime.sendMessageAPIを使用
拡張機能のアイコンをクリックしたときに、chrome.runtime.sendMessage APIを使用して、バックグラウンドスクリプトにメッセージを送信し、PRの件数を更新しています。
if (chrome.runtime?.id) chrome.runtime.sendMessage({ action: 'popupOpened' })
chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
if (message.action === 'popupOpened') {
updateBadge();
sendResponse({ success: true });
}
return true;
});
- 5分ごとに自動更新
chrome.alarmsAPIを使用
アラームを作成し、5分ごとにPRの件数を更新するようにしています。
chrome.alarms.onAlarm.addListener((alarm) => {
if (alarm.name === 'updateBadge') updateBadge();
});
chrome.alarms.create('updateBadge', {
periodInMinutes: 5
});
- Chromeがアイドル状態、またはロック状態から復帰したとき
chrome.idleAPIを使用
状態がactiveに変化したときに、PRの件数を更新するようにしています。
chrome.idle.onStateChanged.addListener((state) => {
if (state === 'active') updateBadge();
});
- active: ユーザーがブラウザを操作中の状態
- idle: 一定時間ユーザー操作がない状態(デフォルトは60秒)
- locked: ユーザーがブラウザを操作していない状態で、ロック画面が表示されている状態
導入手順
- 拡張機能をブラウザにインストール
- 設定画面から個人アクセストークンを設定（PRの情報にアクセスする必要があるため、アクセストークン作成時にepoスコープにチェックを入れる必要があります。）
- 拡張機能のアイコンをクリックして起動
まとめ
まだこの拡張機能を開発してから1週間ほどしか使用していませんが、レビュー待ちのPRを確認する手間が減り、レビューの見逃しが少なくなったと感じています。
また、業務以外での拡張機能開発は初めてでしたが、idleやalarmsなどさまざまなAPIがあることや、Chrome Web Storeへの公開までの流れを学ぶことができました。
今後もフィードバックをもとに機能追加や改善を行っていく予定です。
Views: 0
