【2025年版】GitHub超入門 #3 -脱黒い画面！VS Code連携で直感的にGit操作-

はじめに：コマンド操作はもう卒業？

　前回までは、仕組みを理解するためにあえてコマンドライン（黒い画面）で操作しました。しかし、実際の開発現場では、エディタ（VS Code）の機能を使ってボタンポチポチで済ませることがほとんどです。

今回は、世界で最も使われているエディタ Visual Studio Code (VS Code) を使って、直感的かつ高速にGit操作を行う方法を解説します。

【2025年版 】GitHub超入門 #2 – コピペでOK！初めてのCommitとPush、そしてPull

コピペでOK！GitHub入門第2回。Clone, Commit, Push等の基本コマンドを「RPGのセーブ」に例えて解説。黒い画面が苦手でも、コードをアップロードして「草」を生やす手順を最短でマスターできます。

【STEP 1】VS Codeの準備

まずはVS Codeをインストールします。すでに使っている人はスキップしてください。

インストール 公式サイトからOSに合わせてダウンロード・インストールします。

Visual Studio Code

Microsoftが開発している無料の高機能エディタ。

code.visualstudio.com

【STEP 2】リポジトリを開く

前回 git clone したフォルダをVS Codeで開きます。

1. メニューバーの「ファイル」→「フォルダーを開く」を選択。
2. 前回作成したリポジトリのフォルダを選択して開く。

これだけで、VS Codeは自動的に「あ、これはGitで管理されてるフォルダだな」と認識してくれます。

【STEP 3】変更・ステージング・コミット (Add & Commit)

実際にファイルを変更して、VS Codeからコミットしてみましょう。

1. ファイルを変更する ファイル（index.htmlなど）を適当に編集して保存（Ctrl+S）します。

2. ソース管理タブを開く 左側のメニューにある「枝分かれした線」のようなアイコン（ソース管理）をクリックします。ここに「変更されたファイル」一覧が表示されます。

変更があったファイルには「M (Modified)」、新規作成は「U(Untracked)」などのマークがつきます。

3. ステージング (git add) 変更したファイルの横にある「＋」ボタンを押します。 これが git add に相当し、ファイルが「ステージされている変更」エリアに移動します。

4. コミット (git commit) 上部の入力欄にコミットメッセージ（例：「VS Codeから更新」）を入力し、その上の「コミット」ボタン（チェックマーク✔の場合もあり）を押します。 これで git commit が完了しました。

【STEP 4】同期 (Push & Pull)

コミットすると、ボタンが青色の「変更の同期（Sync Changes）」というボタンに変わります（または左下に矢印アイコンが出ます）。

同期ボタンを押す このボタンを押すと、以下の処理を自動でやってくれます。

1. GitHubから最新情報を取得 (Pull)
2. 自分のコミットを送信 (Push)

コマンドで git pull して git push していた手間が、このワンクリックで完了します。初回だけ「GitHubにサインインしていい？」と聞かれることがありますが、「許可」してブラウザで認証すればOKです。

【おまけ】神拡張機能「Git Graph」

履歴を見やすくするために、ぜひ入れておきたい拡張機能があります。

Git Graphの導入 左の拡張機能アイコンから「Git Graph」を検索してインストールします。

使い方 インストール後、下部のステータスバーにある「Git Graph」という文字をクリックすると、コミット履歴がカラフルな路線図のように表示されます。 「誰が」「いつ」「どんな変更をしたか」が一目でわかるので、チーム開発や過去のコードに戻りたい時に非常に便利です。

まとめ

VS Codeを使えば、Git操作は以下の3ステップになります。

1. 書いて保存
2. 「＋」押してメッセージ書いて「コミット」
3. 「変更の同期」ボタンをポチッ

これにて「GitHub超入門」シリーズの基礎編は完結です！ アカウント作成から始まり、コマンドでの理解、そして実践的なVS Code運用まで、一通りマスターできました。これであなたも胸を張って「Git使えます」と言って大丈夫です。（たぶん)

よい開発ライフを！

もっと詳しく知りたい(特定のコミットまでロールバックしたい、ブランチって何？)という人は以下の記事で紹介しています。

VSCode + Git Graphが使える環境の時

【2025年版】GitHub超入門 #4 -ブランチで並行世界を作る＆失敗時のタイムマシーン(Rollback)-

【2025年版】GitHub超入門 #4 -ブランチとロールバック- 「コードが動かなくなった！」そんな時、特定の過去の状態まで戻す（ロールバック）方法を解説。また、メインのコードを壊さずに実験できる「ブランチ」の概念と、VS Codeでの簡単な操作方法（Reset/Revert）を紹介します。

コマンドラインから操作したい時

【2025年版】GitHub超入門 #5 (CLI編) -コマンドラインで操るブランチと時空移動-

【2025年版】GitHub超入門 #4 (CLI編) -コマンドで操るブランチとロールバック- 拡張機能なし、コマンドライン(CLI)だけでGitを操作する方法。最新の git switch を使ったブランチ操作や、git log での履歴確認、reset/revert でのコードの復旧手順を解説。黒い画面での操作をマスターしたい人向け。