ブログ

HOME
ブログ
VSCodeでのGit操作方法メモ

2024年12月11日 / 最終更新日時 : 2025年12月18日 @yuuji_mimura ブログ

VSCodeでのGit操作方法メモ

新規にアプリを開発する場合は、何らかのソース管理を行う必要があります。そこで今回は現在のデファクトスタンダードと思われる「Git」および「GitHub」の操作方法をメモとして残します。すべて読むのは大変なので、ご興味のある項目だけ読めるように目次を付けました。Gitには様々な機能がありますが、個人で開発する場合に最低限必要と思われる機能に絞りました。学習が進むにつれ記事が増える可能性があります。

今回の記事を作成するにあたり、以下の講座で勉強させていただきました。

Udemy

3分動画でしっかり学ぶGit/GitHub入門～プロへの道！業務で使えるバージョン管理ブートキャンプ

1 前準備 (Gitのインストールなど)
2 Gitの初期設定を行います
3 リポジトリを作成します
4 リポジトリで管理するファイルを追加 (ステージング) します
5 リポジトリにファイルを格納 (コミット) します
6 コミットの取り消し
- 6.1 ・直前のコミットを削除するには
- 6.2 ・もっと前のコミットを削除するには (Reset)
7 変更箇所の確認・修正方法
8 外部ツール (WinMerge)を使用した変更箇所の確認・修正方法
9 外部ツール (Meld)を使用した変更箇所の確認・修正方法
10 ブランチを作成します
11 ブランチを切り替える方法
- 11.1 ・変更作業中に別のブランチに切り替えるには (スタッシュ)
12 ブランチをマージします
13 ブランチを削除します
14 GitHubにアップロード (プッシュ) します
15 GitHubからダウンロード (プル) します
16 その他
- 16.1 ・Git Graph メニューが表示されない場合

前準備 (Gitのインストールなど)

Windows上でGitを使用する場合は、こちらのリンクからインストーラーをダウンロードしてインストールします。インストール方法はこちらのサイト様等をご参照ください。WSL2(Ubuntu)の場合は最初からインストールされています。インストールされていない場合はルート権限で「apt install git」と入力するか、ユーザー権限で「sudo apt install git」と入力するとインストールできます。

次に、こちらの記事等を参考にVisual Studio Code（VSCode)をインストールします。WSL2上のファイルも管理したい場合は、「Remote SSH」プラグインのインストールとホスト(WSL2)への接続設定も行います。

また記事の中でもご紹介していますが、「Git Graph」というプラグインをインストールしておくと便利かもしれません。

VSCodeの日本語表示について

VSCodeは初期状態では英語表示なので「Japanese Language Pack」プラグインで日本語化していますが、WSL2等のホストにリモート接続するとGit関連のメニューが英語表記になるようです。

今回の記事は日本語メニューの操作方法を残したいのでWindows上で操作しています。WSL2(Ubuntu)上でも操作方法は同じでした。

Gitの初期設定を行います

VSCodeを起動して、Ctrl + @キーを押して「ターミナル」ウィンドウを表示します。

表示されたウィンドウに以下のようにコマンドを入力して、Gitの基本情報(ユーザー名とメールアドレス)を設定します。ご自身の状況に応じて修正してください。この設定は初回のみ行います。

git config --global user.name "Yuuji Mimura"
git config --global user.email mail@mimura-soft.jp

リポジトリを作成します

ソース管理したいフォルダをVSCodeで開きます。その後左側の「ソース管理」ボタンを押して表示された画面で「リポジトリを初期化する」ボタンを押すとリポジトリ(.gitフォルダ)が作成されます。(ターミナルウィンドウで「git init」と入力しても作成可能です。)

リポジトリが作成されると、画面の左下に最初のブランチ(main)が表示されます。

ブランチ名を変更したい場合は、Ctrl + Shift + Pキーと入力すると、上部の検索欄が「コマンドパレット」と呼ばれる入力欄に切り替わりますので、「rename」と入力します。表示された「Git:ブランチ名の変更…」を選択するとブランチ名が変更できます。(直接検索欄に「>rename」と入力しても表示されるようです。)　初期ブランチ名がmaster等になっていた場合に使用するといいかもしれません。

Git Graph をお使いであれば、ブランチ名を右クリックして表示されるメニューから「Rename Branch...」を選択しても変更できるようです。

※ファイル管理が複雑になるため、リポジトリの中にリポジトリを作成しない(階層構造にしない)方がいいようです。

リポジトリで管理するファイルを追加 (ステージング) します

