VSCodeでGit Commitを実行する方法

VSCode（Visual Studio Code）では、編集したファイルの変更内容をGitの履歴として保存できます。

このGitの履歴を記録する操作が「Commit（コミット）」です。

VSCodeにはGitを操作するための「ソース管理」機能が標準で用意されているため、Git本体をパソコンにインストールしておけば、VSCode上からステージングやコミット、Pushなどの基本的なGit操作を実行できます。

また、VSCodeのGUIを使う方法だけでなく、統合ターミナルからGitコマンドを実行することも可能です。

Git Commitの基本的な流れは、次のようになります。

ファイルを編集
↓
ファイルを保存
↓
変更内容を確認
↓
ステージング
↓
コミット
↓
必要に応じてPush

特に重要なのは、「保存」「ステージング」「コミット」「Push」は、それぞれ別の操作だという点です。

ファイルを保存しただけではGitの履歴には記録されません。

また、コミットしただけではGitHubなどのリモートリポジトリには送信されません。

Gitを初めて使う場合は、それぞれの違いを理解しておくと操作しやすくなります。

VSCodeでGit Commitするための準備

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

VSCodeにはGitの操作画面がありますが、GitそのものがVSCodeだけで完結しているわけではありません。

通常は、パソコンにインストールされたGitをVSCodeが利用します。

まず、Gitが利用できる状態になっているか確認しましょう。

VSCode上部のメニューから「ターミナル」→「新しいターミナル」を開きます。

続いて、次のコマンドを実行します。

git --version

正常にGitがインストールされていれば、次のようにバージョン情報が表示されます。

git version 2.x.x

一方で、gitコマンドが見つからないというエラーが表示される場合は、Gitがインストールされていないか、PATHが正しく設定されていない可能性があります。

Gitをインストールした直後であれば、VSCodeを再起動すると認識されることがあります。

Gitのユーザー名とメールアドレスを設定する

Gitでは、誰がコミットしたのかを記録するために、ユーザー名とメールアドレスが使用されます。

まだ設定していない場合は、統合ターミナルから次のコマンドを実行します。

git config --global user.name "Your Name"

続いて、メールアドレスを設定します。

git config --global user.email "example@example.com"

設定内容は、次のコマンドで確認できます。

git config --global user.name
git config --global user.email

ここで設定するuser.nameやuser.emailは、コミットに記録される作成者情報です。

GitHubなどにログインするときのパスワードや認証情報とは別物です。

VSCodeでGitリポジトリを開く

すでにGit管理されているフォルダを開く

すでにGitリポジトリとして管理されているプロジェクトの場合は、そのフォルダをVSCodeで開くだけで基本的にはGitが認識されます。

上部メニューから「ファイル」→「フォルダーを開く」を選択し、対象のプロジェクトフォルダを開きます。

リポジトリとして認識されると、VSCode左側の「ソース管理」に変更されたファイルなどが表示されます。

Gitリポジトリを新しく作成する

まだGitで管理されていないフォルダの場合は、Gitリポジトリを初期化する必要があります。

VSCode左側のアクティビティバーから「ソース管理」を開きます。

WindowsやLinuxでは、一般的に次のショートカットでもソース管理を開けます。

Ctrl + Shift + G

Gitリポジトリになっていない場合は、「リポジトリを初期化」などのボタンが表示されます。

このボタンをクリックすると、そのフォルダでGit管理を開始できます。

統合ターミナルから初期化する場合は、次のコマンドを実行します。

git init

これによって.gitディレクトリが作成され、Gitリポジトリとして管理できる状態になります。

VSCodeのGUIからGit Commitする方法

ファイルを編集して保存する

まず、Gitで管理しているファイルを編集します。

例えば、次のようなファイルを変更します。

index.html
style.css
script.js

編集後はファイルを保存します。

VSCodeのソース管理画面には、変更されたファイルが表示されます。

ファイルの状態によって、次のような記号が表示されることがあります。

M = Modified
U = Untracked
D = Deleted

Mは既存ファイルが変更されている状態です。

Uは新しく作成され、まだGitで追跡されていないファイルです。

DはGitで管理されていたファイルが削除された状態を表します。

コミットする前に変更内容を確認する

コミットする前には、変更内容を確認することをおすすめします。

ソース管理画面に表示されているファイルをクリックすると、変更前と変更後を比較するDiff画面を開けます。

例えば、次のような変更があった場合です。

- <h1>Home</h1>
+ <h1>Welcome</h1>

このようにDiffを確認すると、どの行を削除し、どの行を追加したのかを把握できます。

