はじめに

この記事では、VSCodeからGitを使う方法について説明しています。
少しでもお役に立てたら嬉しいです。

以下を前提としています。

Gitのインストールが済んでいる
Gitの基礎知識(ステージ、コミット、ブランチ、マージ)がある
VSCodeのインストールが済んでいる

半分以上は深夜テンションで書いたため、解説の仕方や言葉遣いが雑なところが結構あります。
不快に思われましたらすみません。

環境

MacOS Sonoma 14.1 (Apple M1 チップ)
git version 2.39.3 (Apple Git-145)
Visual Studio Code 1.84.2
iTerm2 3.4.22

VSCodeのバージョンがそれなりなら、多分他の環境でもできると思います。
もしかしたらWindowsとかだと画面が違うかもしれませんが...

基本的な使い方

以下の内容は、拡張機能いらず＆設定いらずで今すぐ使うことができます。

フォルダを作る

適当にフォルダを作って、VSCodeで開いてください。
フォルダはどこに作ってもいいです。

リポジトリを初期化する

サイドバーの上から3つ目のアイコンをクリックして、
以下の「リポジトリを初期化する」ボタンを押します。

すると、こんな画面になると思います。

実はもうこの状態でgit initが完了しています。
さっき押したボタンを押したことによって初期化されたからです。

リポジトリを初期化する(git initを実行する)と、開いているフォルダ(カレントディレクトリ)の直下に.gitというフォルダが作られます。
VSCodeのエクスプローラーには表示されないので、見たかったらFinderなどで確認してみてください。

隠しフォルダの表示方法

MacbookのFinderの場合は、キーボードで⌘Command + ⇧Shift + .を押すと表示することができます。こちらが参考になります。

windowsの方はこちらを参考にしてみてください。

ファイルをステージングする

まずは今開いているフォルダの中にindex.htmlファイルを作ってみます。
VSCodeのエクスプローラータブを開き、ファイルを作るボタンを押します。

そして内容を以下のように編集します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body>
    なんの変哲もないHTML
</body>
</html>

そしたらこの変更をステージングします。

といってもgit addコマンドは使いません。
先ほどリポジトリを初期化した時のように、VSCodeのサイドバーからやります。

まずは「ソース管理」タブを開きます。
すると、以下のようになっているはずです。

何やら変更という欄が追加されています。
そしてコミットボタンが出てきました。

この「変更」という欄には、まだステージングされていない変更が表示されます。
ちなみにファイル名を押すと差分も見れたりします。

ではindex.htmlの変更をステージングしてみましょう。
横に表示されている + ボタンを押すだけでステージングができます。

+ ボタンを押すと、こんな感じになると思います。

何やら「ステージされている変更」という欄が出てきました。
ステージされている変更ということはつまり、その変更がステージされているということです(小⚪︎構文)。

つまり、この + ボタンを使えばgit addコマンドを打つ必要がなくなります。
VSCodeって便利。

コミットする

もちろんコミットもできます。
ここまで見ていればコミットの仕方は察しがついているかもしれませんが、一応説明したいと思います。

コミットのやり方はとても簡単です。
下のボックスにコミットメッセージを入力して、コミットボタンを押します。

すると、今までの「ステージされた変更」や「変更」の欄が消え、初期化直後の画面になります。

どうやら、リポジトリに変更がない時はこの表示になるみたいです。

コミットログを確認する

2024/7/8追記：

以前はここに「VSCodeでコミットログを見ることは拡張機能なしだとできない」と書いていましたが、これは誤りです。
拡張機能なしでコミットログを見ることは可能です。

すみませんでした。

本当にコミットできたかどうか、コミットログを見て確認してみます。
VSCodeでは、エクスプローラータブの「タイムライン」からコミットログを見ることができます。

まずはタイムラインを表示させます。
エクスプローラータブを開き、右上にある...（ドット三つ）を押し、タイムラインにチェックを入れてください。

すでにチェックが入っている方は、そのままで大丈夫です。

チェックを入れると、エクスプローラーに「タイムライン」というセクションが追加されます。
この中身を見てみると、コミットログらしきものが表示されていると思います。

先ほどの「こみっとめっせーじ」というコミットが表示されていますね。
ちゃんとコミットできているのがわかります。

コミットログのみを表示する

タイムラインの中身を見てみると、コミットログ以外に「ファイルが保存されました」というログも表示されています。
こちらはファイルの編集履歴です。そのままですね。

ですが、時にはこのファイルの編集履歴が邪魔に感じることもあるでしょう。
コミットログのみを確認したい...そんなときは、フィルター機能が使えます。