何か新規にファイルを作成すると、エクスプローラビューのファイル名の横に「U」マークが表示されます。これはまだGitで追跡(ファイル管理)されていない状態を表しています。

リポジトリで管理するためにファイルを管理対象に追加(ステージング)します。
左側の「ソース管理」ボタンを押して表示された画面で、ファイル名の右側にある「+」ボタンを押すと管理対象に追加されます。

間違って管理対象に追加してしまった場合は、ファイル名の上にマウスを移動すると表示される「-」ボタンを押すと管理対象から除外されます。(後述するすでにコミットしているファイルを管理対象から外すには、ターミナル画面で「git rm --cached」と入力するといいようです。(削除したという情報を記録するだけなので、リポジトリにファイル内容は残ります。))

※ステージングは変更のたびに毎回行う必要があります。変更ファイル数が多い場合は、変更欄の右側にある「+」ボタンで一括してステージングしたほうがいいかもしれません。

一括してステージングする場合は「.gitignore」というファイルを.gitフォルダと同じ場所に作成しておくといいかもしれません。このファイルに記述されているファイルやフォルダ名はステージングから除外されます。ファイル名等にワイルドカード(*)も指定できるようです。

.vscode
desktop.ini
dummy.*

リポジトリにファイルを格納 (コミット) します

何かメッセージを入力してから、「コミット」ボタンを押すとファイルがリポジトリに格納されます。メッセージが空白の場合は格納されないようです。

コミットしたメッセージを修正したい場合は、ソース設定欄の右側にある「...」ボタンを押して表示されるメニューから、「コミット」→「コミット(修正)」メニューを選択します。(最後にコミットしたメッセージを修正可能です。)

表示されたエディタ画面でメッセージを修正できます。

コミットの取り消し

※VSCode の標準機能だけでは実行できない機能は「Git Graph」というプラグインを使用してご説明しています。

・直前のコミットを削除するには

直前のコミットを取り消すには、ソース設定欄の右側にある「...」ボタンを押して表示されるメニューから、「コミット」→「前回のコミットを元に戻す」メニューを選択します。

・もっと前のコミットを削除するには (Reset)

削除するコミットの「1 つ前」のコミットを右クリックして表示されたメニューから「Reset current branch to this Commit...」を選択します。

表示されたダイアログからリセット方法を選択して「Yes, reset」ボタンを押します。

リセットタイプは以下のようになっています。

Soft・・・変更箇所は残ります。ステージ済みの状態も保持されます。
Mixed・・・変更箇所は残ります。ステージ済みファイルは未ステージ状態になります。
Hard・・・それまでの変更はすべて廃棄されます。

Soft、Mixed の場合は変更箇所も保持されます。

Hard の場合はそれ以降に行った変更は破棄されます。

いずれの場合でも、VSCode のコンソール画面に「git reset --hard ORIG_HEAD」と入力すると元に戻ります。

変更箇所の確認・修正方法

ファイルを修正すると、変更箇所がエディタ内に緑のラインで表示されます。

左側のエクスプローラビューに表示されているファイル名の右側にある「M」ボタンを押すと、現在のファイルと１つ前のファイル(コミット)との、異なる部分が強調された画面が左右に並べて表示されます。

任意のコミット間の違いを確認したい場合は、「Git Graph」プラグインをインストールします。

左下にある「Git Graph」ボタンを押してGit Graph画面を表示します。

表示された画面で比較したいコミットを「Ctrl」キーを押しながら選択します。その後表示したいファイル名をクリックすると比較画面が表示されます。

過去に修正した個所を参照しながら現在のファイルを修正したい場合は、まずGit Graphで参照したいコミットをクリックします。展開されたコミット情報内にある参照したいファイル名を右クリックして、表示されたメニューから「View Diff with Working File」を選択します。

エディタ画面の左側に参照ファイル、右側に修正可能な現在のファイルが表示されます。

※「Meld Diff」というプラグインを使用すると、この画面の内容を「WinMerge」や「Meld」といった外部の比較ツールで表示することが可能になるようです。

このプラグインを使用すると、異なるファイルやフォルダ同士の比較や、選択個所とクリップボードの内容との比較などの機能を、マウスの右クリックメニューから実行できるようになります。(単一ファイルの比較は、VSCodeの標準機能でもできます。)　サンプルコードなどを自分のファイルに取り込んだりする時に使用すると便利かもしれません。英語のサイトになりますが、詳しくはこちらのページをご覧ください。

一例ですが、ファイル同士を比較するにはエクスプローラービューで、比較元のファイルを右クリックして表示されたメニューから「Select for meld compare」を選択します。

