変更のステージングとコミット

明確な説明と共に焦点を絞ったコミットを作成することは、あなた自身やチームがコードベースの履歴を理解する助けとなります。VS Code は、変更のステージングやコミット作成のための統合された Git ツールを提供しており、含める変更を細かく制御できます。

この記事では、VS Code におけるステージングとコミットのワークフローについて、Git の2段階プロセスから、コミットメッセージへの AI 活用、コミット前の変更確認までを解説します。

Git ワークフロー

Git は「ステージング」と「コミット」という2段階のプロセスを使用して作業を保存します。ファイルを変更した際、Git はその変更を追跡しますが、自動的に次回のコミットには含めません。ステージングにより、各コミットにどの変更を含めるかを選択できます。

ステージングとは、作業のスナップショットを準備するようなものだと考えてください。すべての変更を一度にステージングして包括的なコミットを作成することも、特定のファイルや個々の行単位でステージングして、後からレビューや理解がしやすい、焦点を絞った論理的なコミットを作成することも可能です。

変更を表示

ソース管理ビュー (⌃⇧G (Windows, Linux Ctrl+Shift+G)) は、Git リポジトリ内の変更を管理するための中心的なハブです。変更は、ステージング状況に基づいて2つのセクションに整理されます。

変更: まだステージングされていない、変更、追加、または削除されたすべてのファイルを一覧表示します
ステージング済みの変更: ステージング済みで、コミットする準備が整ったファイルを一覧表示します

Screenshot of the Source Control view showing a modified and new file under Changes.

変更されたファイルの横には、「U」(追跡対象外)、「M」(変更済み)、「D」(削除済み) のアイコンが表示され、変更の種類を示していることに注意してください。この変更インジケーターは、エクスプローラービューや変更されたファイルのエディタータブのタイトルにも表示されます。

アクティビティバーのソース管理アイコンにも、影響を受けたファイルの数を示すバッジが表示され、未コミットの変更を素早く概観できます。

ヒント

変更のリストは、フラット形式またはツリー形式で表示できます。これを切り替えるには、ソース管理ビューのツールバーにある その他のアクション (...) > 表示と並べ替え > ツリー/リストとして表示 を使用します。

エディターのガターインジケーター

ファイル内の変更を素早く識別できるように、VS Code はエディターの行番号の横にガターインジケーターを表示し、前回のコミット以降に追加、変更、削除された行を表現します。これらのインジケーターはミニマップでも確認できます。

ガターの色は変更の種類を示します

緑のバー: 前回のコミット以降に追加された新しい行
青のバー: 前回のコミット以降に変更された行
赤い三角形: 削除された行（削除箇所のすぐ上に表示されます）

ガターインジケーターを選択すると、変更のインライン差分プレビューが表示されます。このプレビューから、対応するボタンを使用して直接変更をステージングしたり、元に戻したりすることができます。

Screenshot of editor gutter indicators showing line changes and a hover showing Git blame information.

以下の設定でガターインジケーターの動作をカスタマイズできます

scm.diffDecorations VS Code で開く VS Code Insiders で開く : 差分の装飾をいつ表示するかを制御します（all、gutter、overview、minimap、または none）
scm.diffDecorationsGutterAction VS Code で開く VS Code Insiders で開く : ガターメニューで利用可能なアクションを制御します
scm.diffDecorationsGutterPattern VS Code で開く VS Code Insiders で開く : ガター装飾に使用されるパターンをカスタマイズします
scm.diffDecorationsGutterVisibility VS Code で開く VS Code Insiders で開く : ガター装飾の表示タイミングを制御します（always または on hover）
scm.diffDecorationsGutterWidth VS Code で開く VS Code Insiders で開く : ガターインジケーターの幅を設定します
scm.diffDecorationsIgnoreTrimWhitespace VS Code で開く VS Code Insiders で開く : 差分装飾において空白文字の変更を無視します

変更のステージング

変更をステージングすると、次回のコミットに追加する準備が整います。ファイル全体をステージングすることも、特定の行やコードブロックを選択してよりきめ細かく制御することも可能です。

個別のファイルをステージングするには、変更リストでそのファイルにマウスホバーし、+（プラス）アイコンを選択するか、ファイルを右クリックして 変更のステージング を選択します。また、変更セクションからファイルをドラッグし、ステージング済みの変更セクションにドロップすることでもステージングできます。

Screenshot of staging changes in the Source Control view.