コミット前の確認を習慣にしておくことで、不要なコードや一時的なデバッグ処理、意図しない設定変更などをコミットしてしまう可能性を減らせます。

コミットする変更をステージングする

Gitでは、次のコミットに含める変更を事前に選択できます。

この操作を「ステージング」と呼びます。

VSCodeのソース管理画面で「変更」に表示されているファイルへマウスカーソルを合わせると、「＋」ボタンが表示されます。

この「＋」をクリックすると、そのファイルがステージングされます。

ステージングされたファイルは、「ステージされている変更」などの項目へ移動します。

つまり、ステージングとは「この変更を次のコミットに含めます」と指定する操作だと考えると分かりやすいでしょう。

ステージングは必ず手動で必要とは限らない

Gitの基本的な考え方では、変更をステージングしてからコミットします。

ただし、VSCodeの設定や操作方法によっては、手動で「＋」を押してステージングしていなくても、コミット時に変更をステージするか確認される場合があります。

また、「Commit All」などを使用して、変更をまとめてコミットする方法もあります。

そのため、「必ず＋ボタンを押さなければコミットできない」というわけではありません。

ただし、どの変更を今回のコミットに含めるのかを明確にするという意味では、変更内容を確認してからステージングする方法が分かりやすく、安全です。

コミットメッセージを入力する

ステージングが完了したら、ソース管理画面の入力欄へコミットメッセージを入力します。

例えば、次のように入力します。

ログイン画面を追加

あるいは、次のようなメッセージでも構いません。

お問い合わせフォームの入力チェックを修正

コミットメッセージには、「そのコミットで何を変更したのか」が分かる内容を書くのがおすすめです。

例えば、次のようなメッセージは内容が分かりにくくなります。

修正

update

それよりも、次のように変更内容が具体的に分かる表現のほうが履歴を確認しやすくなります。

商品詳細ページのレイアウトを修正

Commitを実行する

コミットメッセージを入力したら、「Commit」ボタンをクリックします。

正常にコミットされると、その変更内容がGitのローカル履歴として記録されます。

ここで重要なのは、この時点では基本的にGitHubなどへ送信されていないという点です。

コミットはローカルリポジトリへ変更履歴を記録する操作です。

GitHubなどのリモートリポジトリへ反映したい場合は、別途Pushを行います。

VSCodeのターミナルからGit Commitする方法

git statusで状態を確認する

GUIではなく、VSCodeの統合ターミナルからGit Commitを実行することもできます。

まず、現在の変更状態を確認します。

git status

変更されたファイルや、新しく追加されたファイルなどが表示されます。

コミット前にはgit statusを実行しておくと、現在どのファイルが変更されているのかを確認できます。

git diffで変更内容を確認する

ステージングする前の具体的な変更内容を確認したい場合は、次のコマンドを使用できます。

git diff

これによって、まだステージングされていない変更内容を確認できます。

VSCodeのDiff画面と同じように、コミット前のチェックに役立ちます。

git addでステージングする

特定のファイルだけをステージングする場合は、次のように実行します。

git add index.html

複数のファイルを指定する場合は、次のように記述できます。

git add index.html style.css

現在のディレクトリ以下にある変更をまとめてステージングしたい場合は、次のコマンドを使用できます。

git add .

git add .は便利ですが、意図していない変更までまとめてステージングしてしまうことがあります。

そのため、実行前後にgit statusなどで対象ファイルを確認しておくと安全です。

git commitでコミットする

ステージングした変更をコミットする場合は、次のコマンドを実行します。

git commit -m "コミットメッセージ"

例えば、次のように使用します。

git commit -m "ログインフォームを追加"

これで、ステージングされていた変更がGitの履歴として記録されます。

VSCodeのGUIとGitコマンドは併用できる

GUIとターミナルは同じGitリポジトリを操作する

VSCodeのソース管理機能と統合ターミナルで実行するGitコマンドは、同じGitリポジトリを操作しています。

そのため、ターミナルから次のコマンドを実行した場合です。

git add .

その後にVSCodeのソース管理画面を見ると、対象のファイルがステージされた状態で表示されます。

逆に、VSCodeのGUIからファイルをステージングした後に次のコマンドを実行すると、その状態をターミナルから確認できます。

git status

GUIだけ、あるいはターミナルだけに統一する必要はありません。

例えば、「Diffの確認はVSCodeのGUI」「細かいGit操作はターミナル」といった使い分けも可能です。

ステージング後にファイルを再編集した場合