次に比較したいファイルを右クリックして、「Compare with selected for meld compare」を選択すると外部の比較ツールが両方のファイルを開いた状態で起動します。(エディタウィンドウで開いているファイルのタブを右クリックしても選択できます。)

比較対象はファイル以外にフォルダも選択可能です。

フォルダを選択した場合は、フォルダに含まれているすべてのファイルを一度に比較できます。閲覧したいファイルをダブルクリックすると比較画面が新しいタブで表示されます。

上の画像はWinMergeの場合ですが、Meldでも同じ操作が可能です。

外部ツール (WinMerge)を使用した変更箇所の確認・修正方法

こちらのサイトからWinMergeのインストーラをダウンロードします。

6番目に表示される画面で以下のオプションをチェックしておきます。それ以外はデフォルト設定でインストールします。

VSCodeに「Meld Diff」プラグインをインストールします。Meld Diffプラグインの歯車ボタンをクリックして表示されたメニューから、「設定」を選択して設定画面を表示します。

表示された設定画面の、「Meld diff: Diff Command」欄に「winmergeu」と入力して設定画面を閉じます。

外部ツールを起動するには、まずGit Graphで参照したいコミットをクリックします。展開されたコミット情報内にある参照したいファイル名を右クリックして、表示されたメニューから「View Diff with Working File」を選択します。

表示された右側の比較画面の上にある、「Open diff view in meld」ボタンを押すと、外部ツール(WinMerge)で比較画面が表示されます。

右側の画面は現在のファイルを表示していますので、修正や保存が可能になっています。

※MAMP等を使用した、Windows環境での開発時に使用すると便利かもしれません。
WSL2からもWinMergeを起動できますが、引数の引き渡し方法を修正しないと比較画面が表示されないようです。WSL2の場合は、次のセクションでご紹介する「Meld」というアプリを使用すると引数の指定方法を修正せずに表示が可能です。

実際にどのような引数が渡されるのか確認したところ、以下のような形式でWSL2から呼ばれているようです。

winmergeu /tmp/file.php_original_r2asnrzh /home/user01/WebProjects/sample-app01/index.php

