[[📒Articles]] > [[📒2024 Articles]]
![[2024-10-14.webp|cover-picture]]
[[ターミナル]]で複雑な[[コミットグラフ]]を確認するのに適した環境を追い求めてみました結果、[[gitgraph.nvim]]にたどり着きました。
## はじめに
私は普段[[Neovim]]で開発をしており、[[コミットグラフ]]の確認には[[Lazygit]]と[[toggleterm.nvim]]を使っています。[[Lazygit]]については以前に記事も書いていますが、現在の環境はこの記事の内容とは結構かけ離れたものになっています。
<div class="link-card">
<div class="link-card-header">
<img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" class="link-card-site-icon"/>
<span class="link-card-site-name">minerva.mamansoft.net</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">📘Lazygitを自分好みにカスタマイズしてみた</p>
<p class="link-card-description">GitUIからLazygitに乗り換えて、アイコンや差分表示、コミットグラフの見た目を自分好みにし、Neovimから使えるようにしてみました。</p>
</div>
<img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/2023-12-10.jpg" class="link-card-image" />
</div>
<a class="internal-link" data-href="📘Articles/📘Lazygitを自分好みにカスタマイズしてみた.md"></a>
</div>
%%[[📘Lazygitを自分好みにカスタマイズしてみた]]%%
[[Lazygit]]はとても便利なツールであり、[[Neovim]]と一緒に普段使いする[[gitクライアント]]としては間違いなくベストです。特に操作(変数)操作についてはピカイチだと思います。新しいバージョンで気になる機能は別途ノートにもまとめています。
- [[📰Lazygit 0.44.0を試して気になるポイントを整理してみた]]
- [[📰Lazygit 0.41.0を試して気になるポイントを整理してみた]]
ただ、唯一気になることがあるとすれば[[コミットグラフ]]の見やすさです。これは[[Lazygit]]の[[コミットグラフ]]が見にくいと言っているわけではありません。正直言うと、かなり見やすい部類に入ると思っています。
![[Pasted image 20241014133124.png|frame]]
*Lazygitで確認したobsidian-openerのコミットグラフ*
> [!attention]
> 本記事で表示する[[コミットグラフ]]の画像はデフォルトとは異なる設定でカスタマイズされています。デフォルトの表示とは異なりますのでご注意ください。
### Lazygitのコミットグラフに思うこと
[[Lazygit]]の[[コミットグラフ]]は情報量としては十分ですし、順を追っていけば理解もできます。ただ、以下の点で少し直感と外れる部分があると感じます。
- コミットグラフの色がユーザーごとに割り当てられている
- マージの方角が分からない
1つ目は自分のコミットを確かめるうえでは便利ですが、そのようなブランチが育っているのかを確認するには目が泳ぎます。
2つ目について、[[Lazygit]]では`◎`が[[マージコミット]]であり、`〇`が通常のコミットです。それさえ知っていればどのブランチがどのブランチにマージされたかの判断はできますが、ブランチごとに色が割り当てられていないこともあり、直感的には理解しにくい描写と感じています。[[git-graph]]のように方角が分かるといいなと。
![[Pasted image 20241014133722.png|frame]]
*git-graphで確認したobsidian-openerのコミットグラフ*
## gitgraph.nvimがよさそう
いくつか[[コミットグラフ]]を表示する[[CLI]]や[[Neovimプラグイン]]を試したところ、[[gitgraph.nvim]]が良さそうという結論に至りました。
<div class="link-card">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">GitHub - isakbm/gitgraph.nvim: Git Graph plugin for neovim</p>
<p class="link-card-description">Git Graph plugin for neovim. Contribute to isakbm/gitgraph.nvim development by creating an account on GitHub.</p>
</div>
<img src="https://opengraph.githubassets.com/4ba6962b687b9e68d60d33cde94ed4c7c41ced8dc8b91565e0155546b87247f3/isakbm/gitgraph.nvim" class="link-card-image" />
</div>
<a href="https://github.com/isakbm/gitgraph.nvim"></a>
</div>
ポイントは以下3点です。
- 先に述べた2つの課題を解決できている
- コミットグラフの色がブランチごとに割り当たる (最大5つまで?)
- マージの方角を**少しだけ**強調できる
- [[Neovim]]のバッファとして自由に操作できる
- 編集は不可
- 対象コミットを選択すると[[Diffview.nvim]]で差分を表示できる
順に説明します。
### 先に述べた2つの課題を解決できている
[[gitgraph.nvim]]の[[コミットグラフ]]を確認してみましょう。比較するため、先ほどと同じ範囲を表示しています。
![[2024-10-14-16-37-18.webp|frame]]
*gitgraph.nvimのコミットグラフ*
ちゃんとブランチごとに色が分かれています。また、[[コミットグラフ]]をよく拡大して見ると...
![[2024-10-14-16-42-07.webp|frame]]
*マージコミットの合流部分が少し太字に*
細かすぎて気づかないかもしれませんが、[[マージコミット]]から合流する流れの部分が少し太字になっています。目立たなすぎて意味がないのでは...という気もしますが、意識して[[コミットグラフ]]を見るようにすると案外こんなものでも脳の理解に役立つものです。
この記号は[[Unicode|ユニコード]]の罫線に関するシンボルを使っています。
<div class="link-card">
<div class="link-card-header">
<img src="https://ja.wikipedia.org/static/favicon/wikipedia.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">ja.wikipedia.org</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">罫線素片 - Wikipedia</p>
</div>
</div>
<a href="https://ja.wikipedia.org/wiki/%E7%BD%AB%E7%B7%9A%E7%B4%A0%E7%89%87"></a>
</div>
[[gitgraph.nvim]]の設定は以下の通り。`GRUDCU` `GLUDCD` `GLUDCU` をデフォルトと少し変更しています。他のシンボルも必要に応じて変更するかもしれません。(今のところ用途が分かっていないだけです)
```lua
symbols = {
merge_commit = "○",
commit = "●",
merge_commit_end = "○",
commit_end = "●",
-- Advanced symbols
GVER = "│",
GHOR = "─",
GCLD = "╮",
GCRD = "╭",
GCLU = "╯",
GCRU = "╰",
GLRU = "┴",
GLRD = "┬",
GLUD = "┤",
GRUD = "├",
GFORKU = "┼",
GFORKD = "┼",
GRUDCD = "├",
GRUDCU = "┡",
GLUDCD = "┪",
GLUDCU = "┩",
GLRDCL = "┬",
GLRDCR = "┬",
GLRUCL = "┴",
GLRUCR = "┴",
},
```
本来であれば以下のように[[Git]]の[[コミットグラフ]]に特化したシンボルを利用したいと思っていました。
<div class="link-card">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">Add branch drawing symbols to box characters by rbong · Pull Request #7681 · kovidgoyal/kitty</p>
<p class="link-card-description">This symbols are for drawing git-like directed acyclic graph ... </p>
</div>
<img src="https://opengraph.githubassets.com/000dd29a466f58cffacd7b68cfcbd8f1b5d29ebc09367174634b632c0089c113/kovidgoyal/kitty/pull/7681" class="link-card-image" />
</div>
<a href="https://github.com/kovidgoyal/kitty/pull/7681"></a>
</div>
しかし、少しチャレンジしてみたところ、シンボルの[[SVG]]画像を用意するのが面倒くさくて断念してしまいました。。私にもっと画像編集のスキルがあればできたと思っています。
<div class="link-card">
<div class="link-card-header">
<img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" class="link-card-site-icon"/>
<span class="link-card-site-name">minerva.mamansoft.net</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">📜2024-10-14 FontForgeでSVG画像を追加してみる</p>
<p class="link-card-description">コミットグラフの表示に最適なシンボルを表示するため、FontForgeを使ってSVG画像を追加したみる。</p>
</div>
<img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/activity.webp" class="link-card-image" />
</div>
<a class="internal-link" data-href="Notes/📜2024-10-14 FontForgeでSVG画像を追加してみる.md"></a>
</div>
%%[[📜2024-10-14 FontForgeでSVG画像を追加してみる]]%%
### Neovimのバッファとして自由に操作できる
[[gitgraph.nvim]]で表示した結果は読み込み専用の[[バッファ (Vim)|バッファ]]として表示されるため、[[Neovim]]の[[バッファ (Vim)|バッファ]]として利用できます。移動や内容のコピーを[[Neovim]]と同等に扱えるのは地味に大きなメリットです。[[Lazygit]]のような[[TUI]]ではどうしても専用のキーバインドを利用することになりますからね。
### 対象コミットを選択するとDiffview.nvimで差分を表示できる
[[コミットグラフ]]を表示していると、どうしても特定コミットの詳細を確認したくなります。[[Lazygit]]のようなツールには当然備わっている機能であり、[[コミットグラフ]]を確認する際には必須の機能と言えるでしょう。
[[gitgraph.nvim]]は対象コミットで`<CR>`を押すと、該当コミットの差分情報を[[Diffview.nvim]]で確認できます。[[ビジュアルモード]]で範囲選択すると、複数コミットまとめての差分を確認できます。
![[Pasted image 20241014170405.png|frame]]
*gitgraph.nvimのコミットを選択してDiffview.nvimを起動*
[[Diffview.nvim]]との連携には設定に記載が必要です。以下はREADMEから引用した[[lazy.nvim]]の設定です。
```lua
dependencies = { "sindrets/diffview.nvim" },
opts = {
hooks = {
-- Check diff of a commit
on_select_commit = function(commit)
vim.notify("DiffviewOpen " .. commit.hash .. "^!")
vim.cmd(":DiffviewOpen " .. commit.hash .. "^!")
end,
-- Check diff from commit a -> commit b
on_select_range_commit = function(from, to)
vim.notify("DiffviewOpen " .. from.hash .. "~1.." .. to.hash)
vim.cmd(":DiffviewOpen " .. from.hash .. "~1.." .. to.hash)
end,
},
}
```
これを見ると分かりますが、`on_select_commit`や`on_select_range_commit`の記述を変更すれば、[[Diffview.nvim]]以外のツールとの連携も可能です。私はこの機会に[[Diffview.nvim]]を使ってみようと思ったため、この設定にしています。[[Diffview.nvim]]はつよつよ[[Vimmer]]の同僚から以前に勧められたこともあり、ちょっと興味がありますので。
## おわりに
[[ターミナル]]で複雑な[[コミットグラフ]]を確認するのに適した環境を追い求めてみた結果、[[Neovim]] + [[gitgraph.nvim]] + [[Diffview.nvim]]という組み合わせにたどり着きました。
シンプルな[[コミットグラフ]]であったり、自分が使っているブランチでコミットやプッシュを行う場合は[[Lazygit]]の方が圧倒的に快適だと思います。しかし、少し複雑な[[コミットグラフ]]をじっくり紐解きたいケースなのでは今回のような選択肢もアリではないかと思います。
個人的な心残りとしては、[[コミットグラフ]]に特化したシンボルのフォント適用です。できれば[[Cascadia Code Nerd Font]]に適応したかったのですが、それは今後の宿題といたすことにしましょう。あわよくば、どなたかそのようなフォントを作成して公開してくれないかな...と願っておりますが。作業が楽になる途中過程でも構いませんので🙏