検索
連載

VS Codeでソースコード管理:プルリクエストを作成してみようVisual Studio Codeで快適Pythonライフ

VS Codeの拡張機能「GitHub Pull Requests and Issues」を使って、VS Code内からプルリクエストを作成する方法を紹介します。

PC用表示 関連情報
Share
Tweet
LINE
Hatena
「Visual Studio Codeで快適Pythonライフ」のインデックス

連載目次

 前回はVisual Studio Code(以下、VS Code)からGitHubへローカルリポジトリの内容を公開する方法や、リモートリポジトリをローカルな環境にクローンする方法を見ました。今回はVS Codeからリモートリポジトリへプルリクエストを発行するのに便利な拡張機能を紹介します。

準備と拡張機能のインストール

 ここでは筆者が個人的に使用しているGitHubの有償アカウントと、筆者の会社のメールアドレスを使って作成した無償アカウントを2人のユーザーと見なして話を進めます(なお、GitHubでは個人が複数のアカウントを使用することは推奨されていません。筆者も本連載でのGitHubの説明が終わったら、これらをマージする予定です)。

 前者のアカウントについてはmacOS上で操作することにして、VS Codeの配色テーマは[Dark+]に、GitHubの配色も[Default dark]に設定しました。こちらを仮に「macOS側」と呼ぶことにしましょう。

macOS上で動作しているVS Code
macOS上で動作しているVS Code

 後者のアカウントについてはWindows上で操作することにして、VS Codeの配色テーマは[Light+]に、GitHubの配色は[Default light]に設定しました。こちらは「Windows側」とします。どちらで操作をしているかはウィンドウの配色で分かると思いますが、なるべくどちらでの操作かを明記するようにします。

Windows上で動作しているVS Code
Windows上で動作しているVS Code

 macOS側のVS Codeで前回と同様な操作を行って、「pullreq_test」フォルダを作成し、その中にREADME.mdファイルを作成した後にそのフォルダをGitHubに公開しました。今回は中身もなく公開するような内容でもないことからプライベートリポジトリにしています。

user01側でのpullreq_testリモートリポジトリ
user01側でのpullreq_testリモートリポジトリ

 そして、Windows側でGitHubにサインインしているアカウントにアクセス権を付与してあります。Windows側のアカウントのでは、このリポジトリをフォークして自分のアカウント上に大本のリモートリポジトリの内容をコピーしてあります。

pullreq_testリモートリポジトリをフォークしたところ
pullreq_testリモートリポジトリをフォークしたところ

 そして、Windows側のVS Codeではフォークしたリポジトリの内容をローカルにクローンしました。

フォークしたリモートリポジトリからローカルにクローンしたところ
フォークしたリモートリポジトリからローカルにクローンしたところ

 最後に便利な拡張機能「GitHub Pull Requests and Issues」をインストールしておきましょう。これには[拡張機能]ビューの検索ボックスに「github pull」などと入力して、[GitHub Pull Requests and Issues]を選択し、[インストール]ボタンをクリックするだけです。

GitHub Pull Requests and Issues拡張機能
GitHub Pull Requests and Issues拡張機能

 インストールが終わると、アクティビティーバーには[GitHub]アイコンが増え、これをクリックすると以下のようにサイドバーに[GitHub]ビューが表示されます。

[GitHub]ビュー
[GitHub]ビュー

 この画面ではなく、以下のようなサインインを促すビューが表示されたら、[Sign in]ボタンをクリックして、前回と同様な手順で認証を行ってください(といっても、ボタンを何度かクリックするだけです)。

サインインを促すビュー
サインインを促すビュー

 [GitHub]ビューでは、プルリクエストとイシューをVS Codeの内部から発行したり、他者からそれらを受け取って対応したりできるようになっています。以下では、Windows側でREADME.mdファイルに変更を加えて、プルリクエストを作成してみましょう。

README.mdファイルの変更とプルリクエストの作成

 ここでは適当にREADME.mdファイルに手を入れました。