Windowsの場合は、このままではファイル名がオプションとして解釈されてしまうため、ダブルクォート(")で囲むか、先頭を「\」マークにする必要があります。ダブルクォートでは囲めないようなので、以下のように引数を設定すると表示されるようです。(ホームディレクトリ内のファイルであれば保存も可能です。)

"$1" "$2" 
↓
"\\\\wsl.localhost/Ubuntu$1" "\\\\wsl.localhost/Ubuntu$2"

「Ubuntu」の部分はディストリビューション名になっています。ターミナルで「cat /etc/lsb-release」と入力するか、Windowsのコマンドプロンプトで「wsl -l -v」と入力すると確認できます。ご自身の環境に合わせて適宜修正してください。

user01@DESKTOP-CQEA49P:~$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=24.04
DISTRIB_CODENAME=noble
DISTRIB_DESCRIPTION="Ubuntu 24.04.1 LTS"
user01@DESKTOP-CQEA49P:~$

C:\temp>wsl -l -v
  NAME            STATE           VERSION
* Ubuntu          Running         2
  Ubuntu-24.04    Stopped         2

C:\temp>

リモートとローカルで設定値を変えることができないため、リモートとローカル共によく使う場合は、「Meld」を使用した方がいいかもしれません。

実際に試される場合は、ターミナル画面で以下のように入力して、WSL2からWindows上の「WinMerge」を呼び出せるようにリンクを作成してください。

sudo ln -s '/mnt/c/Program Files/WinMerge/WinMergeU.exe' /usr/bin/winmergeu

外部ツール (Meld)を使用した変更箇所の確認・修正方法

こちらのサイトからMeldのインストーラをダウンロードします。

すべてデフォルト設定でインストールします。

VSCodeに「Meld Diff」プラグインをインストールします。Meld Diffプラグインの歯車ボタンをクリックして表示されたメニューから、「設定」を選択して設定画面を表示します。

表示された設定画面の、「Meld diff: Diff Command」欄に「meld」と入力して設定画面を閉じます。(デフォルトで「meld」になっています。)

外部ツールを起動するには、まずGit Graphで参照したいコミットをクリックします。展開されたコミット情報内にある参照したいファイル名を右クリックして、表示されたメニューから「View Diff with Working File」を選択します。

表示された右側の比較画面の上にある、「Open diff view in meld」ボタンを押すと、外部ツール(Meld)で比較画面が表示されます。

右側の画面は現在のファイルを表示していますので、修正や保存が可能になっています。

WSL2のリモート環境で使用する場合は、ターミナル画面で以下のように入力して、WSL2からWindows上の「Meld」を呼び出せるようにリンクを作成しておきます。

sudo ln -s '/mnt/c/Program Files/Meld/Meld.exe' /usr/bin/meld

あとはWindowsの場合と同様の操作を行うと、比較画面が表示されます。WSL2のリモート環境でも修正や保存が可能です。

※比較するためにWindowsのアプリを使用していますので、ルート権限でリモートログインしている場合でも、ホームディレクトリ以外の場所(/var/www/html等)にあるファイルは編集(保存)できないようです。(比較画面を表示することは可能です。)　リモート環境で使用する場合は、仮想ディレクトリ等の機能を利用してホームディレクトリ内にファイルを配置すれば、使い勝手がいいかもしれません。

※VSCodeのプラグイン(Git Graph)を使用した組み込みの比較画面では、ルート権限でログインした場合はこのような制限はありません。(どの場所にあるファイルも修正可能です。)

ブランチを作成します

バグを修正したり、新しい機能を追加する場合は作業用のブランチを作成します。VSCodeで新しいブランチを作成するには、ソース管理グラフ欄にあるブランチを作成したい位置にある項目を右クリックして、表示されたメニューにある「ブランチの作成…」を選択します。

上部にある入力欄に新しいブランチ名を入力してenterキーを押します。

作成が完了すると以下のように現在のブランチ名が変更されます。以降の変更は新しく作成されたブランチに格納されます。

作成したブランチ名を修正したい場合は、ソース設定欄の右側にある「...」ボタンを押して表示されるメニューから、「ブランチ」→「ブランチ名の変更…」メニューを選択します。

Git Graphプラグインをインストールしている場合は、Git Graph画面のブランチ名の右クリックで表示されるメニューから変更可能です。

ブランチを切り替える方法

ブランチを切り替える前に変更をコミットしておきます。
左下に表示されている現在のブランチ名をクリックします。上部に表示されたブランチ名等のリストから切り替えたいブランチ名を選択すると現在のブランチ(HEADと呼ばれています。)を変更できます。

ブランチを切り替えた時に、「ソース管理グラフ」の各コミットを示すマーク(●)がオレンジ色になってしまった場合は、現在のコミット履歴を表示していない状態のようなので、ソース管理グラフ欄の右側にあるブランチ名をクリックします。上部に表示された選択肢から現在のブランチ名を選択すると元に戻ります。毎回選択しなくていいように「すべて」か「自動」を選択しておくといいかもしれません。

※コミットしていない状態でも、「スタッシュ」と呼ばれる機能を使用するとブランチを切り替えられるようです。

・変更作業中に別のブランチに切り替えるには (スタッシュ)

まだコミットできる状態ではないが、一時的に他のブランチに移動したい場合は「スタッシュ」という機能が使用できるようです。ソース管理画面で「…」ボタンをクリックして表示されたメニューから「スタッシュ」→「スタッシュ」を選択します。まだ管理していないファイルがある場合は、その下の「スタッシュ(未追跡ファイルを含む)」メニューを選択します。

必要に応じて上部の入力欄にコメントを入力します。

スタッシュされたノードは「Git Graph」に表示されます。

スタッシュされたノードを元に戻すには、Git Graphでノードを右クリックして表示されたメニューから「Pop Stash...」を選択します。ダイアログが表示されるので「Yes, pop stash」というボタンを押すと復元されます。

スタッシュの復元は、「現在のブランチ」に対して実行されるようなので、あらかじめスタッシュしたブランチ(このサンプルの場合は「main」)を選択してから復元しないと、競合 (コンフリクト) 等のエラーが発生する可能性があります。短期的に一時退避的な目的で使用するのがいいかもしれません。

逆に、一般的な使い方か分かりませんが、スタッシュした後に新しいブランチを作成してスタッシュを復元すれば、編集中のファイル群を丸ごと新しいブランチに移動させることができます。Git Graphプラグインをご使用であれば、スタッシュノードの右クリックメニューから「Create Branch from Stash...」を選択するとこれらの作業を一度に実行可能です。

ブランチをマージします

シチュエーションに応じた、様々なマージ方法をご紹介します。VSCode の標準機能だけでは実行できない機能は「Git Graph」というプラグインを使用してご説明しています。

・通常のマージ方法

最初にマージ先(取り込み先)となるブランチを選択しておきます。その後ソース設定欄の右側にある「...」ボタンを押して表示されるメニューから、「ブランチ」→「マージ…」メニューを選択します。

上部に表示された選択肢から、マージする(取り込む)ブランチを選択するとマージされます。

・ブランチの途中からマージするには

すでに実装済みの機能のみマージしたいなど、特定ブランチの途中のコミットからマージしたい場合もあるかもしれません。git コマンドを使用すれば可能ですが、Git Graph の画面上からも操作可能です。

まず、取り込み先のブランチ (例では main) を先にチェックアウトしてから、branch1 にあるコミット「A」を右クリックして表示されたメニューにある「Merge into current branch...」を選択します。

表示されたダイアログで「Create a new commit ...」がチェックされていることを確認して、「Yes, merge」ボタンを押します。

コンフリクトが発生した場合は、「Dismiss」ボタンを押して対象ファイルの右側にある「!」マークをクリックします。

表示されたエディタ画面にあるいずれか、または両方の変更の取り込みメニューでコンフリクトを解消します。もっと視覚的に編集したい場合は、下部にある「マージエディターで解決」ボタンを押します。

上の段の左右のエディタ画面にあるメニューなどを選択してコンフリクトを解消します。編集結果は下側に表示されます。下側のエディタを直接操作することも可能です。コンフリクトが解消されたら右下の「マージの完了」ボタンを押します。

コミット用のメッセージを入力して「✓続行」ボタンを押します。

branch1 のコミット「A」が main ブランチにマージされました。

・マージせずに変更を取り込むには (Cherry Pick)

マージせずに一部のコードだけを取り込みたい場合は、「Cherry Pick」という機能が使用できます。(Git Graph を使用してご説明していますが、VSCode の標準機能でも実行できます。)　先ほどと同様に取り込みたいブランチのコミットを右クリックして、表示されたメニューから「Cherry Pick...」を選択します。

表示されたダイアログで「Yes, cherry pick」を選択します。

コンフリクトが発生した場合は「Dismiss」ボタンを押してから、対象ファイルの右側にある「!」マークをクリックして、マージエディタでコンフリクトを解消します。

修正が完了したら、コミット用のメッセージを入力して「✓コミット」ボタンを押します。

コミットが成功すると以下のような表示になります。マージの場合と違ってブランチ同士の合流線は表示されません。

マージされた訳ではないので、さらにブランチをマージしようとするとコンフリクトが発生します。

以下のような場合に使用すると良いかもしれません。

バグ修正のコミットだけを main ブランチに反映したい
実験ブランチの一部の変更だけを別ブランチに持っていきたい
間違ったブランチにコミットしてしまったので、正しいブランチに移したい

チェリーピック処理を中止したい場合は、VSCode に Ctrl + @ と入力してコンソール画面を開いて以下のコマンドを実行します。

git cherry-pick --abort

・コミット履歴を短くするには (Rebase)

細かくコミットするなどして、長くなってしまった履歴を縮めるには「Rebase」という機能が使用できます。まず、統合したいブランチ (例では branch1) をチェックアウトしておきます。次に統合したい「1 つ前」のコミットを右クリックして、表示されたメニューから「Rebase current branch on this commit...」を選択します。

表示されたダイアログで、「Launch Interactive Rebase in new Terminal」をチェックして「Yes, rebase」ボタンを押します。

リベース用のエディタ画面が開きますので、先頭のコミットは「pick」のままにして、残りは「squash」に変更して保存して閉じます。

次にコメントの編集画面が表示されますので、pick したコミット (例では B) の位置のコメントを必要に応じて修正して保存します。

エディタ画面を閉じるとリベースが実行されます。

リベースをやり直したい場合は、VSCode のコンソール画面に「git reset --hard ORIG_HEAD」と入力すると元に戻ります。

・合流線を作らずにマージするには (Squash Merge)

処理はマージと同じですが、一時的に作成したブランチなどで履歴を複雑にしたくない場合などに使用します。やり方はマージする場合とほぼ同じです。まず、取り込み先のブランチ (例では main) をチェックアウトしておきます。次にマージしたいブランチを右クリックして表示されたメニューから「Merge into current branch...」を選択します。

表示されたダイアログで「Squash Commits」をチェックして「Yes, merge」ボタンを押します。

コンフリクトなどが発生した場合は、マージエディタなどで修正してからコミット用コメント入力して「✓コミット」ボタンを押します。

コミットが成功すると以下のように、合流線を作成せずにマージされます。しかし、通常のマージとは異なり、さらに branch1 を修正してから main にマージしようとすると大量のコンフリクトが発生しますので、スカッシュ・マージした場合はマージ元のブランチ (例では branch1) を削除しておくのがいいようです。