VSCodeでGitのコミットログをGUIベースでまとめる


## はじめに

Gitを使っていると、**コミットをまとめたい** ときがあります。

例えば、「Greeter（挨拶）クラス」に「goodbye（別れを告げる）メソッド」を実装した場合に、以下のようにコミットが行われたとします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/56b6120d-b573-2c43-0197-8604f1404d46.png" width="600px">

「Greeterクラス」の「goodbyeメソッド」は新しく実装されたため、**実装〜リファクタリング** までのコミットは **goodbyeメソッドの実装コミット** としてまとめるべきです。

**⬇ こうしたい ⬇**

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/5c7510f5-86ad-4687-6300-2a19f954aa21.png" width="600px">

ただ、Gitのコミットをまとめるために `git rebase` しないといけないのか・・
と思い、その作業が手間に感じて「コミットしてしまおう！！」となり、そのままコミット&プッシュされてしまい、**Gitのコミットログを散らかしてしまう** ことがあります。（かつての自分はそうでした😅）

`git rebase` は、コミットをまとめるためのコマンドですが、コマンドラインで操作するのは手間がかかります。
そこで、**Visual Studio Code の拡張機能** を使って、コミットをまとめる作業を **GUIベース** で簡単に行う方法を紹介します。

## 使用する拡張機能

コミットをまとめるために使用するのは、Visual Studio Code の拡張機能である **GitLens** と **Git Graph** です。

**GitLens** は、Gitの情報を表示するための拡張機能で、**Interactive Rebase Editor** という機能が備わっており、これを使用することで **GUIベースの操作** でコミットをまとめることができます。

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#interactive-rebase-editor-

**Git Graph** は、Gitのコミットログをグラフィカルに表示するための拡張機能で、GitLens と組み合わせて使用することで、コミットログの操作がしやすくなります。

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

## コミットをまとめてみる

ここからは実際に **GitLens** の **Interactive Rebase Editor** を使ってコミットをまとめる方法について説明します。

### 準備

自身の環境にあるGitリポジトリを使用しても問題ありませんが、環境を汚さずにリベースを体験できるように **Playgroundリポジトリ** を作成しました。

https://github.com/sakes9/git-rebase-playground.git

Playgroundリポジトリは、Gitのコミットをまとめる作業を体験するために必要な「拡張機能」や「サンプルコード」が入っているので、以下の手順で準備を行ってください。

*1. Playgroundリポジトリをクローンします*

以下のコマンドを実行して、Playgroundリポジトリをクローンしてください。

```bash
git clone https://github.com/sakes9/git-rebase-playground.git
```

*2. Playgroundリポジトリをクローンしたフォルダを「VSCode」で開きます*

*3. 拡張機能をインストールします*

Visual Studio Code で Playgroundリポジトリのフォルダを開くと、**拡張機能のインストールポップアップ** が出るので、「インストール」をクリックすると必要な拡張機能がインストールされます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/0c06bcdf-8d9d-afc4-c664-de4e99a31f85.png" width="400px">

これで準備は完了したので、Interactive Rebase Editor を使ってコミットをまとめてみましょう。

### コミットする

まずは、まとめる対象のコミットを作成します。

*1. Greeter（挨拶）クラスが既にサンプルとして実装されているため、そのクラスに **goodbye（別れを告げる）メソッド** を追加します。*

```diff_typescript:src/greeter.ts
class Greeter {
  /**
  * あいさつをする
  * @param to あいさつをする相手
  */
  hello(to: string): void {
    const name = to;
    console.log(`こんにちは ${name} さん`);
  }

+  goodbye(to: string): void {
+    const name = to;
+    console.log(`さようなら ${name} さん`);
+  }
}

export { Greeter };
```

*2. 変更をコミットします*

VSCodeのソース管理をクリックする

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/cb98016d-f3a2-d183-93d3-802d75ed802d.png" width="400px">

「+」をクリックして変更をステージングする

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/9a914818-7f58-ac5b-2f9b-bece257a17bd.png" width="400px">

変更がステージングされました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/bfeaa0f0-f3d0-42b6-326c-a450fff5867f.png" width="400px">

