はじめに
Gitを使っていると、コミットをまとめたい ときがあります。
例えば、「Greeter（挨拶）クラス」に「goodbye（別れを告げる）メソッド」を実装した場合に、以下のようにコミットが行われたとします。
「Greeterクラス」の「goodbyeメソッド」は新しく実装されたため、実装〜リファクタリング までのコミットは goodbyeメソッドの実装コミット としてまとめるべきです。
⬇ こうしたい ⬇
ただ、Gitのコミットをまとめるために git rebase しないといけないのか・・
と思い、その作業が手間に感じて「コミットしてしまおう！！」となり、そのままコミット&プッシュされてしまい、Gitのコミットログを散らかしてしまう ことがあります。（かつての自分はそうでした😅）
git rebase は、コミットをまとめるためのコマンドですが、コマンドラインで操作するのは手間がかかります。
そこで、Visual Studio Code の拡張機能 を使って、コミットをまとめる作業を GUIベース で簡単に行う方法を紹介します。
使用する拡張機能
コミットをまとめるために使用するのは、Visual Studio Code の拡張機能である GitLens と Git Graph です。
GitLens は、Gitの情報を表示するための拡張機能で、Interactive Rebase Editor という機能が備わっており、これを使用することで GUIベースの操作 でコミットをまとめることができます。
Git Graph は、Gitのコミットログをグラフィカルに表示するための拡張機能で、GitLens と組み合わせて使用することで、コミットログの操作がしやすくなります。
コミットをまとめてみる
ここからは実際に GitLens の Interactive Rebase Editor を使ってコミットをまとめる方法について説明します。
準備
自身の環境にあるGitリポジトリを使用しても問題ありませんが、環境を汚さずにリベースを体験できるように Playgroundリポジトリ を作成しました。
Playgroundリポジトリは、Gitのコミットをまとめる作業を体験するために必要な「拡張機能」や「サンプルコード」が入っているので、以下の手順で準備を行ってください。
1. Playgroundリポジトリをクローンします
以下のコマンドを実行して、Playgroundリポジトリをクローンしてください。
git clone https://github.com/sakes9/git-rebase-playground.git
2. Playgroundリポジトリをクローンしたフォルダを「VSCode」で開きます
3. 拡張機能をインストールします
Visual Studio Code で Playgroundリポジトリのフォルダを開くと、拡張機能のインストールポップアップ が出るので、「インストール」をクリックすると必要な拡張機能がインストールされます。
これで準備は完了したので、Interactive Rebase Editor を使ってコミットをまとめてみましょう。
コミットする
まずは、まとめる対象のコミットを作成します。
1. Greeter（挨拶）クラスが既にサンプルとして実装されているため、そのクラスに goodbye（別れを告げる）メソッド を追加します。
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のソース管理をクリックする
「+」をクリックして変更をステージングする
変更がステージングされました。
Commitizen という、Gitのコミットメッセージを対話形式で作成するためのツールを使ってコミットメッセージを作成します。
コミットメッセージの種類を選択します。
新機能の追加なので、feat: 新機能の追加 を選択します。
「コミット内容について入力してください」のプロンプトで以下を入力して Enter を押します。
Greeterクラスに「別れを告げる」メソッドを実装する
「コミット内容の詳細について入力してください」のプロンプトで Enter を押して、コミット詳細の入力をスキップします。
3. メソッドコメントを追加する
goodbyeメソッドに コメント を追加します。
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: コメントの追記 を選択します。
「コミット内容について入力してください」のプロンプトで以下を入力して Enter を押します。
Greeterクラスの「別れを告げる」メソッドにコメントを記入する
「コミット内容の詳細について入力してください」のプロンプトで Enter を押して、コミット詳細の入力をスキップします。
これでコミットが完了したので、Interactive Rebase Editor を使ってコミットをまとめてみましょう。
Interactive Rebase Editor でコミットをまとめる
1. Git Graph を開きます
2. リベース対象のコミットの １つ前のコミット 右クリックして、「Rebase current branch to this Commit...」を選択します
3. 「Launch Interactive Rebase in new Terminal」にチェックを入れます
4. rebaseオプションを選択します
まとめるコミットのrebaseオプションに「squash」を選択して「START REBASE」をクリックします。
5. コミットメッセージを編集します
「COMMIT_EDITMSG」ファイルが開くので、bulb〜のコミットメッセージを削除して、ファイルを保存します。
6. 「COMMIT_EDITMSG」ファイルを閉じると、コミットがまとめられます。
リベース時にStashを自動で行う
変更中のファイルがある場合は、それらの変更をスタッシュ（一時退避）してからリベースする必要があるため、毎回スタッシュを手動で行うのは手間になります。
リベース時にスタッシュを自動で行うGitの設定をしておくと、Gitコミットをまとめる作業がストレスなくできます。
git config --global rebase.autostash true
まとめ
Visual Studio Code の GitLens と Git Graph を使って、コミットをまとめる作業を GUIベース で簡単に行う方法を紹介しました。
コミットログがまとまっていると、コードの変更履歴が見やすくなり、コードレビューやバグなどの原因究明に役立つので、ぜひ活用してみてください。