README.mdファイルに変更を加えたところ(user02側)
README.mdファイルに変更を加えたところ(user02側)

 この変更をコミットして、変更の同期(プッシュ&プル)を実行すると、その変更はフォークしたリモートリポジトリに反映されます。

変更はフォークしたリモートリポジトリに反映される
変更はフォークしたリモートリポジトリに反映される

 ですが、大本のリモートリポジトリには反映されていません。開発者が自分のリモートリポジトリに反映した変更を、大本のリモートリポジトリに取り込んでもらうためにはプルリクエストを作成し、そのコードをレビューしてもらい、問題がないことを確認してもらう必要があります。これは以下のように、GitHubのWebサイトからも行えます。

プルリクエストはGitHubのWebサイトで作成できる
プルリクエストはGitHubのWebサイトで作成できる

 しかし、VS CodeとWebブラウザの間で操作を切り替えるのは、些細なことのようでも面倒です。そこで、先ほどインストールした拡張機能が役立ちます。VS Codeの中からプルリクエストを作成するには[GitHub]ビューの[Pull Requests]ペーンにある[Create Pull Request]ボタンをクリックします。

[Create Pull Request]ボタン
[Create Pull Request]ボタン

 これをクリックすると、ビューが[GitHub Pull Request]に切り替わって、次のようになります(アクティビティーバーにも[GitHub Pull Request]アイコンが増えていることに注目してください)。

[GitHub]ビュー
[GitHub]ビュー

 このビューの上にある領域にはマージしたい内容(Windows側で行った変更)が表示され、その下にある領域にはマージ先(ここでは大本のリモートリポジトリ)を記入されています。さらにプルリクエストのタイトルとその説明を入力する領域もあります。これらを入力して、[Create]ボタンをクリックすると、プルリクエストがフォーク元へと送られます。

 また、VS Codeの画面は次のように変わり、ここでレビューアーや担当者を指定したり、ラベルを設定したりといった作業も行えます。

プルリクエストの詳細
プルリクエストの詳細

 プルリクエストを作成した後で、大本のリモートリポジトリで[Pull Request]タブを選択したところが以下の画像です。

作成したプルリクエストが届いている
作成したプルリクエストが届いている

 Webブラウザでもこのリクエストに対処できますが、macOS側のVS Codeにもこの拡張機能をインストールしていれば、以下のようにリクエストが作成されたことが通知されます(表示されていなければ、[Pull Requests]ペーンにある[Refresh Pull Requests List]ボタンをクリックします)。

大本のリモートリポジトリへプルリクエストが届いたことがローカルのVS Codeに通知された
大本のリモートリポジトリへプルリクエストが届いたことがローカルのVS Codeに通知された

 自分がレビューアーや担当者として指定された場合には、[Waiting For My Review]や[Assigned To Me]にそのリクエストが表示されます。上の画像では[All Open]が展開され、先ほど作成したリクエストが表示されています。これをさらに展開して、[Description]をクリックすると、次のようにプルリクエストの詳細が表示されます。

プルリクエストの詳細
プルリクエストの詳細

 また、[README.md]をクリックすれば、どのような変更が行われたかをVS Code内で参照できます。

差分を表示したところ
差分を表示したところ

 必要があれば、先ほどの画面でコメントを残して、プルリクエストを作成した側に意見を伝えたり、間違いがあればそのことを伝えたりできます。が、今回はコンフリクトも問題もないので、そのまま[Merge Pull Request]ボタンをクリックしてしまいましょう(さらに[Create Merge Commit]ボタンもクリックします)。これで、大本のリモートリポジトリに先ほどの変更が取り込まれます。

 実際にコードをマージできるようになるまでには、管理権限を持つ人からの承認を(必要な数だけ)受ける必要もあるかもしれません。が、VS Codeでプルリクエストを作成するおおまかな手順はこんな感じです。

 次回は、この拡張機能についてもう少し詳しく見てみることにします。

連載一覧


「Visual Studio Codeで快適Pythonライフ」のインデックス

Visual Studio Codeで快適Pythonライフ

Copyright© Digital Advantage Corp. All Rights Reserved.

[an error occurred while processing this directive]
ページトップに戻る