ステージされた内容と未ステージの内容が分かれることがある

Git初心者が特に混乱しやすいのが、ステージングした後に同じファイルを再び編集した場合です。

例えば、index.htmlを変更してステージングした後、さらにindex.htmlを編集したとします。

この場合、最初にステージングした変更と、その後に追加した変更は別の状態として扱われます。

そのため、同じindex.htmlが「ステージされている変更」と「変更」の両方に表示されることがあります。

これは異常ではありません。

ステージングした時点の変更内容だけが次のコミット対象になっており、その後に編集した部分はまだステージングされていないためです。

追加で編集した部分も同じコミットへ含めたい場合は、もう一度ステージングします。

ステージングを取り消す方法

VSCodeからUnstageする

誤ってステージングしてしまった場合は、ステージングだけを解除できます。

VSCodeの「ステージされている変更」から対象ファイルへマウスカーソルを合わせ、「－」などのUnstage操作を実行します。

これによって、そのファイルは「変更」の一覧へ戻ります。

ステージングを解除しても、ファイル自体に加えた編集内容は基本的に削除されません。

ターミナルからUnstageする

ターミナルからステージングを解除する場合は、次のようなコマンドを使用できます。

git restore --staged index.html

これはindex.htmlのステージングを解除する操作です。

作業中のファイルに加えた変更自体は保持されます。

ファイルの一部分だけコミットする方法

一部の変更だけをステージングできる

VSCodeでは、ファイル全体ではなく、変更した一部分だけをステージングすることもできます。

例えば、1つのファイルの中で次の2つの変更を同時に行ったとします。

バグ修正

デザイン変更

この2つが別々の目的を持つ変更であれば、別々のコミットへ分けたい場合があります。

VSCodeではDiff画面から特定の変更範囲を選択し、「Stage Selected Ranges」などを利用して一部分だけステージングできます。

これによって、1つのファイルに複数の変更が含まれている場合でも、目的ごとにコミットを分割しやすくなります。

Git CommitとGit Pushの違い

Commitはローカルの履歴を作る操作

Commitは、変更内容をローカルGitリポジトリの履歴として保存する操作です。

つまり、基本的には自分のパソコン内にあるGitリポジトリへ履歴を作成します。

Pushはリモートリポジトリへ送信する操作

Pushは、ローカルで作成したコミットをGitHubなどのリモートリポジトリへ送信する操作です。

したがって、基本的な流れは次のようになります。

ファイル編集
↓
保存
↓
Stage
↓
Commit
↓
Push

CommitとPushは別の操作なので、コミットに成功していても、PushしていなければGitHub上にはまだ反映されていない場合があります。

GitHubへコミットをPushする方法

git pushを実行する

すでにリモートリポジトリが設定されている場合は、統合ターミナルから次のコマンドを実行できます。

git push

初回Pushなどで上流ブランチが設定されていない場合は、状況に応じて次のようなコマンドを使用します。

git push -u origin main

mainの部分は利用しているブランチ名によって異なります。

VSCodeのGUIから「Push」を実行することもできます。

Sync ChangesとPushは完全に同じではない

VSCodeでは「Sync Changes」や「変更の同期」という操作が表示されることがあります。

Sync Changesは、単純にローカルのコミットをPushするだけの操作とは異なります。

基本的には、リモート側の変更を取り込んだうえで、ローカル側のコミットをリモートへ送信するための同期操作です。

そのため、「Push」と「Sync Changes」は完全に同じ意味ではありません。

コミット履歴を確認する方法

git logで確認する

ターミナルからコミット履歴を確認する場合は、次のコマンドを使用します。

git log

より簡潔に履歴を表示したい場合は、次のコマンドが便利です。

git log --oneline

例えば、次のように表示されます。

9ab12cd ログインフォームを追加
483be21 プロジェクトを作成

先頭部分はコミットを識別するためのハッシュ値です。

その後にコミットメッセージが表示されます。

VSCodeのSource Control Graphで確認する

現在のVSCodeでは、Source Control Graphからコミット履歴やブランチの状態を確認することもできます。

GUIでコミットの流れを確認したい場合に便利です。

直前のコミットを取り消す方法

Undo Last Commitを使用する

まだリモートリポジトリへ共有していない直前のコミットであれば、VSCodeから取り消せます。

ソース管理画面のメニューから、状況に応じて「Undo Last Commit」を利用します。

この操作を行うと、直前のコミットが履歴から外れます。

通常、そのコミットに含まれていた変更はステージされた状態で残るため、内容を修正してから再度コミットできます。

