VSCodeからGitを操作する

# はじめに

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

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

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

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


## 環境

* 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つ目のアイコンをクリックして、
以下の「リポジトリを初期化する」ボタンを押します。

![init.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/5a1348eb-c981-54bc-2d53-d9f6276a3879.png)

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

![init.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/8d83505f-6b89-0ee8-a6d1-3d7f2c6042c7.png)

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

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

:::note info
隠しフォルダの表示方法

MacbookのFinderの場合は、キーボードで`⌘Command + ⇧Shift + .`を押すと表示することができます。[こちら](https://dev.classmethod.jp/articles/finder-hidden-files-shortcut/)が参考になります。

windowsの方は[こちら](https://helpx.adobe.com/jp/x-productkb/global/show-hidden-files-folders-extensions.html)を参考にしてみてください。
:::


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

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

![add-html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/330460b2-3cbd-8465-0a24-7f929d20e5ba.png)

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

```html: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のサイドバーからやります。

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

![ソース管理.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/036366f8-1d3e-2119-8756-91ccae19e607.png)

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

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

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

![git-add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/32eac450-9d13-a5ac-47b3-021e474bfed8.png)

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

![git-add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/ccc6ffb7-6c35-093c-077c-8760807c103e.png)

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

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


## コミットする

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

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

![コミット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/980f380a-5076-9e5a-3af2-3ca5acf8f4e6.png)

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

![元通り.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/8d83505f-6b89-0ee8-a6d1-3d7f2c6042c7.png)

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


## コミットログを確認する

:::note info
**2024/7/8追記：**

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

すみませんでした。
:::


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

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

![タイムラインにチェックを入れる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/b68bdfea-69d9-32fc-41cc-28810c2f79d5.png)

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

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

![タイムライン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/9e257f1a-713f-238a-c7f5-598bcaec9123.png)

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


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

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

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

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

![ローカル履歴.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/33d059aa-0e94-d822-f0eb-f7329db5c1da.png)

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

![コミットログ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/d1518fe2-21cd-8e0f-903e-69a6158d3a14.png)


### 差分を確認する

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

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

![差分を表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/210afaf9-cd2a-f028-5507-24d741cbd23d.png)

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

![差分.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/9f1b0adc-7563-c8c0-9f64-8248d70a62d8.png)

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


## ブランチを作る

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

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

![ブランチ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/58b2fbb2-8d35-3081-77b0-1b1f9386f717.png)

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

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

![ブランチ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/dbb61aeb-c3cc-e17c-36f1-260be01d9757.png)

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

![test-branch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/080b1ac8-4417-01cb-2337-ac5dbb4547f4.png)

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

![test-branch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/1c9b5925-bb04-37ec-69da-28ee98dddcf2.png)


### ブランチでコミットする

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

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

```diff_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>
```

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

![add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/318d1ab6-253b-5f44-1199-d9a0b9ad7edb.png)

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

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

![コミットログ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/34141d2b-fcbc-58f5-7552-055758b8a9d1.png)

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

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

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

![差分.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/bad2c206-f325-835f-ed08-2d51e6b26c70.png)

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


## マージする

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

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

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

![ブランチの切り替え.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/9133e195-9b27-478d-9ca8-54ad31132cf3.png)

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

![mainブランチ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/58b2fbb2-8d35-3081-77b0-1b1f9386f717.png)

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

```html: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>
```

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

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

![マージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/bb5778a8-aa0b-77a5-c8d5-f94fc7965b2c.png)

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

![マージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/0df30a6f-ec61-f01b-837d-4ed92a99e610.png)

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

```diff_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`ブランチでの変更が反映されていると思います。

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

![コミットログ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/34141d2b-fcbc-58f5-7552-055758b8a9d1.png)

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


# 拡張機能でもっと便利に

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

それが拡張機能です。

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

https://learn.microsoft.com/ja-jp/power-pages/configure/vs-code-extension


## Git Graph

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

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

![GitGraph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/6d2cbc6d-975c-93c3-b732-f4e6668f90d2.png)

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

![コミットグラフ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/2bdd1c24-9de0-3a14-93bd-1eb9530cd5a1.png)

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

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

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

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

インストールは↓こちら

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph