初心者向け！VS CodeでGitを操作する方法をわかりやすく解説

「Gitを使ってみたいけど、コマンドが難しそう…」
「GitHubでコード管理をしたいけど、操作がよくわからない…」

そんな方におすすめなのが、VS CodeでのGit管理！ 💻✨

VS CodeにはGit機能が標準搭載されており、GUIで直感的に操作できるので、
コマンドを使わずにコミット・プッシュ・ブランチ管理が簡単にできます！

さらに、GitHubと連携すれば、複数人での開発もスムーズに進められます！

本記事では、初心者でもわかりやすいように、VS CodeでのGit操作を徹底解説！
「Gitの基本からGitHubとの連携、便利な拡張機能まで」を詳しく紹介します✨

この記事でわかること

Gitとは？バージョン管理の基本
VS CodeでGitを使うための準備（インストール＆設定）
リポジトリの作成・管理・GitHubとの連携方法
コミット・プッシュ・ブランチ操作をGUIで簡単に実行する方法
便利なGit拡張機能で作業をもっと快適にするコツ

Gitとは？バージョン管理の基本
VS CodeでGitを使うための準備
Gitリポジトリを作成・管理する方法
VS CodeでのGitの基本操作（コミット・プッシュ・ブランチ管理）
Gitの便利な機能＆おすすめ拡張機能
まとめ：VS CodeでGitを活用して効率的な開発をしよう！
「Gitの使い方をもっと詳しく知りたい！」そんな方へ

Gitとは？バージョン管理の基本

Gitは、ソースコードの変更履歴を管理するためのバージョン管理システムです。
プログラム開発では、「間違えてファイルを上書きしてしまった…」
「どのバージョンのコードが正しいのかわからない…」 ということがよくあります。

そこで役立つのが Git！ 🛠✨
Gitを使えば、過去のコードに戻ったり、複数人でスムーズに開発 できるようになります！

1. Gitの主な機能

✅ 履歴管理（変更前のコードに戻れる！）
✅ ブランチ機能（別の機能を並行開発できる！）
✅ リモートリポジトリとの連携（GitHubなどを使ってチーム開発が可能！）

2. GitHub・GitLab・Bitbucketとは？

Gitはローカル（自分のPC）だけで管理することも可能ですが、
GitHub・GitLab・Bitbucket などのサービスを使えば、クラウド上でコードを共有・管理できます！

サービス名	特徴
GitHub	世界最大のGitリポジトリサービス（オープンソースも多数）
GitLab	自社サーバーで運用できる、企業向けのGit管理ツール
Bitbucket	Jiraとの連携が強力で、アジャイル開発向けに最適

💡 初心者は、まずは無料で使えるGitHubを試してみよう！

3. Gitの基本的な流れ

Gitを使った開発は、以下の手順で進めるのが基本です👇

1️⃣ リポジトリを作成（またはクローン）
2️⃣ ファイルを編集・追加
3️⃣ 変更をステージング（Gitに登録）
4️⃣ コミット（変更を確定）
5️⃣ リモートリポジトリにプッシュ（GitHubへアップロード）

この流れを理解すれば、VS CodeでGitを活用できる準備はバッチリ！ 💪✨

VS CodeでGitを使うための準備

VS CodeでGitを活用するには、Gitのインストールと基本設定が必要です！
ここでは、Windows・Mac・Linux別のGitインストール方法と、
VS CodeでGitを使うための初期設定を詳しく解説します✨

1. Gitがインストールされているか確認する

まずは、Gitがすでにインストールされているか確認しましょう。
VS Codeのターミナル（Ctrl + / Cmd +） を開いて、以下のコマンドを実行👇

✅ 表示例（インストール済みの場合）

git --version

git version 2.40.0

もし、バージョンが表示されない場合は、Gitがインストールされていない ので、
次の手順でインストールを行いましょう！

2. Gitのインストール方法（Windows / Mac / Linux対応）

✅ Windowsの場合

Git公式サイト にアクセス
「Download for Windows」をクリック
ダウンロードした git.exe を実行し、インストール
途中の設定は基本的にデフォルトのままでOK

✅ Macの場合（Homebrewを使うのがおすすめ！）
ターミナルで以下のコマンドを実行👇

brew install git

または、Xcodeをインストールすると自動的にGitもインストールされます。

✅ Linuxの場合（ディストリビューションごとにコマンドが異なります）
Ubuntu / Debian 系

sudo apt install git

Fedora / CentOS / RHEL 系

sudo yum install git

3. Gitの基本設定（ユーザー名＆メールアドレスの登録）

Gitを使うには、まず自分の名前とメールアドレスを設定しましょう！

以下のコマンドを実行👇

git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

✅ 設定を確認するコマンド

git config --global --list

これで、Gitの準備が完了しました！ 🎉

Gitリポジトリを作成・管理する方法

VS CodeでGitを活用するには、Gitリポジトリ（作業フォルダ）を作成し、管理する 必要があります。
ここでは、新規リポジトリの作成方法と、GitHubからリポジトリをクローンする方法 を解説します✨

1. 新規リポジトリを作成する方法（ローカル）

まずは、既存のプロジェクトフォルダをGitで管理する方法 を紹介します！

✅ 手順

VS Codeでプロジェクトフォルダを開く（Ctrl + O / Cmd + O）
ソース管理（Git）パネルを開く（左のGitアイコンをクリック）
「リポジトリを初期化」ボタンをクリック！

💡 これで、このフォルダ内のファイルがGitで管理されるようになります！

2. GitHubのリポジトリをクローンする方法

