はじめに

この記事では、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って便利。

コミットする

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

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

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

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

本当にコミットできたかどうかわからないので、コミットログを確認します。

ですが、残念ながらVSCodeでコミットログを見ることは拡張機能なしだとできないため、git logコマンドを打ちたいと思います。

以下はgit logを打った結果です。
_{※諸事情により写真が載せられませんでした。}

aaa@aaa git-qiita % git log
commit c5681c518dbdaadfd44a888efee68ff6736369c4 (HEAD -> main)
Author: nanasi-1 <test_email>
Date:   Tue Dec 5 20:37:43 2023 +0900

    こみっとめっせーじ

ちゃんとコミットできているのがわかります。

ブランチを作る

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

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

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

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

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

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

マージする

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

まずはtestブランチに変更を加えてみようと思います。

<!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ブランチでコミットします。

これで準備は整いました。
この変更を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ブランチでの変更が反映されていると思います。

また、コミットログも見てみます。
ターミナルにgit logと打ち込んでみてください。

git logの結果

aaa@aaa git-qiita % git log
commit fded37245b7d2755c1f6048cf53dfe43c9e584e5 (HEAD -> main, test)
Author: nanasi-1 <test_email>
Date:   Wed Dec 6 13:48:45 2023 +0900

    一文追加

commit c5681c518dbdaadfd44a888efee68ff6736369c4
Author: nanasi-1 <test_email>
Date:   Tue Dec 5 20:37:43 2023 +0900

    こみっとめっせーじ

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

拡張機能でもっと便利に

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

それが拡張機能です。

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

Git Graph

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

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

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

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

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

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

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

インストールは↓こちら

VSCodeからGitを操作する