はじめに
開発する中で、5000行を超えるPRのレビューをすることが多くあり、その中で以下にかなりストレスを感じました。
- チェックマークにチェックをつけたが、チェックがつくまで数十秒かかる
- 差分を見るために、Load Diffボタンを押したが、表示されるまで数十秒かかる
そこで、JavascriptのスクリプトコードをGoogle Developer Console上で書くと、このストレスを解消できそうだったので、共有＆備忘録のために記事を書きました🗒️
この記事を読んだ後にできること
- スクリプトを実行して、PR内の全てのチェックマークにチェックを入れることができるようになる
- スクリプトを実行して、PR内の全てのLoad Diffボタンをクリックし、全ての差分を一画面で見ることができるようになる
💻 前提としている環境
OS: MacOS Sonoma
ブラウザ: Google Chrome Version 126.0.6478.127 (Official Build) (arm64)
✅ 解決策
1. GitHubの該当のPRのFiles Changedセクションを開く
2. Google Developer Consoleを開く
Macの場合、Cmd + Option + Iで表示できます。
3. 右端に表示されたウィンドウの一番下のGoogle Consoleセクション > consoleに以下のコマンドを順に入力
-
allow pastingと入力して、実行
Google Consoleでコピペを許可するようにするための設定のためです。(初回以外不要)
これを忘れると、こちらに記載のエラーなどが出てきます。
- 必要に応じて以下のスクリプトを書く
※注意: git上のチェックボックスおよび、LoadDiffボタンが実装されているクラス名をハードコーディングしているため、クラス名が変更されたら、スクリプトが効かなくなる可能性があります。念の為、実行前に、クラス名が正しいかどうか、必ずチェックするようにしてください。(方法は一番下のセクションを参照)
- 全てのチェックマークにチェックを入れるスクリプト
// js-reviewed-checkboxはチェックボックスが実装されているクラス名
// チェックがついていないチェックボックスをクリックして、チェックをつける
document.querySelectorAll('.js-reviewed-checkbox').forEach(checkbox => {
if (!checkbox.checked) {
checkbox.click();
}
});
- 全てのLoadDiffボタンを押すスクリプト(こちらを参照しました)
// load-diff-buttonはLoadDiffボタンが実装されているクラス名
// 画面内全てのLoadDiffボタンをクリックして、差分を表示する
document.querySelectorAll('.load-diff-button').forEach(node => node.click())
📝 チェックマーク、LoadDiffが実装されているクラス名をチェックする方法
- 画面右端のGoogle Developer Consoleウィンドウの一番上に表示されている左端のボタンをクリック
- 画面内のチェックボックスをタップして、該当のソースコードをConsole上に表示
// 以下のようなソースコードがハイライトされる
// js-reviewed-toggleと表示されていれば、今回のスクリプトをそのまま使用できる
<label class="js-reviewed-toggle ml-2 mr-1 px-2 py-1 rounded-2 f6 text-normal d-flex flex-items-center border color-fg-muted color-border-muted" style="cursor:pointer;">
...
</label>
おわりに
いかがでしたでしょうか。これを機に、少しずつアウトプットを増やしていこうと思っておりますので、皆様の温かい目で見守ってくだされば幸いです！「ここ違うよ！」など、ご意見もございましたら、是非是非お待ちしております！