💡 この記事でわかること
- VS Codeの「ソース管理」ビューでできること（Git連携とは何か）
- 変更のステージング・コミットをボタン操作で行う方法
- 手元のフォルダをGitHubに発行（Publish）する手順
- push・pullでGitHubと同期する方法と、差分（diff）の見方
- gitコマンドとの対応、初心者がつまずきやすいポイント
👉 VS Codeのダウンロード・初期設定についての記事はこちら
👉 Gitの基本的な使い方（add・commit・push）についての記事はこちら
1. VS Codeのソース管理（Git連携）とは？
VS Codeのソース管理（Source Control）とは、
👉 gitコマンドを打たなくても、VS Codeの画面上のボタン操作でコミットやGitHubへのアップロードができる機能です。
Gitの操作は本来ターミナルでgit add・git commit・git pushといったコマンドを打って行いますが、VS Codeには同じことをGUI（画面のクリック操作）でできる仕組みが最初から組み込まれています。コマンドに慣れていない段階でも、「今どのファイルが変更されているか」を一覧で確認しながら記録を残していけます。
💡 裏側で動いているのはあくまで通常のGitです。VS Codeで操作してもターミナルでgitコマンドを使っても、でき上がる履歴はまったく同じものです。どちらか一方に統一する必要はなく、混ぜて使っても問題ありません。
💡 この機能を使うには、パソコンにGit本体がインストールされている必要があります。VS Codeを入れただけではGitは入りません。
👉 Gitのインストール方法（Mac・Windows）についての記事はこちら
2. 準備：フォルダを開いてリポジトリを用意する
プロジェクトのフォルダを開く
メニューバーの「ファイル」→「フォルダーを開く」から、Gitで管理したいプロジェクトのフォルダを開きます。VS Codeのソース管理は、「今開いているフォルダ」に対して働きます。
ソース管理ビューを開く
画面左端のアクティビティバーにある、枝分かれのような形のアイコン（ブランチのアイコン）をクリックします。ショートカットキーは、WindowsがCtrl + Shift + G、MacがControl + Shift + Gです。
まだGit管理されていない場合
開いたフォルダがまだGitで管理されていない（.gitフォルダがない）場合、ソース管理ビューに「リポジトリを初期化する」（Initialize Repository）というボタンが表示されます。これをクリックすると、ターミナルでgit initを実行したのと同じ状態になります。
👉 すでにGitHubなどからcloneしてきたフォルダの場合は、この手順は不要です。開いた時点でソース管理ビューがそのまま使えます。
3. ソース管理ビューの見方
ソース管理ビューには、主に次の要素が表示されます。
- メッセージ入力欄（一番上）：コミットメッセージ（変更内容の説明）を書く場所
- 「変更」（Changes）：まだ記録の候補にしていない、変更のあったファイルの一覧
- 「ステージされている変更」（Staged Changes）：次のコミットに含める予定として登録済みのファイルの一覧
- 「コミット」ボタン：メッセージ欄の下にある、記録を確定するボタン
ファイル名の右側にはアルファベット1文字のマークが付きます。Mは変更（Modified）、Uは新規で未追跡（Untracked）、Dは削除（Deleted）を表します。
💡 画面左下の青いステータスバーにも、現在のブランチ名と同期用のアイコン（↑↓の数字付き）が表示されます。ここを見れば「未pushのコミットが何件あるか」がひと目でわかります。
4. 変更をコミットする
Gitの記録は「ステージング」→「コミット」という2段階で行います。VS Codeでの操作は次の通りです。
ステップ1：変更をステージする
「変更」の一覧で、記録に含めたいファイルにマウスを乗せると、右側に「＋」アイコン（変更をステージ）が表示されます。これをクリックすると、そのファイルが「ステージされている変更」に移動します。git addに相当する操作です。
👉 「変更」の見出しにある「＋」を押すと、変更のあった全ファイルをまとめてステージできます（git add .に相当）。
ステップ2：コミットメッセージを書く
一番上の入力欄に、「何をしたか」が後から見てもわかる一文を書きます。「修正」「update」だけだと履歴を見返したときに困るので、「ヘッダーのレイアウトを修正」のように具体的に書きましょう。
ステップ3：コミットする
「コミット」ボタンをクリックすると、ステージされている変更が履歴として確定します。git commit -m "メッセージ"に相当します。
💡 ファイルを1つもステージせずに「コミット」ボタンを押すと、「ステージされた変更がありません。すべての変更をステージしてコミットしますか？」と確認が表示されます。「はい」を選べば、変更のある全ファイルをステージしてまとめてコミットできます。
5. GitHubに発行（Publish）する
手元でコミットしただけでは、変更はまだパソコンの中にしかありません。GitHubにアップロードして保存・公開するには「発行」の操作が必要です。
👉 GitHubとは？リポジトリの作り方・使い方についての記事はこちら
「Publish Branch」ボタンから発行する
まだGitHub上にアップロード先（リモートリポジトリ）がないフォルダでコミットすると、ソース管理ビューに「Branch の発行」（Publish Branch）というボタンが表示されます。これをクリックします。
初めて使うときは、GitHubアカウントへのサインインを求める画面が出ます。案内に従ってブラウザで認証すると、VS CodeとGitHubが連携されます。この連携は最初の1回だけで、次回以降は不要です。
サインイン後、次の2つを選びます。
- リポジトリ名：GitHub上での保管場所の名前（フォルダ名がそのまま候補になります）
- 公開範囲：
Publish to GitHub private repository（自分だけが見られる非公開）か、public repository（誰でも見られる公開）
👉 学習中のコードや、まだ人に見せたくないものは、まずprivateで発行しておけば安心です。あとからGitHubの設定画面で公開に切り替えられます。
⚠️ APIキーやパスワードなどの秘密情報を含むファイルは、発行前に.gitignoreで除外しておきましょう。一度GitHubにアップロードすると、後から消しても履歴には残ってしまいます。
👉 .gitignoreで特定ファイルを除外する使い方についての記事はこちら
6. push・pullでGitHubと同期する
一度発行したあとは、git push・git pullに相当する操作でGitHubと同期します。
「変更の同期」ボタン
発行が済むと、コミット後のボタンが「変更の同期」（Sync Changes）に変わります。これを押すと、GitHubから最新の変更を取り込み（pull）、続けて手元のコミットをアップロード（push）まで一気に行われます。
pushとpullを個別に行う
ソース管理ビュー右上の「…」（その他の操作）メニューから、「プル」「プッシュ」を個別に選ぶこともできます。チームで作業していて「まず相手の変更だけ取り込みたい」といった場合に使います。
💡 画面左下の青いステータスバーにある同期アイコンをクリックしても、同じ同期操作ができます。
7. 差分（diff）を確認する
コミットする前に「自分が何を変更したのか」を確認する習慣をつけると、余計な変更を含めてしまうミスを防げます。
ソース管理ビューでファイル名をクリックすると、変更前と変更後が左右に並んだ差分表示（diff）が開きます。追加された行は緑、削除された行は赤で色分けされます。git diffコマンドの内容を、見やすい画面で確認できるものだと考えてください。
👉 「意図しない変更が混ざっていないか」をこの画面で確認してから、ステージ・コミットするのがおすすめです。
8. gitコマンドとの対応
VS Codeの操作と、ターミナルで打つgitコマンドの対応は次の通りです。どちらを使っても結果は同じです。
| VS Codeの操作 | 対応するgitコマンド |
|---|---|
| 「リポジトリを初期化する」 | git init |
| ファイルの「＋」（変更をステージ） | git add ファイル名 |
| 「変更」見出しの「＋」 | git add . |
| 「コミット」ボタン | git commit -m "メッセージ" |
| 「Branch の発行」 | git remote add origin ... + git push -u origin main |
| 「変更の同期」 | git pull + git push |
| ファイル名をクリック | git diff |
👉 VS Codeの統合ターミナルの使い方についての記事はこちら
9. 初心者がつまずきやすいポイント
- 「リポジトリを初期化する」ボタンが出ない：フォルダを開いていない（ファイルだけ開いている）ことが多いです。「フォルダーを開く」でプロジェクトのフォルダごと開き直しましょう
- ステージし忘れてコミットされない：「変更」に残ったままのファイルはコミットに含まれません。コミット前に一覧を確認する癖をつけましょう
- 「発行」時にGitHubのサインイン画面が出て戸惑う：これは正常な動作です。ブラウザが開いたら「Authorize」を押して、VS Codeに戻れば連携完了です
- 同期でエラーになる：GitHub側に自分の手元にない変更があると、そのままではpushできません。先に「プル」で取り込み、コンフリクト（衝突）が出たら解消してから再度同期します
- Git本体が未インストール：ソース管理ビューに何も表示されない・警告が出る場合は、そもそもGitが入っていない可能性があります
👉 Gitのブランチ・マージとコンフリクトの解消についての記事はこちら
📝 まとめ
- VS Codeの「ソース管理」ビューを使うと、gitコマンドを打たずにコミット・pushができる
- 操作は「ステージ（＋）」→「メッセージ入力」→「コミット」の流れ
- 手元のフォルダをGitHubに上げるときは「Branch の発行」ボタンを使う（最初だけGitHubサインインが必要）
- 発行後は「変更の同期」でpull＋pushをまとめて実行できる
- ファイル名をクリックすれば差分（diff）を色分けで確認できる
裏で動いているのは通常のGitなので、VS Codeの画面操作とターミナルのコマンドは自由に行き来できます。まずはボタン操作で流れをつかみ、慣れてきたらコマンドも少しずつ覚えていくとスムーズです。