ツリービューを使用している場合は、フォルダー自体をステージングすることでフォルダー全体をステージングできます。変更されたすべてのファイルを一度にステージングするには、変更ヘッダーにマウスホバーし、+（プラス）アイコンを選択します。

コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) では、より専門的なステージングアクションが利用可能です。「Git: Stage」と入力すると、ファイルのステージングオプションが表示されます。

特定の行やコードブロックをステージングする

ファイル全体をステージングする代わりに、ファイル内の特定の部分だけをステージングすることもできます。部分的なステージングにより、焦点を絞ったコミットを作成できます。例えば、同じファイル内でフォーマットの変更とバグ修正の両方を行った場合、それらを適切なコミットメッセージと共に別々にコミットすることが可能です。

差分エディターから部分的なステージングを実行できます

変更リストでファイルを選択して差分エディターを開きます
ステージングしたい行を選択します
選択範囲の横にある差分エディターのガターにある ステージ ボタンを使用して、その行だけをステージングします

また、選択範囲を右クリックして 選択範囲をステージング を選ぶか、コマンドパレットから Git: Stage Selected Ranges を実行することもできます。

変更のステージングを解除する

ステージングからファイルを削除するには、ステージング済みの変更リスト内のファイルにマウスホバーし、-（マイナス）アイコンを選択するか、右クリックして ステージングを解除 を選択します。ファイルは変更を維持したまま、変更セクションに戻ります。

Screenshot of unstaging changes in the Source Control view.

同様に、差分エディターのガターにある ステージ解除 ボタンを使用して、特定の行やコードブロックのステージングを解除することもできます。

変更をコミット

変更をステージングしたら、コミットを作成してローカルリポジトリに保存できます。コミットを作成するには、変更内容を説明するコミットメッセージを記述する必要があります。このメッセージは、コミット履歴を確認する際に、あなたや他の人がコミットの目的を理解する助けとなります。

コミットメッセージを記述する

コミットメッセージは、コミットする変更内容を説明し、他の人（および将来の自分）がコミットの目的を理解するのに役立ちます。ソース管理ビュー上部のコミットメッセージ入力ボックスにメッセージを入力し、コミットを選択してステージングされた変更を保存します。

コミットメッセージの作成を支援するため、入力ボックスにあるきらめきのアイコンを選択すると、AI がステージングされた変更に基づいてメッセージを生成します。カスタム指示を作成して、AI によるメッセージ生成をガイドすることもできます。

Screenshot of generating a commit message with AI.

複数の段落からなるコミットメッセージを書きたい場合は、入力ボックスの代わりにフルエディターを使用できます。 git.useEditorAsCommitInput VS Code で開く VS Code Insiders で開く設定でこれを有効にします。コミットメッセージなしで変更をコミットしようとすると、新しいエディタータブが開き、そこでメッセージを記述できます。

ヒント

以前のコミットメッセージを順番に表示するには、コミットメッセージ入力ボックスにフォーカスがある状態で ↑ (Windows, Linux Up) および ↓ (Windows, Linux Down) キーを押します。

コミットメッセージにエディターを使用する

コミットメッセージ入力ボックスを使用する代わりに、フルエディタータブでコミットメッセージを記述できます。これは、長いメッセージが必要な場合や、より広いスペースでメッセージを構成したい場合に便利です。

ソース管理ビューで、入力ボックスにメッセージを入力せずに コミット を選択します。すると、COMMIT_EDITMSG という名前の新しいエディタータブが開きます。
エディター内でコミットメッセージを記述します。必要に応じて、複数の段落を使用したり、メッセージを整形したりできます。
コミットメッセージを確定してコミット操作を完了するには、エディタータブを閉じるか、エディター内の コミット を選択します。
コミット操作をキャンセルするには、テキストエディターの内容を消去してタブを閉じるか、エディター内の キャンセル (X) を選択します。

コミットメッセージにエディターを使用する機能を無効にしてクイック入力コントロールに戻すには、 git.useEditorAsCommitInput VS Code で開く VS Code Insiders で開く設定を無効にします（変更を反映するには VS Code を再起動してください）。

統合ターミナルで実行される git commit コマンドに対しても同様のフローを使用するには、 git.terminalGitEditor VS Code で開く VS Code Insiders で開く設定を有効にします（変更を反映するにはターミナルを再起動してください）。

AI 共著者（Co-author）の付与

AI 支援によって生成されたコードをコミットする際、VS Code はコミットメッセージに Co-authored-by: Git トレーラーを自動的に追加できます。これにより、あなたやチームはどのコミットに AI が生成した貢献が含まれているかを追跡できます。

