VS Code と GitHub を連携させて楽々コードレビュー

概要

みなさん Visual Studio Code (VS Code) は使ってますか？僕は使ってます。日々新しい機能が追加されていって、どんどん便利になっていくので僕は好きです。
実は VS Code から GitHub を操作することができます。
この記事では VS Code と GitHub を連携させると、コードレビューにかかる手間を減らすことができるよという話をします。

GitHub の設定

VS Code から GitHub を使うためには、

• GitHub 拡張を VS Code にインストール
• GitHub アカウントで VS Code にログイン

をする必要があります。
手順は VS Code公式ドキュメント に記載されているので、詳細手順はこちらを参考にしてみてください。

で、実際何が便利なのか？

みなさんコードレビューはしてますか？職業として組織でプログラマをしていると、コードレビューをする・してもらうことは多いんじゃないかと思います。
ある程度の規模のチームで開発している人であれば、コードレビューをするのは日課になっていて、毎朝最初の仕事はコードレビュー、ということもあるのではないのでしょうか。

僕はモバイルのアプリ開発（React Native）をメインの業務としているのですが、僕がGitHubを使ってレビューする時のワークフローはこんな感じです。

1. （GitHub上）Pull Request の Description を読んで概要を把握
2. （VS Code上）レビューする PR のブランチをチェックアウト
3. （GitHub上）Diff を見る
4. （VS Code上）気になるところはコードを書き換えたり、実機で動かしたりしながら検証
5. （GitHub上）レビューコメントを記載
6. すべての Diff をレビューし終わるまで step 3-5を繰り返す
7. Approve👍 or Change Request❌

見てわかる通り、GitHubとVS Codeを行ったり来たりしています。ウィンドウ切り替え操作の１回は数秒で終わる操作だとしても、何十回と繰り返したらまぁまぁな時間になりそうです。
コードレビューは毎日行う作業であるなら、尚更楽チンにこなしたいですよね。

VS Code と GitHub を連携させるとワークフローはこんな感じに変わります。

1. （VS Code上）レビューする PR のブランチをチェックアウト
2. （VS Code上）Pull Request の　Description　を読んで概要を把握
3. （VS Code上）Diff を見る
4. （VS Code上）気になるところはコードを書き換えたり、実機で動かしたりしながら検証
5. （VS Code上）レビューコメントを記載
6. すべての Diff をレビューし終わるまで step 3-5を繰り返す
7. Approve👍 or Change Request❌

見ての通り、最初から最後まですべての工程をVS Code上で行うことができます。
ウィンドウ切り替えが不要な分だけ手早くレビューを終えることができました。

結論

最初に紹介した　VS Code公式ドキュメント　にはVS Code のスクリーンキャプチャが載っているので、操作感のイメージを付けるにはそちらも見てみてください。

現代のソフトウェア開発では一般的になったコードレビューですが、VS Code　を使うと余計なステップに気を取られず、コードを読んで理解するという本質に集中することができます。
ぜひ一度試してみてください！