【入門】VSCodeとGitHubの連携手順・使い方をわかりやすく解説

GitHubとはプログラムのソースコードをオンラインで共有・管理できるサービスです。VSCodeでプログラミングを行っている場合、VSCodeとGitHubを連携させVSCode上でGitHubの操作を実行できます。

VSCodeのユーザーがGitHubを連携させることで、GitHubが使いやすくなるのです。この記事では、VSCodeとGitHubの連携手順や使い方についてわかりやすく解説します。

VSCodeとGitHubを連携させて実現できること・メリット

Gitに関わる操作は、コマンドラインツールを使うか専用アプリを使って行います。コマンドライン（CUI）の操作に慣れていない方は、GUIの専用アプリを使ってGitの操作を行えますが、VSCodeもGitをGUIで操作できるアプリの1つです。

プログラミング用のアプリとGitを操作するアプリが別々であれば、いちいちアプリを切り替えながら操作しなくてはなりません。しかしVSCodeなら、アプリを切り替えることなくプログラミングとGit両方の操作を実行できるので非常に便利です。

VSCodeでは、以下にあげるGit（GitHub）の基本的な項目を利用・操作できます。

◆VSCodeで扱えるGit（GitHub）の基本的な項目

リポジトリ	ソースコードや変更履歴などを格納する場所
ローカルリポジトリ	ローカル（自分のPC）にあるリポジトリ
リモートリポジトリ	サーバー（ウェブ）上にあるリポジトリ ※GitHubもリモートリポジトリの1つ
コミット	リポジトリへファイルを追加したり変更履歴を保存したりすること
プッシュ	ローカルリポジトリのデータをリモートリポジトリへ反映（アップロード）させること
プル	リモートリポジトリをローカルリポジトリへ反映（ダウンロード）させること

たとえば、2人の作業者がGitHubとVSCodeを使い共同作業を行う場合、以下のようにGitHubを介してソースコードや変更履歴を共有します。

一方の作業者がVSCodeでソースコードを編集した上で、そのソースコードを共有するためVSCodeを使いGitHubへアップロード（プッシュ）します。もう一方の作業者は、VSCodeを使いGitHubからソースコードをダウンロード（プル）し、ソースコードを参照・編集するのです。

VSCodeとGitHubを連携させる方法・使い方

GitHubとVSCodeの基本的な設定がすんでさえいれば、この2つを連携させるのは簡単です。ここでは、VSCodeとGitHubを連携させる方法や使い方について解説します。

※Windows10にインストール済のVSCode操作画面にて解説します。
※Git・GitHubの初期設定、VSCodeのインストールはすんでいるものとします。

Git・GitHubの初期設定については、以下記事を参考にして下さい。

またVSCodeについては、以下URLにてインストール用プログラムをダウンロードできます。

https://code.visualstudio.com/download

①ローカルリポジトリを作成する

まず、ローカルリポジトリとして利用するフォルダを作成して下さい。フォルダ名は任意です。
(ここではCドライブ直下に「vscode-test」というフォルダを作成しています。)

次に、VSCodeで作成したフォルダを開きます。
「ファイル」→「フォルダーを開く」から、作成したフォルダを選んで下さい。

次に画面左側のGitアイコンをクリックし、新しく表示された「リポジトリを初期化する」ボタンをクリックします。

これでローカルリポジトリの作成が完了しました。

②ローカルリポジトリにコミットする

ファイルを作成しコミットを行います。ローカルリポジトリに指定したフォルダ内に、任意のファイルを作成して下さい。
(ここでは「test.html」という名称のhtmlファイルを作成しています。)

ローカルリポジトリ内に新しくファイルが保存されると、VSCodeのGitアイコンに数字が表示されます。この数字は、ローカルリポジトリ内で新しく変更されたファイル数です。

コミットするには、まず画面左側に表示されたファイル名にマウスポインタを合わせ、新しく表示された「＋」ボタンをクリックします。
（ファイル名が表示されていない場合は、Gitアイコンをクリックしてみて下さい。）

これでステージング(コミットしたいファイルを指定すること)が完了しました。

次に「メッセージ欄」へ変更履歴となるコメント（任意）を入力し、「コミット」アイコンをクリックします。
（ここでは「commit test」というコメントを入力しています。）

これでコミットが完了しました。

③リモートリポジトリを作成する

リモートリポジトリを作成します。
GitHub管理画面へアクセスし、「Create Repository」ボタンをクリックして下さい。

※すでに他のリポジトリが作成されている場合「New」ボタンをクリックして下さい。

リポジトリの作成画面に遷移します。以下の項目を入力・選択して「Create repository」ボタンをクリックして下さい。

Repository name	リポジトリの名前（任意）を入力して下さい。 ※今回は「sample」とします。
Public/Private	リポジトリを公開したい場合は「Public」、非公開にしたい場合は「Private」を選びます。
Initialize this repository with ：	他の人がリポジトリへアクセスした際の参照用として「READ ME」ファイルを設置したい場合は、チェックを入れます。 ※入れなくても構いません。

