ストレッチ専門店 Dr.stretch を運営する 株式会社nobitel でシステム開発に取り組んでいる 奥山 と申します。
私は 2023 年の 5 月に入社し、開発チームメンバーとして主に現場向けシステムのリプレースやリファクタに関わってきています。
入社後から既存ロジックのキャッチアップを進めていましたが、同時に Pull Request のレビューもする必要があり、人一倍キャッチアップ速度を速くする必要がありました。
その際にレビューの手数を減らせる VSCode 向けの拡張機能を見つけ便利だと思ったので、今回はそれについてのお話をさせていただきます。
導入前のレビューの様子
拡張機能自体の話の前に、これを導入していなかった時はどのようにレビューをしていたかを振り返ってみます。
主に GitHub 側でやることと、 VSCode 上でやることがありました。
| 操作先 | やること | |
|---|---|---|
| 1. | GitHub | Pull Request の概要、 マージ先ブランチとのコード差分に目を通す |
| 2. | VSCode | 該当リポジトリを checkout する |
| 3. | VSCode | コード差分が発生しているコードを VSCode 上で開き、 前後含めて問題ないか確認する |
| 4. | VSCode | 必要に応じて動作確認を行う |
| 5. | GitHub | 確認済みのファイルには Viewed にチェックを入れる |
| 6. | GitHub | 指摘があればレビュー内容を Comment する |
| 7. | GitHub | Pull Request をApproveする |
( 3. ~ 6. はレビュワーによって順序が変わると思います )
大まかに GitHub で内容にサッと目を通し、 VSCode 上で詳しく確認、その後 Pull Request に対するアクションを GitHub 上で行う流れになっています。
特に 3. ~ 6. で挙げたものはファイルごとに行ったりもするため、その分 GitHub ↔️ VSCode の行き来が発生しがちでした。
GitHub Pull Request and Issues とは
VSCode 向けの拡張機能で何かいいものがないかと MARKET PLACE で探していたところ、 GitHub Pull Request and Issues を見つけました。
これは、上記で挙げた GitHub 側でやること を VSCode 上で実現するための機能 が備わっています。
2023 年 10 月時点で 14M Downloaded であるため、かなりメジャーなものであることがわかります。
インストールは MARKET PLACE から検索して探し Install するだけです。
ちなみにキャプチャを見て分かる通り、 GitHub Pull Request and Issues は GitHub から提供されています。
元々 GitHub という名前で別に拡張機能が提供されていましたが、 GitHub Pull Request and Issues に移行する上でこれが deprecated になったようでした。
VSCode 上でできるようになったこと
Pull Request の概要、 マージ先ブランチとのコード差分に目を通す
Pull Request が紐づいている branch を checkout すると、このメニューが出てくるようになっています。
選択すると、マージ先と差分が生じているファイルがツリーで表示されます。
ここで表示されるものは GitHub 上でいう File changed と同じものになります。
ファイルを選択することで diff 表示も行えます。
また、ファイルツリーの root をクリックすると、エディタ上に Pull Request の概要が表示されます。
見慣れた UI なので VSCode 上で見ても混乱はありませんでした。
確認済みのファイルには Viewed にチェックを入れる
ファイルツリーにはチェックボックスがついており、これにチェックを入れるだけで File changed の指定ファイルが Viewed に変化します。
フォルダにもチェックボックスがついているので、フォルダ配下のファイルをまとめて Viewed に変えられることもできます。
指摘があればレビュー内容を Comment する
GitHub では差分の行番号付近をドラッグすることで、その範囲内について実装者・レビュワーがコメントをつけることができます。
この拡張機能でも同じようなことができます。
Comment, Suggestion, Review それぞれに対応できています。
Pull Request の概要ページに戻るとコメントが追加されます。
レビューの場合は Submit Review を押すことで反映されます。
Pull Request をApproveする
Pull Request の概要ページ下部に Approve 等のボタンがあるので、そこで処理できます。
その他便利だと思った機能
実装者は branch を push していれば、 Pull Request の内容をこの拡張機能を使って作成することができます。
branch 一覧で対象の branch を右クリックすると Create Pull Request メニューがあるので、それを選択すれば画面が切り替わります。
Issue Template を運用していればそれが初期状態で出てくれるので、この点気が利いてていいと感じました。
惜しい部分
Suggestion を書く時に一時的に編集モードからプレビューモードに変えて確認することがあったのですが、この拡張機能では編集/プレビューモードの切り替えがありません。
Pull Request の概要ページにも切り替えがないため、 Markdown でテーブルを書いた時などに表示崩れに気付けない場合がありそうです。
使用する際の注意点
VSCode を起動した時点でネット環境に繋がっていなかった場合は以降再接続を試みていない様子で、 Comment を入れていざ反映しようとしても GitHub 側に反映されず、水の泡になってしまうということが 1 度ありました。
この場合は VSCode 自体を再起動することで解決しました。
レアケースではあるので、これはさほど大きな問題ではないと思います。
終わりに
VSCode には便利な拡張機能がたくさん提供されており、「なんでもっと早くこれを試していなかったんだ！」と思うようなものもあります。
この拡張機能についてはまだ使い始めて間もないため、今後もっと便利な機能が見つかるかもしれません。
その際は今回のように発信していきたいと思っています。
現在弊社では一緒に改善に取り組んでくださるエンジニアを募集しています！
リプレース・リファクタに力を入れている今だからこそ新しいもの・ことに取り組む環境が用意できると思っています。
カジュアル面談の実施もしておりますので、ご興味ある方はお声掛けください！
Discussion