git.addAICoAuthor VS Code で開く VS Code Insiders で開く設定を、以下のいずれかの値で構成します。

chatAndAgent (デフォルト): Copilot Chat またはエージェントモードを介して生成されたコードをコミットする際、トレーラーを追加します
all: インライン補完を含む、すべての AI 生成コードに対してトレーラーを追加します
off: 共著者トレーラーは追加されません

トレーラーは、VS Code 内からコミットした場合のみ追加されます。外部の Git ツールやコマンドラインで行われたコミットにはトレーラーは含まれません。

コミットトレーラーからの共著者情報は、Git blame ホバーツールチップにも表示されます。

変更のコミット

ソース管理ビューの コミット ボタンを選択すると、ステージング済みの変更セクションにある変更がコミットされます。ステージングされていない変更は、将来のコミットのために変更セクションに残ります。

すべての変更（ステージング済みおよびステージングされていないもの）を一度にコミットするには、その他のアクション (...) メニューを選択し、コミット > すべてコミット を選択します。これにより、変更されたすべてのファイルが1ステップでステージングおよびコミットされます。

前回のコミットを修正する（Amend）

直前のコミットを変更する必要がある場合は、新しいコミットを作成する代わりにコミットを修正できます。これは、忘れ物やコミットメッセージの修正に便利です。

コミットを修正するには、コミット ボタンのドロップダウンから コミット (Amend) を選択するか、その他のアクション (...) メニューから ステージングされた変更をコミット (Amend) オプションを使用します。

注意

共有リポジトリにプッシュされていないコミットのみを修正してください。すでにプッシュされたコミットを修正すると履歴が書き換わり、他の共同作業者に問題を引き起こす可能性があります。

最後のコミットを取り消す

最後のコミットを取り消す必要がある場合は、ソース管理ビューの その他のアクション (...) メニューから、コミット > 最後のコミットを元に戻す を選択します。これにより、最後のコミットがブランチ履歴から削除されますが、そのコミットによる変更はすべて ステージング済みの変更セクションに残ります。

変更を破棄する

未コミットの変更を完全に破棄してファイルを最後のコミット状態に戻すには、ソース管理ビューでファイルを右クリックし、変更を破棄 を選択します。または、変更リスト内のファイルにマウスホバーし、破棄アイコン（左を指す曲がった矢印）を選択します。

破棄された変更はゴミ箱（Windows）またはゴミ箱（macOS/Linux）に移動されるため、必要に応じて復元するチャンスがあります。

差分エディターでの変更確認

差分エディターは、ファイル内の変更内容を示します。オリジナル版と変更版を並べて比較表示します。差分エディターは、サイドバイサイド（左右比較）またはインライン形式で開くことができます。

差分エディターを開くには、ソース管理ビューの変更または ステージング済みの変更 リストから任意のファイルを選択し、最後のコミットバージョンとの差分を確認します。

ヒント

大きなファイルの場合は、差分エディターのツールバーにある 変更のない領域を折りたたむ ボタンを選択して、未変更のセクションを折りたたむことができます。これにより、実際の変更点に集中しやすくなります。また、次の変更 および 前の変更 ボタンを使用して、変更箇所を素早く移動することも可能です。

サイドバイサイド vs インライン表示

デフォルトでは、差分エディターは左側にオリジナルファイル、右側に変更後のファイルを表示するサイドバイサイド表示になります。

Screenshot of the Diff Editor showing side-by-side changes between file versions.

インライン表示に切り替えるには、差分エディターのツールバーで その他のアクション (...) > インライン表示 を選択して、1つのエディター内で変更を確認します。

Screenshot of the Diff Editor showing inline changes between file versions.

好みのデフォルト表示を設定するには、 diffEditor.renderSideBySide VS Code で開く VS Code Insiders で開く設定を使用します。

差分エディターからのステージングと元に戻す

差分エディターのガターには、各変更の横に ステージ および 元に戻す ボタンが含まれています。これらのボタンを使用すると、以下のことができます。

差分ビューから直接、個別のコードブロックや行をステージングする
他の変更に影響を与えずに特定の変更を元に戻す

差分エディターで特定の行を選択した場合、ボタンは選択範囲に対してのみ機能します。

diffEditor.renderGutterMenu VS Code で開く VS Code Insiders で開く設定で、差分エディターのガターを非表示にできます。

アクセシブル差分ビューアー