タイムラインと書かれたあたりにマウスを持っていき、その中のフィルターアイコンをクリックします。
そして出てきたメニューから「ローカル履歴」のチェックを外します。

すると、コミットログのみが表示されるようになります。

差分を確認する

VSCodeにはなんと、コミット同士の差分を確認する機能もついています。

表示方法はとても簡単で、先ほどのタイムラインから見たいコミットをクリックするだけです。

コミットを押すと、エディタ部分に差分が表示されると思います。

差分の緑色の行は「新しく追加された行」、赤い部分は「削除された行」を示しています。
こちらは何もコミットがない状態から新しくindex.htmlファイルを作成したので、差分のほとんどが緑色になっていますね。

ブランチを作る

もちろんブランチを作ることもできます。

まず、左下に「main」と書かれているところがあると思います。
これが現在チェックアウトしているブランチです。

実はこのmainと書かれたところはボタンになっています。
このボタンを押すことで、VSCodeからブランチを切り替えることができます。

押すとこんな感じの表示が出てくると思います。

そしたらまずはブランチを作ってみます。
「新しいブランチの作成...」を押して、ブランチ名を入力してください。

入力が終わったら↩︎Enterキーを押してください。
するとブランチが作られ、そこにチェックアウトされます。

ブランチでコミットする

せっかくブランチを作ったので、このブランチでコミットしてみたいと思います。

まずはindex.htmlを編集します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body>
    なんの変哲もないHTML
+   これはtestブランチでの変更です
</body>
</html>

そしてステージングし、コミットします。

これでtestブランチでコミットすることができました。
VSCodeのコミットの操作って簡単でいいですよね。

コミットしたので次はコミットログを見てみようと思います。
エクスプローラータブを開き、タイムラインをチェックしてみます。

しっかりコミットが反映されていますね。

コミットログを見たからには差分も見ていきます。
ここで言う差分とは、直前のコミットと比べてどこがどう変わったかです。

先ほどと同じように、差分を見たいコミット（ここでは「一文追加」）を押します。
すると、以下のように差分が表示されると思います。

見ての通り、先ほど追加した行が緑色（新しく追加されたことを示す）で表示されています。
VSCode、便利じゃないですか？

マージする

マージもできます。
VSCodeは偉大なのです。

ということで、先ほどtestブランチで行った変更をmainブランチに取り込んでみようと思います。

まずはブランチをベースブランチとなるmainに切り替えます。
左下のtestと書かれたところを押し、出てきたボックスからmainを選択してください。

左下の表示がmainになっていたら、無事にブランチの切り替えができています。

また、index.htmlの内容がtestブランチで変更を加える前の状態になっているはずです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body>
    なんの変哲もないHTML
</body>
</html>

そしたらいよいよマージしていきます。

サイドバーの「ソース管理」を開き、...(ドット三つ)から「ブランチ > ブランチをマージ」を選択します。

そして、マージしたい変更があるブランチを選択します。
今回はtestですね。

これでマージが完了しました。
index.htmlの中身を見てみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body>
    なんの変哲もないHTML
    これはtestブランチでの変更です
</body>
</html>

このようにtestブランチでの変更が反映されていると思います。

また、コミットログも見てみます。
_{※画像はtestブランチのときの使い回しですが、内容はこうなっていると思います。}

testブランチでしたコミットが表示されていると思います。
ここからもしっかりマージできていることが確認できますね。

拡張機能でもっと便利に

さて、ここまででやったことだけでも十分便利なのですが、さらにVSCodeでのGitの使用を楽にする方法があります。

それが拡張機能です。

拡張機能とは何か、拡張機能の入れ方については、以下のMicrosoftのページを参考にしてください。

Git Graph

Git Graphは、Gitのコミットログを見やすく表示してくれる拡張機能です。
なんといっても見やすいのが特徴です。
もうgit logとはおさらばしましょう。

この拡張機能を入れると、左下に「Git Graph」というのが出てきます。

そしてこれを押すと、コミットグラフが表示されます。

どうですか？見やすくないですか？
ちょっとコミットが少ないせいでわかりづらいですが、よくないですか？？

ちなみに上の画像には「main」「test」という青いやつがあると思いますが、これはブランチです。
この場合だと二つのブランチはどちらも「一文追加(fded3724)」というコミットにあるということがわかります。

Git Graphでできるのはこれだけではありません。
私が確認した限りでも以下のことができます。

ブランチの作成、削除、切り替え
ブランチのリネーム
タグの追加、削除、リネーム
コミットへのチェックアウト
マージ
リバート、リセット
プロフィールの編集
リモートにあるブランチやタグの表示

インストールは↓こちら