すでにGitHubにあるリポジトリを、ローカルにコピーして開発したい場合 は、以下の手順でクローンします👇

✅ 手順

GitHubのリポジトリページを開く
「Code」ボタンをクリック → 「HTTPS」または「SSH」のURLをコピー
VS Codeのコマンドパレット（Ctrl + Shift + P / Cmd + Shift + P）を開く
Git: Clone を検索して実行
先ほどコピーしたURLを貼り付ける
ローカルの保存先フォルダを選択
リポジトリのクローンが完了！ 🎉

3. VS CodeでGitの状態を確認する

VS Codeのソース管理パネル（Gitアイコン） を開くと、
「ファイルが変更されているかどうか」「ステージングの状況」 などを一目で確認できます！

💡 色の意味を覚えておくと便利！

U（Untracked） = Git管理外の新規ファイル
M（Modified） = 変更されたファイル
D（Deleted） = 削除されたファイル

VS CodeでのGitの基本操作（コミット・プッシュ・ブランチ管理）

Gitを使う上で重要なのが、コミット・プッシュ・ブランチ管理 などの基本操作です。
VS Codeでは、これらの操作をGUIで簡単に実行できます✨

1. 変更をコミットする方法

コミット（commit） とは、ファイルの変更を記録し、保存すること です。

✅ コミットの手順

ソース管理（Git）パネルを開く（左のGitアイコンをクリック）
変更されたファイルがリストに表示される（U = 新規、M = 変更済み）
ステージング（＋ボタンをクリック）
「コミットメッセージ」を入力（例：初回コミット）
「✔（チェックマーク）」をクリック でコミット完了！

💡 ショートカットキーでコミットを実行！

Windows / Linux: Ctrl + Enter
Mac: Cmd + Enter

2. GitHubにプッシュ（push）する方法

プッシュ（push） とは、ローカルの変更をGitHubなどのリモートリポジトリに反映する操作 です。

✅ プッシュの手順

リモートリポジトリを設定するshコピーする編集するgit remote add origin https://github.com/your-username/your-repo.git
ソース管理パネルで「プッシュ」ボタンをクリック！
GitHubに変更が反映される！ 🎉

💡 初回のみ「リモートリポジトリを設定」する必要あり！
（GitHubのリポジトリURLを origin に登録）

3. ブランチを作成・切り替える方法

ブランチ（branch） とは、メインのコードとは別に変更を加えられる作業エリア です。
「新機能を追加する」「バグ修正を行う」場合に、ブランチを使うと便利！

✅ 新しいブランチを作成する手順

左下の「ブランチ名」をクリック
「新しいブランチを作成」を選択
ブランチ名を入力（例：feature-new-ui）
Enterキーを押してブランチを作成

✅ ブランチを切り替える手順

左下のブランチ名をクリック
「ブランチを切り替え」を選択
目的のブランチを選択 で切り替え完了！

💡 コマンドでブランチを操作する方法

# 新しいブランチを作成
git branch feature-branch

# 作成したブランチに切り替え
git checkout feature-branch

Gitの便利な機能＆おすすめ拡張機能

VS Codeには、Gitをより便利に使うための機能が豊富に備わっています。
さらに、拡張機能を追加することで、Gitの管理をもっと快適にすることが可能！ ✨

1. VS CodeでGitの履歴を確認する方法

過去の変更履歴や、誰がどのコードを編集したのかを確認できると、開発がスムーズになります！

✅ コミット履歴を確認する手順

ソース管理パネル（Gitアイコン）を開く
「…（メニュー）」をクリック → 「コミットの履歴を表示」
変更履歴が一覧で表示される！

💡 「変更履歴を戻したい！」ときは、特定のコミットを選択して「チェックアウト」すればOK！

2. コンフリクト（競合）の解決方法

複数人で開発していると、同じファイルを編集してコンフリクト（競合）が発生することがあります。
VS Codeには、**コンフリクトをGUIで解決する「マージエディタ」**が搭載されています！

✅ コンフリクト解決の手順

コンフリクトが発生すると、VS Code上に警告が表示される
「現在の変更を適用」「リモートの変更を適用」「両方の変更を適用」から選択
「✔（チェックマーク）」をクリックして確定！

💡 マージエディタを使えば、簡単にコンフリクトを解消できる！

3. Gitの履歴管理を強化する拡張機能

✅ GitLens（Gitの変更履歴を可視化）

コードの変更履歴をエディタ上に表示
コミットごとの変更内容を確認できる
GitHubのプルリクエストと連携可能

✅ Git Graph（コミット履歴をビジュアル化）

ブランチの関係をグラフで確認できる
どのブランチがどこで分岐したのかが一目でわかる

✅ Git History（過去の変更履歴を見やすく表示）

特定のファイルの変更履歴を一覧で確認できる
リポジトリ内のすべてのコミットログをGUIで表示

💡 これらの拡張機能を活用すると、Git管理がさらに快適に！ 🚀

📌 まとめ：VS CodeでGitをさらに活用しよう！

Gitの変更履歴をVS Code上で確認できる！
コンフリクト（競合）はマージエディタを使って簡単に解決！
拡張機能を導入すれば、Gitの履歴管理がより便利に！

まとめ：VS CodeでGitを活用して効率的な開発をしよう！

VS CodeにはGitが標準搭載されており、コマンドを使わなくても直感的にGitを操作できるのが大きなメリットです！✨
リポジトリの作成・コミット・プッシュ・ブランチ管理 など、基本的なGitの使い方をマスターすれば、
バージョン管理がスムーズになり、開発の効率がアップ します！