変更のステージングとコミット
明確な説明とともに集中的なコミットを作成することは、コードベースの履歴を自分やチームが理解するのに役立ちます。VS Code は、ステージングされた変更やコミットの作成のために統合された Git ツールを提供し、含める変更を細かく制御できます。
この記事では、Git の 2 ステップ プロセスから、コミット メッセージの AI アシスタンスの使用、コミット前の変更の確認まで、VS Code でのステージングとコミットのワークフローについて説明します。
Git のワークフロー
Git は、作業を保存するためにステージングとコミットの 2 ステップ プロセスを使用します。ファイルを変更すると、Git はこれらの変更を追跡しますが、次のコミットに自動的に含めるわけではありません。ステージングにより、各コミットに含める変更を選択できます。
ステージングは、作業のスナップショットを準備するようなものです。包括的なコミットのためにすべての変更を一度にステージングするか、特定のファイルや個々の行をステージングして、後でレビューおよび理解しやすく、集中的で論理的なコミットを作成できます。
変更の確認
ソース管理ビュー (⌃⇧G (Windows、Linux Ctrl+Shift+G)) は、Git リポジトリの変更を管理するための中心的なハブです。変更は、ステージングの状態に基づいて 2 つのセクションに整理されます。
- 変更: まだコミットのためにステージングされていない、変更、追加、または削除されたすべてのファイルが一覧表示されます。
- ステージされた変更: ステージングされ、コミットの準備ができているファイルが一覧表示されます。
変更されたファイルには、変更の種類を示すアイコン (「U」(未追跡)、「M」(変更済み)、「D」(削除済み)) が付いていることに注意してください。この変更インジケーターは、エクスプローラー ビューおよび変更されたファイルの編集タブのタイトルにも表示されます。
アクティビティ バーのソース管理アイコンにも、影響を受けるファイルの数を示すバッジが表示され、コミットされていない変更の概要をすばやく確認できます。
変更のリストは、フラット構造またはツリー構造で表示できます。ソース管理ビューのツールバーの **その他のアクション** (...) > **表示と並べ替え** > **ツリー/リストとして表示** オプションでこれを切り替えます。
エディターのガターインジケーター
ファイル内の変更をすばやく特定できるように、VS Code は行番号の横のエディターのガターに、最後のコミット以降に追加、変更、または削除された行を示すインジケーターを表示します。これらのインジケーターは、ミニマップにも表示されます。
ガターの色は変更の種類を示します。
- 緑色のバー: 最後のコミット以降に追加された新しい行。
- 青色のバー: 最後のコミット以降に変更された行。
- 赤い三角形: 削除された行 (削除箇所の真上に表示)。
ガターインジケーターを選択すると、変更のインライン差分プレビューが表示されます。これらのプレビューから、対応するボタンを使用して変更をステージングまたは元に戻すことができます。
これらの設定でガターインジケーターの動作をカスタマイズできます。
- scm.diffDecorations: 差分デコレーションが表示されるタイミングを制御します (すべて、ガター、概要、ミニマップ、またはなし)。
- scm.diffDecorationsGutterAction: ガターメニューで利用可能なアクションを制御します。
- scm.diffDecorationsGutterPattern: ガターデコレーションに使用されるパターンをカスタマイズします。
- scm.diffDecorationsGutterVisibility: ガターデコレーションが表示されるタイミングを制御します (常にまたはホバー時)。
- scm.diffDecorationsGutterWidth: ガターインジケーターの幅を設定します。
- scm.diffDecorationsIgnoreTrimWhitespace: 差分デコレーションの空白文字の変更を無視します。
変更のステージング
変更をステージングすることで、次のコミットに追加する準備が整います。より細かく制御するために、ファイル全体または特定の行やコードブロックをステージングできます。
**変更**リストでファイルをホバーし、**+** (プラス) アイコンを選択するか、ファイルを右クリックして **変更をステージ** を選択して、個々のファイルをステージングします。ファイルを **変更** セクションからドラッグして **ステージされた変更** セクションにドロップしてステージングすることもできます。
ツリービューを使用している場合、フォルダ自体をステージングすることでフォルダ全体をステージングできます。変更されたすべてのファイルを一度にステージングするには、**変更**ヘッダーをホバーし、**+** (プラス) アイコンを選択します。
コマンド パレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) で、より専門的なステージング アクションが利用可能です。「Git: Stage」と入力すると、ファイルのステージングに関するオプションが表示されます。
特定の行またはコードブロックをステージングする
ファイル全体をステージングする代わりに、ファイルの一部をステージングすることもできます。部分ステージングにより、集中的なコミットを作成できます。たとえば、同じファイルで書式設定の変更とバグ修正を行った場合、それらを適切なコミット メッセージで個別にコミットできます。
差分エディターから部分ステージングを実行できます。
-
**変更**リストでファイルを選択して、差分エディターを開きます。
-
ステージしたい行を選択します。
-
差分エディターの選択箇所の横にあるガターの **ステージ** ボタンを使用して、その行のみをステージングします。
選択範囲を右クリックして **選択範囲をステージ** を選択するか、コマンド パレットから **Git: 選択範囲をステージ** を実行することもできます。
変更のステージ解除
**ステージされた変更**リストでファイルをホバーし、**-** (マイナス) アイコンを選択するか、右クリックして **変更のステージ解除** を選択して、ステージングからファイルを削除します。ファイルは、変更を失うことなく **変更** セクションに戻ります。
同様に、差分エディターから選択箇所の横にあるガターの **ステージ解除** ボタンを使用して、特定の行またはコードブロックのステージを解除することもできます。
変更のコミット
変更をステージングしたら、コミットを作成してローカル リポジトリに保存できます。コミットを作成するには、変更を説明するコミット メッセージを記述する必要があります。このメッセージは、コミット履歴を確認する際に、自分や他の人がコミットの目的を理解するのに役立ちます。
コミット メッセージの作成
コミット メッセージは、コミットしている変更を説明し、他の人 (および将来の自分) がコミットの目的を理解するのに役立ちます。ソース管理ビューの上部にあるコミット メッセージ入力ボックスにメッセージを入力し、**コミット** を選択してステージングされた変更を保存します。
コミット メッセージの作成を支援するために、コミット メッセージ入力ボックスのスパークル アイコン を選択して、ステージングされた変更に基づいてメッセージを生成するように AI を使用します。カスタム指示を作成して、AI がメッセージを生成するようにガイドできます。
複数段落のコミット メッセージを作成したい場合は、入力ボックスの代わりにフル エディターを使用できます。この設定は、git.useEditorAsCommitInput 設定で有効にします。コミット メッセージなしで変更をコミットすると、メッセージを作成するための新しいエディター タブが開きます。
以前のコミット メッセージを循環するには、コミット メッセージ入力ボックスにフォーカスがある状態で、↑ (Windows、Linux Up) と ↓ (Windows、Linux Down) を押します。
変更のコミット
ソース管理ビューの **コミット** ボタンを選択して、**ステージされた変更** セクションの変更をコミットします。ステージ解除された変更は、将来のコミットのために **変更** セクションに残ります。
すべての変更 (ステージング済みとステージ解除済み) を一度にコミットするには、**その他のアクション** (...) メニューを選択し、**コミット** > **すべてコミット** を選択します。これにより、変更されたすべてのファイルが一度にステージングされ、コミットされます。
前のコミットの修正
最新のコミットを変更する必要がある場合は、新しいコミットを作成する代わりに修正できます。これは、忘れた変更を追加したり、コミット メッセージを修正したりする場合に便利です。
コミットを修正するには、**コミット** ボタンのドロップダウンを選択して **コミット (修正)** を選択するか、**その他のアクション** (...) メニューから **ステージされたコミット (修正)** オプションを使用します。
共有リポジトリにプッシュされていないコミットのみを修正してください。プッシュされたコミットを修正すると、履歴が書き換えられ、他の共同作業者に問題が発生する可能性があります。
最後のコミットの取り消し
最後のコミットを取り消す必要がある場合は、ソース管理ビューの **その他のアクション** (...) メニューを選択し、**コミット** > **最後のコミットの取り消し** を選択します。これにより、最後のコミットがブランチ履歴から削除されますが、そのコミットのすべての変更は **ステージされた変更** セクションにステージングされたままになります。
変更の破棄
コミットされていない変更を完全に破棄し、ファイルを最後のコミット状態に戻すには、ソース管理ビューでファイルを右クリックして **変更の破棄** を選択します。または、**変更** リストでファイルをホバーし、破棄アイコン (左を指す弧状の矢印) を選択します。
破棄された変更は、ごみ箱 (Windows) またはゴミ箱 (macOS/Linux) に移動され、必要に応じて復元する機会が与えられます。
差分エディターでの変更の確認
差分エディターは、ファイル内の変更内容を表示します。元のバージョンと変更されたバージョンのサイドバイサイド比較を表示します。差分エディターは、サイドバイサイド表示またはインライン表示で開くことができます。
差分エディターを開くには、ソース管理ビューの **変更** または **ステージされた変更** リストでファイルを選択して、そのファイルと最後のコミット済みバージョンの差分を表示します。
大きなファイルの場合、差分エディターのツールバーにある **変更されていない領域を折りたたむ** ボタンを選択して、変更されていないセクションを折りたたみます。これにより、実際の変更に集中しやすくなります。また、**次の変更** および **前の変更** ボタンを使用して、変更間をすばやく移動することもできます。
サイドバイサイド表示とインライン表示
デフォルトでは、差分エディターはサイドバイサイド比較を表示し、左側に元のファイル、右側に変更内容を表示します。
差分エディターのツールバーにある **その他のアクション** (...) > **インライン表示** を選択してインライン表示に切り替えると、1 つのエディター内で変更を確認できます。
設定 diffEditor.renderSideBySide で、好みのデフォルト表示を構成します。
差分エディターからのステージングと元に戻し
差分エディターには、各変更の横に **ステージ** と **元に戻し** ボタンのあるガターが含まれています。これらのボタンを使用すると、
- 差分ビューから直接、個々のコードブロックまたは行をステージングする
- 他の変更に影響を与えることなく、特定の変更を元に戻す
差分エディターで特定の行を選択した場合、ボタンは選択範囲のみに作用します。
設定 diffEditor.renderGutterMenu で差分エディターのガターを非表示にできます。
アクセシブルな差分ビューア
スクリーン リーダー ユーザーのために、VS Code はアクセシブルな差分ビューアを提供し、変更を統一パッチ形式で表示します。アクセシブルな差分ビューアを開くには、差分エディターのツールバーにある **その他のアクション** (...) メニューを使用して **アクセシブルな差分ビューアを開く** を選択するか、F7 キーボード ショートカットを使用します。
**次の差分に移動** (F7) および **前の差分に移動** () コマンドを使用して変更を移動します。
AI を使ったコード変更の確認
VS Code を使用すると、コミットする前に AI アシスタントを使用してコミットされていない変更を確認できます。これらの AI 機能は、手動のコード レビューを補完し、開発ワークフローの早い段階で問題を検出するのに役立ちます。
AI を活用したコード レビューをコミットされていない変更に対して実行するには、
-
ソース管理ビューの **コード レビュー** ボタンを選択します。
-
VS Code が変更を分析し、レビュー コメントと提案を生成します。これらは、エディターにオーバーレイ コメントとして表示されます。
Git blame 情報
VS Code は、エディター内およびステータス バーに Git blame 情報をインラインで表示できます。ステータス バー項目またはエディターのインライン ヒントをホバーすると、詳細な Git blame 情報が表示されます。
Git blame 情報を有効または無効にするには、**Git: Git Blame Editor Decoration の切り替え** および **Git: Git Blame Status Bar Item の切り替え** コマンドを使用するか、これらの設定を構成します。
エディターおよびステータス バーに表示されるメッセージの形式は、git.blame.editorDecoration.template および git.blame.statusBarItem.template 設定でカスタマイズできます。最も一般的な情報には変数が使用できます。
たとえば、次のテンプレートは、コミットの件名、作成者の名前、および作成日から現在までの相対的な日付を表示します。
{
"git.blame.editorDecoration.template": "${subject}, ${authorName} (${authorDateAgo})"
}
エディター装飾の色を調整するには、git.blame.editorDecorationForeground テーマカラーを使用します。
コミット履歴のグラフ表示
ソース管理ビューのソース管理グラフは、コミット履歴とブランチの関係の視覚的な表現を提供します。リモート リポジトリが構成されている場合、リモートに対して何コミット進んでいるか、または遅れているかを確認できます。
グラフには、現在のブランチ、現在のブランチのアップストリーム ブランチ、およびオプションのベース ブランチが含まれます。グラフのルートは、これらのブランチの共通の祖先です。
グラフは次の機能を提供します。
- エントリを選択すると、そのコミットで変更されたファイルが表示されます。**変更を開く** アクションを選択すると、コミットの差分がエディターに表示されます。
- コミットを右クリックすると、チェックアウト、チェリーピック、チャットへのコンテキストとしての追加などのアクションを実行できます。
- ファイルを選択すると、そのファイルの差分がエディターに表示されます。
- コミットを選択し、コミットを右クリックして **比較**、**リモートと比較**、または **マージベースと比較** を選択して、別のブランチまたはタグと比較します。
グラフ ビューのツール バーにあるアクションを使用して、ブランチの選択、フェッチ、プル、プッシュ、および同期の変更を行います。
ファイル履歴のタイムライン表示
ファイル エクスプローラーの下部にあるタイムライン ビューは、ファイルのイベント履歴を視覚化するための統合ビューです。たとえば、Git コミットまたはローカル ファイルの保存をタイムライン ビューで表示できます。
タイムライン ビューの詳細をご覧ください。
次のステップ
- ブランチとワークツリー - ブランチ管理、Git ワークツリー、および stash 操作について学習します。
- リポジトリとリモート - リモート リポジトリとのクローン、公開、同期について学習します。
- マージ競合 - ブランチをマージする際の競合を処理します。
- GitHub との連携 - プル リクエストと課題の操作方法を学習します。
- VS Code の Copilot - AI を活用したその他の開発機能を発見します。