他の項目は、デフォルトのままで構いません。

これでリモートリポジトリの作成は完了です。リモートリポジトリが作成されると、以下のように作成したリモートリポジトリの管理画面が表示されます。

④ローカルリポジトリとリモートリポジトリを紐づける

作成したローカルリポジトリとリモートリポジトリを紐づけましょう。

まず前項で作成したリモートリポジトリ管理画面で、リモートリポジトリのURLをコピーします。「Quick setup……」右側にあるコピーボタンをクリックして下さい。

ここからは、少しだけコマンドラインの操作が必要となります。VSCode上部の「ターミナル」→「新しいターミナル」をクリックして下さい。

VSCodeの画面右下に、コマンドの入力欄が表示されます。

表示されたコマンド入力欄に、以下コマンドを入力し「Enter」を押して下さい。

git remote add origin 【リモートリポジトリのURL】

リモートリポジトリのURLは、リモートリポジトリ管理画面でコピーした内容を貼り付けて下さい。

このコマンドを実行すれば、ローカルリポジトリとリモートリポジトリの紐づけは完了です。

⑤リモートリポジトリにプッシュする

ローカルリポジトリとリモートリポジトリの紐づけが完了したら、リモートリポジトリへプッシュしてみましょう。

VSCode管理画面で対象のリポジトリを開いた状態で、画面左上の「…」→「プッシュ」をクリックします。

以下のようなメッセージが表示された場合は「OK」をクリックして下さい。

これでプッシュが完了しました。GitHubのリモートリポジトリ管理画面を開くと、プッシュしたファイルが確認できます。

【参考】クローンする

VSCodeから、GitHub上のリモートリポジトリをクローンすることができます。

VSCode管理画面左上の「…」→「クローン」の順でクリックして下さい。

クローンしたいリモートリポジトリのURLを入力する欄が表示されます。クローン先リモートリポジトリのURLをこの欄に張り付け、「Enter」を押して下さい。

そうすると、「リモートリポジトリの宛先」とするローカルのフォルダを選択するよう指示されます。任意のフォルダを選んで「リポジトリの宛先として選択」をクリックして下さい。

これでクローンが実行されます。

クローンが完了すると、複製したリモートリポジトリを開くか聞かれますので、任意の操作を実行してください。開かない場合は「キャンセル」で結構です。

先程指定したリポジトリの宛先を参照すると、リモートリポジトリの内容がコピーされていることが分かります。

ブランチを活用する方法

ブランチとは開発中のソースコードに影響を与えずに、新しく作成したブランチ側で開発作業を続けられる機能です。新しいブランチ側の作業が完了した際には、メインのブランチへ修正内容を反映（マージ）させます。ブランチは複数人で共同開発をする際に、よく使われる機能なので覚えておきましょう。

VSCodeとGitHubを連携させると、VSCodeでブランチの操作ができるようになります。

VSCodeでブランチを作成する場合、メインのブランチを開いた状態で画面左下のブランチアイコンをクリックして下さい。そうすると画面右上にブランチの作成画面が表示されるので、任意のブランチ名を入力し「新しいブランチの作成」をクリックします。（ここでは参考までにブランチ名を「test_branch」とします。）

この時点で、新しく作成したブランチで作業ができる状態となります。次に、ローカルリポジトリに指定したフォルダ内のファイルを修正し、上述した手順を参考にコミットしてみましょう。

プッシュ後、GitHubで紐づけ先のリモートリポジトリを開き「main」をクリックすると、以下のように新しく作成したブランチ名が表示されます。これでリモートリポジトリにも、ブランチの内容が反映されたことが確認できるわけです。

次にブランチで編集した内容を、メインのブランチに反映させます。

改めてVSCodeを開いた後、画面左下のブランチ名をクリックし、画面右上に表示された画面で「main」を選んで下さい。これでmainのブランチへ移動できます。

次に画面左上の「…」→「ブランチ」→「ブランチをマージ」の順で選択・クリックして下さい。

すると、以下のようにマージ元のブランチを選択する画面が表示されるので、指示に従って対象のブランチを選択して下さい。

以下のような画面が表示されたら「OK」をクリックして下さい。

マージ後、ブランチが不要になった場合は同じ画面で「…」→「ブランチ」→「ブランチの削除」を選択・クリックすると、そのブランチを削除できます。

まとめ

VSCodeには、GUI上でGitの操作ができる機能があります。VSCodeとGitHubを連携させることによって、VSCode上でGitHubの基本的な操作を行うことも可能です。連携やGitHubの操作は、VSCode上で行えるため難しくありません。コマンドラインの操作に慣れていない方でも、迷うことはないでしょう。

またVSCodeとGitHubを連携させることにより、GitHubを操作するためコマンドラインツールなどに切り替えたりする必要がなくなるのも大きなメリットです。