VISASQ Dev Blog

ビザスク開発ブログ

手軽にコミット整理する仕組みをfzf-git.shで作ってみた

技術記事

はじめに

こんにちは。フルサポート開発チームの中野です。

皆さんは、開発中に「この修正は以前行ったコミット内で行うべきだった」と思った経験はありませんか。私の場合は、機能実装後に気づいたtypoの修正や、ログ出力の追加忘れなど、本来は元の機能実装コミットに含めるべき変更が別のコミットになってしまうことがよくあります。

そこで今回は、fzf と fzf-git.sh を使って、このような修正を元の機能実装コミットに統合し、レビューしやすいコミット履歴を効率的に作成する方法をご紹介します。これらのツールを使うことで、過去のコミットを簡単に検索・選択でき、コミット履歴の整理が気軽に行えるようになります。

設定手順

fzf をインストール

下記コマンドを実行して fzf をインストールします。

$ brew install fzf

fzf-git.sh をダウンロード

下記コマンドを実行して fzf-git.sh をダウンロードします。

$ mkdir -p ~/src/github.com/junegunn && cd $_
$ git clone https://github.com/junegunn/fzf-git.sh.git

~/.zshrc に設定を追加

~/.zshrc に以下の内容を追加し、 source ~/.zshrc を実行するか新しいターミナルセッションを開いて設定を読み込みます。

# fzf
source <(fzf --zsh)
source ~/src/github.com/junegunn/fzf-git.sh/fzf-git.sh

# git commit --fixup
function fzf-git-commit_fixup-widget() {
  setopt local_options pipefail no_aliases 2> /dev/null
  local sha="$(_fzf_git_hashes --no-multi)"
  if [[ -z "$sha" ]]; then
    zle redisplay
    return 0
  fi
  BUFFER="git commit --fixup $sha"
  zle accept-line
  local ret=$?
  zle reset-prompt
  return $ret
}
zle -N fzf-git-commit_fixup-widget
bindkey '^Gc' fzf-git-commit_fixup-widget

# git rebase --interactive
function fzf-git-rebase_interactive-widget() {
  setopt local_options pipefail no_aliases 2> /dev/null
  local sha="$(_fzf_git_hashes --no-multi)"
  if [[ -z "$sha" ]]; then
    zle redisplay
    return 0
  fi
  BUFFER="git rebase --interactive --autosquash $sha^"
  zle accept-line
  local ret=$?
  zle reset-prompt
  return $ret
}
zle -N fzf-git-rebase_interactive-widget
bindkey '^Gr' fzf-git-rebase_interactive-widget

設定確認

fzf-git.sh の関数が読み込まれていることを確認

$ type _fzf_git_hashes

キーバインドが設定されていることを確認

$ bindkey | grep fzf-git-commit_fixup-widget
$ bindkey | grep fzf-git-rebase_interactive-widget

実際の使用例

機能実装後にtypoを発見した場面を例として、fixupコミットの使用方法を説明します。

以下のような履歴があり、過去のコミット「docs: Add README.md」内で文中の「コマンドー」を「コマンド」に修正したい場合を想定します。

9bdd380 chore: Add Gemini CLI settings
b346bce chore: Add Claude Code settings
53303dd chore: Add GitHub Copilot settings
5a5168b docs: Add README.md
diff --git a/README.md b/README.md
index a54203d..a86b9fd 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@

 #### Node.js

-Node.js 環境を構築した後、下記コマンドーを実行してください。
+Node.js 環境を構築した後、下記コマンドを実行してください。

 ```sh
 npm ci

fixupコミットを作成

typoを修正した後、CTRL+G cを押すと、fzfで過去のコミット一覧が表示されます。typoが含まれていた元のコミット（5a5168b docs: Add README.md）を選択すると、次のコマンドが自動実行されます。

$ git commit --fixup 5a5168b

これにより、次のような履歴になります。

0425bef fixup! docs: Add README.md
9bdd380 chore: Add Gemini CLI settings
b346bce chore: Add Claude Code settings
53303dd chore: Add GitHub Copilot settings
5a5168b docs: Add README.md

インタラクティブリベースで履歴を整理

次に、CTRL+G rを押してインタラクティブリベースを実行します。統合したいコミットを選択すると、次のコマンドが実行されます。

$ git rebase --interactive --autosquash 5a5168b^

--autosquash によりfixupコミットが自動的に統合され、次のような綺麗な履歴になります。

f5de64c chore: Add Gemini CLI settings
d3157e1 chore: Add Claude Code settings
a1c46ee chore: Add GitHub Copilot settings
b19ddac docs: Add README.md

このように、typoの修正内容が元のコミットに統合され、機能ごとに整理された読みやすい履歴を作成できます。

おわりに

今回紹介した fzf と fzf-git.sh を使った履歴整理の手法を活用すると、本来であれば元のコミットに含めるべき変更を後から発見した場合にコミット整理が気軽に行えます。過去コミットの内容を見ながらコミットハッシュを簡単に検索・選択できるため、レビューがしやすい履歴を作成する作業が格段に楽になります。

なお、fzf-git.sh には今回カスタマイズした機能以外にも、標準で多くの便利なキーバインドが用意されています。

List of bindings

  • CTRL-GCTRL-F for Files
  • CTRL-GCTRL-B for Branches
  • CTRL-GCTRL-T for Tags
  • CTRL-GCTRL-R for Remotes
  • CTRL-GCTRL-H for commit Hashes
  • CTRL-GCTRL-S for Stashes
  • CTRL-GCTRL-L for reflogs
  • CTRL-GCTRL-W for Worktrees
  • CTRL-GCTRL-E for Each ref (git for-each-ref)

https://github.com/junegunn/fzf-git.sh/blob/main/README.md#list-of-bindings

これらの標準キーバインドを組み合わせることで、Gitの様々な操作をより効率的に行えるようになりますので、ぜひご活用ください。

ビザスクではエンジニアの仲間を募集しています！ 少しでもビザスク開発組織にご興味を持たれた方は、ぜひ一度カジュアルにお話ししましょう！ developer-recruit.visasq.works