Visual Studio Code と Git Hub を連携させてみる 後編

作成日：2023/03/10

Visual Studio Code と Git Hub を連携させてみる 後編

ブランチを作成する

git はバージョン管理機能を備えていますが、その機能の1つがブランチ機能です。
既存のファイルを残したまま、修正版を修正することができます。
必要に応じて、修正版で行った修正を既存ファイルに適用したり (マージ)、修正版をすべて破棄したりすることもできます。
開発はブランチで行い、開発が終わったらマージするのが基本的な流れです。

ブランチの作成には、ウィンドウ左下に表示されている現在のブランチ (main) をクリックします。
ウィンドウ上部に表示されるテキストボックスで「＋新しいブランチを作成…」を選択し、作成したいブランチ名を入力します。
ここではオーソドックスな開発用ブランチとして「develop」を作成します。

さらに「Branchの発行」ボタンをクリックしますと、リモートリポジトリにも同じ develop ブランチが作成されます。

ブランチで作業してマージする

では、ブランチで修正作業を行い、その変更をマージしてみましょう。
現在作業を行っているブランチはウィンドウ左下で確認できますので、develop ブランチになっていることを確認します。
main ブランチになっている場合には develop ブランチに切り替えてください。
README.mdファイルを修正し、変更をコミットします。
さらに、「変更の同期」ボタンをクリックして、リモートリポジトリにプッシュします。

プルリクエストを作成する

変更をプッシュしましたが、変更は develop ブランチで行われており、main ブランチにはまだ反映されていません。
ブランチ間で変更を反映する方法の1つとしてプルリクエスト (プルリク) があります。

Webブラウザーでリモートリポジトリにアクセスします。
現在2つのブランチがあるので「2 branches」の表示をクリックして、ブランチの一覧を表示します。
develop ブランチの表示に「0|1」と書かれている部分がありますが、これが main ブランチと比較して、どの程度コミットが進んでいるか (AHEAD) の状態を表しています。

ブランチの一覧

main ブランチと develop ブランチがあり、develop ブランチが1つ進んだ状態にあることを示しています。

右側にある「New pull request」ボタンをクリックしますと、進んでいる (main ブランチに反映されていない) コミットが表示され、どのような変更が加えられているか比較した結果が確認できます。
プルリクエストへのコメントを記入して、「Create pull request」をクリックしますと、develop ブランチから main ブランチへのプルリクエストが作成されます。

プルリクエストを作成する画面

実際の開発ではコメント欄にいろいろと書いておきます。

プルリクエストを処理する

プルリクエストを作成しますと、Webブラウザーの画面はプルリクエストの確認画面に移行します。
作成したプルリクエストが表示されますので、「Files changed」タブをクリックして変更内容を参照するなどして、マージしてもよいか確認します。
マージするのであれば、「Conversation」タブをクリックして、「Merge pull request」をクリックし、さらに「Confirm merge」をクリックします。

プルリクエストを確認して、マージします。マージできないプルリクの場合、差し戻すことも可能です。

main ブランチのREADME.mdファイルを表示して、変更が反映されていることを確認してください。

Webブラウザーで main ブランチのREADME.mdファイルを確認。
develop ブランチからマージされたのがわかります。

拡張機能の紹介

今回は Visual Studio Code と GitHub の基本的な連携についての手順を確認してみました。
Visual Studio Code は単なるエディターとしてだけでなく、拡張機能をインストールすることでさまざまな機能を追加できます。
いくつか便利な拡張機能を紹介しておきます。

GitLens

Git のコミット履歴などを確認し、各種機能を追加してくれます。

GitLens をインストールしますと、ソース管理画面がカスタマイズされ、ブランチの流れやコミット履歴などが表示できます。

GitHub Pull Requests and Issues

GitHub のプルリクエストや Issue を Visual Studio Code で扱えるようになります。
いちいちWebブラウザーに切り替えて GitHub にアクセスしなくても操作が可能です。

GitHub のプルリクエストや Issue に Visual Studio Code からアクセス、操作できるようになります。

この他に、Visual Studio Code がおすすめしてくれることもありますので、いろいろと試してみてください。
使わない拡張機能は無効にも、アンインストールもできます。

執筆者

お問い合わせ