**Commitizen** という、Gitのコミットメッセージを対話形式で作成するためのツールを使ってコミットメッセージを作成します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/d2fa28b8-3082-6e13-985f-014b66b843c5.png" width="400px">

コミットメッセージの種類を選択します。
新機能の追加なので、`feat: 新機能の追加` を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/e7437696-969e-eb04-0427-943c38482fea.png" width="600px">

「コミット内容について入力してください」のプロンプトで以下を入力して Enter を押します。

`Greeterクラスに「別れを告げる」メソッドを実装する`

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/68c82fdd-666c-3578-73e6-1cb02aafc543.png" width="600px">

「コミット内容の詳細について入力してください」のプロンプトで Enter を押して、コミット詳細の入力をスキップします。

*3. メソッドコメントを追加する*

goodbyeメソッドに **コメント** を追加します。

```diff_typescript:src/greeter.ts
class Greeter {
  /**
  * あいさつをする
  * @param to あいさつをする相手
  */
  hello(to: string): void {
    const name = to;
    console.log(`こんにちは ${name} さん`);
  }

+  /**
+   * 別れを告げる
+   * @param to 別れを告げる相手
+   */
  goodbye(to: string): void {
    const name = to;
    console.log(`さようなら ${name} さん`);
  }
}
```

*4. 変更をコミットします*

メソッドの実装コミットと同様に **Commitizen** を使用してコミットしていきます。

コミットメッセージの種類を選択します。
コメントの追加なので、`bulb: コメントの追記` を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/2ffefea1-8b3b-d0d8-a22e-383d187811b7.png" width="600px">

「コミット内容について入力してください」のプロンプトで以下を入力して Enter を押します。

`Greeterクラスの「別れを告げる」メソッドにコメントを記入する`

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/7f06513a-206f-65f5-1478-d254a799306a.png" width="600px">

「コミット内容の詳細について入力してください」のプロンプトで Enter を押して、コミット詳細の入力をスキップします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/bed48a7d-9b25-10c4-72e5-3dc5cc14f112.png" width="600px">

これでコミットが完了したので、**Interactive Rebase Editor** を使ってコミットをまとめてみましょう。

### Interactive Rebase Editor でコミットをまとめる

*1. Git Graph を開きます*

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/92620563-96e9-8f4b-1abb-d82c63409732.png" width="400px">

*2. リベース対象のコミットの **１つ前のコミット** 右クリックして、「Rebase current branch to this Commit...」を選択します*

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/2b45d9eb-5ee6-1d9a-a039-f021d0e15dd5.png" width="600px">

*3. 「Launch Interactive Rebase in new Terminal」にチェックを入れます*

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/7b5d755c-6c4c-d577-5f40-0500adb91932.png" width="400px">

*4. rebaseオプションを選択します*

まとめるコミットのrebaseオプションに「squash」を選択して「START REBASE」をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/0fcab13c-a21b-47e8-961c-233d9a7e703b.png" width="600px">

*5. コミットメッセージを編集します*

「COMMIT_EDITMSG」ファイルが開くので、bulb〜のコミットメッセージを削除して、ファイルを保存します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/6467fa0d-5771-d590-b3fd-5057082fbf0d.png" width="600px">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/99c6f9ad-1bb2-33d8-2337-23cb8f380433.png" width="600px">

*6. 「COMMIT_EDITMSG」ファイルを閉じると、コミットがまとめられます。*

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087076/5c7510f5-86ad-4687-6300-2a19f954aa21.png" width="600px">

## リベース時にStashを自動で行う

変更中のファイルがある場合は、それらの変更をスタッシュ（一時退避）してからリベースする必要があるため、毎回スタッシュを手動で行うのは手間になります。
リベース時にスタッシュを自動で行うGitの設定をしておくと、Gitコミットをまとめる作業がストレスなくできます。

```bash
git config --global rebase.autostash true
```

## まとめ

Visual Studio Code の **GitLens** と **Git Graph** を使って、コミットをまとめる作業を **GUIベース** で簡単に行う方法を紹介しました。

コミットログがまとまっていると、コードの変更履歴が見やすくなり、コードレビューやバグなどの原因究明に役立つので、ぜひ活用してみてください。