ブログ

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

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

VSCodeでのGit操作方法メモ

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

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

Udemy

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

1 前準備 (Gitのインストールなど)
2 Gitの初期設定を行います
3 リポジトリを作成します
4 リポジトリで管理するファイルを追加 (ステージング) します
5 リポジトリにファイルを格納 (コミット) します
6 コミットの取り消し
7 変更箇所の確認・修正方法
8 外部ツール (WinMerge)を使用した変更箇所の確認・修正方法
9 外部ツール (Meld)を使用した変更箇所の確認・修正方法
10 ブランチを作成します
11 ブランチを切り替える方法
12 ブランチをマージします
13 ブランチを削除します
14 GitHubにアップロード (プッシュ) します
15 GitHubからダウンロード (プル) します

前準備 (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等になっていた場合に使用するといいかもしれません。

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

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

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

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

間違って管理対象に追加してしまった場合は、ファイル名の上にマウスを移動すると表示される「-」ボタンを押すと管理対象から除外されます。

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

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

.vscode
desktop.ini
dummy.*

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

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

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

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

コミットの取り消し

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

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

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

左側のエクスプローラビューに表示されているファイル名の右側にある「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のプラグイン(Grit Graph)を使用した組み込みの比較画面では、ルート権限でログインした場合はこの様な制限はありません。(どの場所にあるファイルも修正可能です。)

ブランチを作成します

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

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

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

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

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

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

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

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