[[📒Articles]] > [[📒2023 Articles]]
![[2023-12-10.jpg|cover-picture]]
[[Lazygit]]を使い始めたので自分好みにカスタマイズしてみました。
## Lazygitとは
[[Lazygit]]は[[Go]]で開発されている[[TUI]]の[[gitクライアント]]ツールです。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
GitHub - jesseduffield/lazygit: simple terminal UI for git commands
</div>
<div class="link-card-v2-content">
simple terminal UI for git commands. Contribute to jesseduffield/lazygit development by creating an account on G ...
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/7d9561ecdbd946f66187cab6d8d25ed53b12b0d8aaf177020dbd686896e147f9/jesseduffield/lazygit" />
<a href="https://github.com/jesseduffield/lazygit"></a>
</div>
#2023/12/09 現在で[[GitHub]]のスター数は4000以上と人気のツールです。現時点のバージョンはv0.40.2です。
## Lazygitを使ってみようと思ったきっかけ
主な理由は以下の2つです。
- 開発をほぼすべて[[Ubuntu]](on [[WSL]])で行うようになった
- 職場の同僚が使っているのを見て便利そうだと思った
もともとは[[Windows]]をメインに使っており、[[Ubuntu]]はたまに[[WSL]]で使う程度でした。[[Windows]]だと[[Lazygit]]はレイアウトが崩れてしまっていたので使うことはできず、[[Windows]]でもレイアウトがあまり崩れない[[GitUI]]を使っていました。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
GitHub - gitui-org/gitui: Blazing 💥 fast terminal-ui for git written in rust 🦀
</div>
<div class="link-card-v2-content">
Blazing 💥 fast terminal-ui for git written in rust 🦀 - gitui-org/gitui
</div>
<img class="link-card-v2-image" src="https://repository-images.githubusercontent.com/247725846/86707e00-e9f5-11ea-92b0-b7d526afa90f" />
<a href="https://github.com/extrawurst/gitui"></a>
</div>
最近になって、職場の同僚が[[Lazygit]]を使っているのを見ました。使いこなせれば便利そうだな...と思いました。単なる[[TUI]]以上の価値を感じました。その人は以前[[GitUI]]を使っていたのにも関わらず、今は[[Lazygit]]を使っていることから私と状況も似ています。
そして、最近になり、仕事の都合からほぼすべての開発を[[Ubuntu]]で行えるようにしました。[[Windows]]では開発をしなくなっため、[[Lazygit]]が再び選択肢に入るようになったのです。
```console
asdf plugin add lazygit
asdf install lazygit latest
asdf global lazygit latest
```
## カスタマイズ
ここから先はカスタマイズの内容を1つずつ紹介していきます。[[Lazygit]]のインストール方法や、操作方法などは説明しません。それらについては公式ドキュメントをご覧いただければと思います。
カスタマイズ前の状態は以下のようになっていました。開いているリポジトリは[[Lazygit]]のリポジトリです。
![[Pasted image 20231209200710.png|frame]]
[[Linux]]の設定は`~/.config/lazygit/config.yml`に配置されているので、主にこれを編集していくことになります。
### アイコンを表示する
`gui.nerdFontsVersion`にインストールしている[[Nerd Fonts]]のバージョンを指定します。私はv3系を使っているので`"3"`としました。
```yaml
gui:
nerdFontsVersion: "3"
```
アイコンが表示されるようになりました😆
![[Pasted image 20231209201506.png|frame]]
> [!caution]
> `gui.showIcons`オプションは非推奨です。古い情報なので気を付けましょう。
> [!attention]
> 指定したバージョンの[[Nerd Fonts]]がマシンにインストールされ、利用しているターミナルのフォントとして設定されている必要があります。
### 差分を見やすくする
個人的には、[[Git]]のdiff表示はあまり直感的ではありません。
![[Pasted image 20231209201935.png|frame]]
私は差分表示に[[delta]]を使っています。とても見やすいので気に入っています。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
GitHub - dandavison/delta: A syntax-highlighting pager for git, diff, grep, and blame output
</div>
<div class="link-card-v2-content">
A syntax-highlighting pager for git, diff, grep, and blame output - dandavison/delta
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/7eb7d0a04abefd115d3e17296d4f259b7c72d4ae6adb1704e1100e411c840e4c/dandavison/delta" />
<a href="https://github.com/dandavison/delta"></a>
</div>
幸運にも、[[Lazygit]]ではcustom pagerを利用できます。[[delta]]の設定例も記載されていました。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
lazygit/docs/Custom_Pagers.md at master · jesseduffield/lazygit
</div>
<div class="link-card-v2-content">
simple terminal UI for git commands. Contribute to jesseduffield/lazygit development by creating an account on G ...
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/7d9561ecdbd946f66187cab6d8d25ed53b12b0d8aaf177020dbd686896e147f9/jesseduffield/lazygit" />
<a href="https://github.com/jesseduffield/lazygit/blob/master/docs/Custom_Pagers.md#delta"></a>
</div>
configを変更します。
```yaml
git:
paging:
colorArg: always
pager: delta --dark --paging=never
```
いい感じになりました👍
![[Pasted image 20231209210218.png|frame]]
> [!hint]- side-by-side表示を無効にするには...
> [[gitconfig]]の設定で`[delta]`に`side-by-side = true`を指定いると、[[Lazygit]]の差分もside-by-sideになります。横幅のあるディスプレイではその方が見やすくて都合がよいケースもありますが、FullHDの画面ではかえって見にくくなります。
>
> [[gitconfig]]を以下のように変更することで、[[Git]]のpagerとして利用するときだけside-by-side表示にすることができます。
>
> ```diff
> [core]
> - pager = delta
> + pager = delta --side-by-side
>
> [delta]
> - side-by-side = true
> ```
### コミットグラフを見やすくする
デフォルトで表示される[[コミットグラフ]]はあまり一覧性が高くありません。
![[Pasted image 20231210003840.png|frame]]
幸いにも、[[Lazygit]]が表示する[[コミットグラフ]]はカスタマイズできます。configに好みのコマンドを設定します。
```yaml
git:
allBranchesLogCmd: git log --graph --color=always --date=format:'%Y-%m-%d %H:%M' --pretty=format:'%C(#a0a0a0 reverse)%h%Creset %C(cyan)%ad%Creset %C(#dd4814)%ae%Creset %C(yellow reverse)%d%Creset %n%C(white bold)%s%Creset%n' --
branchLogCmd: git log --graph --color=always --date=format:'%Y-%m-%d %H:%M' --pretty=format:'%C(#a0a0a0 reverse)%h%Creset %C(cyan)%ad%Creset %C(#dd4814)%ae%Creset %C(yellow reverse)%d%Creset %n%C(white bold)%s%Creset%n' {{branchName}} --
```
これで見やすくなりました✨
![[Pasted image 20231210003914.png|frame]]
> [!caution]- コミットグラフの見間違いに注意
> Commitsから`+`キーを押して表示される[[コミットグラフ]]にて、下記赤枠の表現には注意してください。
>
> ![[Pasted image 20231210005234.png|frame]]
>
> これは[[git-graph]]のコミットログに例えると以下2枠に一致します。つまり、マージによる合流と、ブランチ作成による分岐を1行で表しているのです。
>
> ![[Pasted image 20231210005848.png|frame]]
>
> 冷静に考えると、[[Git]]の[[コミットグラフ]]としてはそれ以外の選択肢はないのですが、直感に反するのでしばらくは理解できませんでした。
### Neovimから使えるようにする
[[Git]]の操作は開発と交互に行われます。そのため、[[gitクライアント]]は[[IDE]]やエディタから直接操作できる方が便利でしょう。[[Lazygit]]を[[Neovim]]から直接起動・連携できるようにしてみました。
![[Pasted image 20231210204613.png|frame]]
*NeovimからLazygitを起動*
[[Neovim]]から[[TUI]]アプリケーションを起動させるには、[[fm-nvim]]を使うと便利です。このプラグインを使えば、[[TUI]]起動中に`ESC`のようなキーを[[Neovim]]に奪われずに済みます。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
GitHub - is0n/fm-nvim: 🗂 Neovim plugin that lets you use your favorite terminal file managers (and fuzzy finders) from within Neovim.
</div>
<div class="link-card-v2-content">
🗂 Neovim plugin that lets you use your favorite terminal file managers (and fuzzy finders) from within Neovim. ...
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/8ea28b82b4218c56854ad4e89da189b4eea7746e895312eca064059d8c92c7b4/is0n/fm-nvim" />
<a href="https://github.com/is0n/fm-nvim"></a>
</div>
[[lazy.nvim]]を使っている場合、以下のように設定します。
```lua
{
"is0n/fm-nvim",
keys = {
{ '<Space>g', ':Lazygit<CR>' },
},
config = function()
require('fm-nvim').setup {}
end
},
```
これで`<Space>g`で[[Lazygit]]を起動できるようになりました。キーバインド(`keys`)は好みで変えてください。
## 改善されたら嬉しいこと
機能もカスタマイズも素晴らしい[[Lazygit]]ですが、2つほど改善されたら嬉しいことがあります。
### Windowsでも画面レイアウトが崩れないでほしい
[[Lazygit]]唯一の欠点と言えるものがこれです。[[Windows]]でマルチバイト文字が入るとレイアウトが崩れてしまうという問題。[[Ubuntu]]では今のところ遭遇していないので、おそらく[[OS]]の問題だと思っています。
この問題はフレームワークである[[GOCUI]]によるものである可能性が高いため、根本的な問題解消は難しいのかもしれません...。直近困っているわけではありませんが、[[Windows]]でも使えると、どの環境でも[[Lazygit]]の恩恵を得られるので嬉しいと思いました。
### コミットグラフがより見やすくなってほしい
個人的には、[[Lazygit]]の[[コミットグラフ]]は直感的ではないと思います。特に、以下画像の赤枠にある合流地点は初見で理解するのは難しいでしょう。
![[Pasted image 20231210005234.png|frame]]
*Lazygitのコミットグラフ*
[[git-graph]]のように、合流が分割され、かつ矢印でマージの方向が分かると嬉しいですね。
![[Pasted image 20231210005848.png|frame]]
*git-graphのコミットグラフ*
好みの部分もあるとは思いますが、これだけカスタマイズ性に長けた[[Lazygit]]なので、この辺もカスタマイズ(選択)できると良いなと思いました。
## まとめ
[[Lazygit]]のカスタマイズや[[Neovim]]で利用可能にする設定、改善されたら嬉しいことを紹介しました。
[[Lazygit]]の大きなメリットは[[コミットグラフ]]やdiffの差分表示を自分好みにカスタマイズできることだと思います。他の[[gitクライアント]]ツールとして、[[tig]]や[[GitUI]]などを利用してきましたが、[[Lazygit]]ほどカスタマイズができる[[gitクライアント]]ツールは見たことがありません。
また、[[Lazygit]]はカスタマイズ性だけでなく、機能も非常に充実しています。今回は触れませんでしたが、[[Git]]のほとんどの機能を直感的に利用でき、UIも実際の作業フローに基づいた無駄のないものに仕上がっています。
[[Lazygit]]はまだversion1に達していません。version1に向けて今もなお進化を続けているのだと思います。私も機会があれば、何らかの形で貢献できればと思っています。
素晴らしいターミナル体験をありがとう！ [[Lazygit]]👏
---
※ 本ページのイラストはAI(DALL·E)により生成されたものです