ただし、そのリポジトリで最初に作成したコミットなど、一部の状況では状態が異なることがあります。

共有済みのコミットでは注意する

すでにGitHubなどへPushし、他の開発者と共有しているコミットを取り消す場合は注意が必要です。

共有済みの履歴を不用意に書き換えると、ほかの開発者の作業に影響する可能性があります。

共有済みのコミットを打ち消す場合は、一般的にgit revertを使用して、以前の変更を取り消す新しいコミットを作成する方法があります。

VSCodeでGit Commitできない場合の対処法

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

まず、次のコマンドを実行します。

git --version

Gitのバージョンが表示されなければ、GitのインストールやPATH設定を確認します。

Gitリポジトリになっているか確認する

次のコマンドを実行します。

git status

例えば、次のようなエラーが表示される場合があります。

fatal: not a git repository

この場合は、現在のフォルダがGitリポジトリではない可能性があります。

新しくGit管理を開始するのであれば、必要に応じて次のコマンドを実行します。

git init

Gitのユーザー情報を確認する

コミット時に作成者情報に関するエラーが表示される場合は、Gitのユーザー名とメールアドレスが設定されているか確認します。

次のように設定できます。

git config --global user.name "Your Name"
git config --global user.email "example@example.com"

ステージング状態を確認する

コミットしたい変更が適切にステージングされているか確認するには、次のコマンドを使用します。

git status

必要であれば、次のようにステージングします。

git add index.html

または、現在位置以下の変更をまとめてステージングする場合は次のようにします。

git add .

分かりやすいコミットメッセージを書くコツ

何を変更したか分かるようにする

コミットメッセージは、後からGit履歴を確認したときに変更内容を把握するために重要です。

次のような曖昧なメッセージでは、内容が分かりにくくなります。

修正

変更

update

できるだけ、何を変更したのか具体的に書くとよいでしょう。

例えば、次のような表現です。

お問い合わせフォームの入力チェックを修正

商品詳細ページのレイアウトを調整

ログインフォームを追加

プロジェクト独自のルールがある場合は従う

開発プロジェクトによっては、コミットメッセージの書式が決められている場合があります。

例えば、次のような形式です。

feat: 商品検索機能を追加
fix: ログイン時のエラーを修正
docs: READMEを更新
refactor: ユーザー取得処理を整理

これは一例であり、すべてのプロジェクトで同じルールを使う必要はありません。

既存プロジェクトに参加している場合は、チームで定められているコミットルールを確認するのがおすすめです。

VSCodeでGit Commitするときの基本的な流れ

GUIでコミットする場合

VSCodeのGUIからGit Commitする場合は、次の流れを覚えておくと分かりやすいでしょう。

1. GitリポジトリをVSCodeで開く
↓
2. ファイルを編集する
↓
3. ファイルを保存する
↓
4. ソース管理を開く
↓
5. Diffで変更内容を確認する
↓
6. 必要な変更をステージングする
↓
7. コミットメッセージを入力する
↓
8. Commitを実行する
↓
9. 必要に応じてPushする

ターミナルからコミットする場合

ターミナルから操作する場合は、基本的に次の流れです。

git status
git diff
git add .
git commit -m "コミットメッセージ"
git push

ただし、git add .ですべてをまとめてステージングする必要はありません。

必要なファイルだけを指定してステージングすることもできます。

VSCodeでGit Commitするときに覚えておきたいポイント

VSCodeでGit Commitを利用するうえで、特に重要なのは「保存」「ステージング」「コミット」「Push」の違いを理解することです。

それぞれの役割を整理すると、次のようになります。

操作	主な役割
Save	編集した内容をファイルへ保存する
Stage	次のコミットに含める変更を選択する
Commit	変更内容をローカルGit履歴へ記録する
Push	ローカルのコミットをリモートリポジトリへ送信する

基本的には、変更内容を確認してからステージングし、分かりやすいコミットメッセージを付けてコミットするのがおすすめです。

また、コミットしただけではGitHubへ反映されないため、リモート側へ変更を共有したい場合はPushが必要です。

VSCodeではGUI操作とGitコマンドの両方を利用できるため、最初はソース管理画面から操作し、Gitに慣れてきたらターミナル操作も組み合わせるとよいでしょう。

特に、コミット前にDiffやgit statusを確認する習慣を付けておくと、不要なファイルや意図しない変更をコミットしてしまうリスクを減らせます。

以上、VSCodeでGit Commitを実行する方法についてでした。

最後までお読みいただき、ありがとうございました。