- 投稿日：2025/12/12
- 更新日：2025/12/14
GitHubとVSCodeとは？
GitHubについて：
「GitHub（ギットハブ）」とはプログラムのソースコードを、オンラインで共有・管理するサービスです。GitHubは世界中のプログラマーによって使われています。
～中略～
Gitでバージョン管理を使えば、どのファイルが最新版かを簡単に把握できるようになる上に、上書きなどによるトラブルを防げます。GitHubはこのGitをオンラインで使えるようにして、多くのプログラマーが活用できるようにしたサービスなのです。
VSCodeについて：
Visual Studio CodeとはMicrosoft社が提供を行うコードエディターで、通称VSCodeと呼ばれます。 VSCodeはオープソースソフトウェアであり、誰でも無料で使用することができます。特徴として多言語に対応している点や、OSを問わず使用できる点、多彩な拡張機能などが挙げられます。エディターにはさまざまな種類がありますが、その中でも現役エンジニア達から支持の高いエディターがVSCodeです。
GitHubとVSCodeを連携するメリット
Gitに関わる操作は、コマンドラインツールを使うか専用アプリを使って行います。コマンドライン（CUI）の操作に慣れていない方は、GUIの専用アプリを使ってGitの操作を行えますが、VSCodeもGitをGUIで操作できるアプリの1つです。 プログラミング用のアプリとGitを操作するアプリが別々であれば、いちいちアプリを切り替えながら操作しなくてはなりません。しかしVSCodeなら、アプリを切り替えることなくプログラミングとGit両方の操作を実行できるので非常に便利です。
要は、いちいちアプリを切り替えずに、VSCodeのアプリ内でGitHubへのアップロードやコードの編集などがすべて行えるということです。
連携していない場合
・VSCodeでファイルを編集し保存
・ブラウザでGitHubを開く
・ログイン
・ファイルのアップロード先まで移動
・ファイルをアップロード
連携している場合
・VSCodeでファイルを編集し保存
・VSCodeでアップロード先を開く
・VSCodeでアップロード
となるわけです。
これだけ見ても、GitHubとVSCodeを連携すれば、楽で時短になるということがわかりますね。
じゃあどうやって連携すればいいのか、具体的に見ていきましょう。
GitHubとVSCodeの連携方法
今回は、こちらの記事をもとに連携を行いました。
参考：【入門】VSCodeとGitHubの連携手順・使い方をわかりやすく解説
今回は、すでにGitHubのアカウント作成済み、VSCodeはダウンロード済の状態であることを前提に書いていきます。
まだの方は次のリンクを参考に、GitHubアカウント作成とVSCodeの設定を行ってください。
▼GitHubアカウント作成～設定
・【入門】GitHubの使い方｜設定や基本操作など
▼VSCodeのDL～設定
・初心者にもわかる「VSCode」の導入から基本操作まで解説
▼GitHubとVSCodeの連携の前準備
GitHubとVSCodeの連携は、GitHubの「Aのレポジトリ」と自分のパソコンの中の「Bのフォルダ」を連結したいよ、と指示してあげる必要があります。
その前準備として、次の作業を行っていきます。
①VSCodeに連結させたいフォルダを開く
②GitHubに連結先のレポジトリを作成しておく
①-１、VSCodeを開く
①-２、エクスプローラーを開く
一番左のメニューの、上のアイコン「エクスプローラー」をひらき、「フォルダーを開く」ボタンをクリックします。
①-３、GitHubと連携するフォルダーを開く
GitHubに連携したいフォルダを選択し、「フォルダーの選択」をクリックします。
▼このような画面がでたら、「はい、作成者を信頼します」をクリックします。
左のエクスプローラーの一覧に、指定したフォルダ構成が同じように表示されます。
（フォルダ階層で、ファイルが保存されていないフォルダは省略されて表示されます）
ここまでで、VSCodeの前準備は完了です。
次に、GitHubの前準備を行っていきます。
②-1、GitHubを開き、新しいレポジトリを作成する
左メニューの緑色のボタン（Newと書かれたボタン）をクリックします。
②-2フォルダ名と同名のレポジトリを作成する
フォルダ名と同名のレポジトリを作成します。
（同じ名前じゃないと連結できないわけではなさそうですが、初心者はわけわからなくなる可能性が高いので、同じ名前になるようにしましょう）
Description: このレポジトリの説明（READMEを作成するをOnにすると、これが説明文として記載されます。）
Choose visibilty: Public(公開用)かPrivate(個人用)か(見せるようにしたいか否かで選んでください。)
Add README: このレポジトリの説明文（README）を作成するか(OffでもOnでもどっちでもよいです。）
Add .gitignore: 不明
Add license: 不明
レポジトリが作成されると、次のような画面になります。
（ReadMeを作成するにチェックを入れたので、「README.md」のファイルが自動的に作成されています。）
では、このGitHubのレポジトリと、VSCodeで開いたフォルダを連携させましょう。
▼GitHubのレポジトリと、VSCodeで開いたフォルダを連携させる。
ここからは、GitHubのレポジトリと、VSCodeで開いたフォルダを連携させる手順です。
１、レポジトリのリンクをコピーする
GitHubで新規作成したリポジトリの画面から、「Code」ボタン（緑のボタン）をクリックします。
その中に「HTTPS」が有効になっているのが確認できます。
直下の入力欄に「https://～」と続く「リモートレポジトリのURL」が記入されているので、それを全コピーします。
２、VSCodeで新しいターミナルを開く
VSCodeの一番上のメニューで「・・・」の中に「ターミナル」タグがあります。
その中の「新しいターミナル」をクリックします。
３、GitHubと連結させるよう指示する
画面の下に出てきたコマンドプロンプトのような画面に、以下のように入力します。
git remote add origin 【リモートリポジトリのURL】
【リモートリポジトリのURL】の部分は、GitHubでコピーした「リモートレポジトリのURL」に置き換えてください。
成功すると、次のような画面になります。
これで、GitHubとVSCodeの連携が完了しました！
では、さっそくGitHubへフォルダの中身をアップロードしてみましょう。
▼GitHubにフォルダの中身をアップロードする
１、「ソース管理」からリポジトリを「プッシュ」する
このようなポップアップが出たら、OKを押しましょう。
２、GitHubに反映されているか確認する
まとめ
GitHubとVSCodeが連携すると、画面を移動する手間が省け、大幅な時短になります。
慣れるまでは難しいですが、頑張りましょう
備忘録で作りましたが、誰かの参考になれば幸いです。