スクリーンリーダーユーザーのために、VS Code は変更を統合パッチ形式で提示する「アクセシブル差分ビューアー」を提供しています。これを開くには、差分エディターツールバーの その他のアクション (...) メニューから アクセシブル差分ビューアーを開く を選択するか、キーボードショートカット F7 を使用します。

次の差異に移動 (F7) および 前の差異に移動 () コマンドを使用して、変更箇所を移動します。

AI によるコード変更の確認

VS Code では、AI の支援を受けて、コミット前に未コミットの変更をレビューできます。これらの AI 機能は手動コードレビューを補完し、開発ワークフローの早期段階で問題をキャッチするのに役立ちます。

AI を活用したコードレビューを実行するには

ソース管理ビューの コードレビュー ボタンを選択します
VS Code が変更を分析し、レビューコメントや提案を生成します。これらはエディター内のオーバーレイコメントとして表示されます

Git blame 情報

VS Code は Git blame 情報をエディター内およびステータスバーにインラインで表示できます。ステータスバーの項目やエディターのインラインヒントにマウスホバーすると、コミットに含まれる共著者トレーラーを含む、詳細な Git blame 情報が表示されます。AI 共著者付与を有効にしている場合、AI によって生成されたコードを含むコミットの blame ツールチップには、AI 共著者が表示されます。

Git blame 情報を有効または無効にするには、Git: Toggle Git Blame Editor Decoration および Git: Toggle Git Blame Status Bar Item コマンドを使用するか、以下の設定を構成します。

git.blame.statusBarItem.enabled VS Code で開く VS Code Insiders で開く (デフォルトで有効)
git.blame.editorDecoration.enabled VS Code で開く VS Code Insiders で開く (エディター内でのホバー情報を無効にするには、 git.blame.editorDecoration.disableHover VS Code で開く VS Code Insiders で開く設定を使用します)

Git blame 情報の表示時に空白文字の変更を無視するには、 git.blame.ignoreWhitespace VS Code で開く VS Code Insiders で開く設定を有効にします。

エディターおよびステータスバーに表示されるメッセージの形式は、 git.blame.editorDecoration.template VS Code で開く VS Code Insiders で開くおよび git.blame.statusBarItem.template VS Code で開く VS Code Insiders で開く設定でカスタマイズできます。最も一般的な情報については変数を使用できます。

例えば、次のテンプレートではコミットの件名、作成者名、作成者による現在の相対時間を表示します。

{
  "git.blame.editorDecoration.template": "${subject}, ${authorName} (${authorDateAgo})"
}

エディター装飾の色を調整するには、git.blame.editorDecorationForeground テーマカラーを使用します。

コミット履歴のグラフ表示

ソース管理ビューのソース管理グラフは、コミット履歴とブランチ関係の視覚的表現を提供します。リモートリポジトリが設定されている場合、リモートに対して何コミット進んでいるか、あるいは何コミット遅れているかを確認できます。

グラフには、現在のブランチ、現在のブランチの上流ブランチ、およびオプションのベースブランチが含まれます。グラフのルートは、これらのブランチの共通の先祖です。

Screenshot showing the Source Control Graph.

グラフは以下の機能を提供します

エントリを選択して、そのコミットで変更されたファイルを確認します。変更を開く アクションを選択して、エディターでコミットの差分を確認します。
コミットを右クリックして、チェックアウト、チェリーピック、チャットのコンテキストとしての追加などのアクションを実行します。
ファイルを選択して、エディターでそのファイルの差分を確認します。
コミットを選択し、右クリックして比較、リモートと比較、または マージベースと比較 を選択することで、別のブランチやタグと比較します。

グラフビューのツールバーにあるアクションを使用して、ブランチの選択、フェッチ、プル、プッシュ、変更の同期を行います。

ファイル履歴のタイムライン表示

ファイルエクスプローラーの下部からアクセスできるタイムラインビューは、ファイルのイベント履歴を視覚化するための統合ビューです。例えば、Git コミットやローカルのファイル保存をタイムラインビューで確認できます。

Screenshot of the timeline view showing file commit history.

タイムラインビューについてさらに詳しく。

次のステップ

ブランチと作業ツリー - ブランチ管理、Git 作業ツリー、スタッシュ操作について学習
リポジトリとリモート - リモートリポジトリのクローン、公開、同期について学習
マージ競合 - ブランチをマージする際の競合を処理します。
GitHub を使用する - プルリクエストと Issue の扱い方について学習
VS Code での Copilot - AI を活用したその他の開発機能を発見

5/28/2026