超絶便利なGitクライアントのtigのすすめ

tigはテキストベースのgitクライアントです。
![tig.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/06fc5699-2490-d299-c575-a415f44790ad.gif)
(このgifでは、tigの起動からREADMEを適当に編集してcommitするまでやっています。)

全てのgitの機能が使えるわけではないのですが、普段のgitの操作の大半はtigを使ったほうが断然便利です！
この記事では、tigの全部を紹介はできないのですが、基本的な操作からカスタマイズするための方法を紹介します。


# URL/インストール

- homepage http://jonas.nitro.dk/tig/
- install方法 http://jonas.nitro.dk/tig/INSTALL.html
  - macの場合は `brew install tig`
- gitリポジトリ https://github.com/jonas/tig
- マニュアル
  - http://jonas.nitro.dk/tig/manual.html
  - http://jonas.nitro.dk/tig/tigrc.5.html

# 記事を書いたときの環境

- mac
- tig 2.2.1

#　基本操作/カーソル移動

| キー | 挙動 |
|:-:|:-:|
| j, k | カーソルの上下移動 |
| ←,→ | 左右にスクロール |
| enter | サブビュー表示(詳細表示)。 |
| Ctrl+D | Ctrl+U | 1ページ分上下に移動 |
| q | 現在のビューを閉じる |
| Q | tigを終了 |
| / | 画面内の検索。prompt(下画面)に検索する文字を入力できます |


![basic3.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/968e3bbe-a455-35e8-828c-baa02f7e0b38.gif)

# ビュー一覧

| キー | ビュー名 | 説明 |
|:-:|:-:|:-:|
| m | main | デフォルトのビュー。いわゆるgit tree |
| s | status | git status |
| r | refs | branch, tag一覧 |
| l | log | git log |
| t | tree | ディレクトリツリー |
| g | grep | git grep |
| b | blame | git blame |
| h | help | tigのキーバインド一覧 |

## mainビュー `m`

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/0d33d542-5b41-528c-6844-62b3057707a8.png)
`m`を押すとmainビューが表示されます。
tigの起動時にも表示されるビューです。いわゆる`git tree`のビューです。
`enter`でそのコミットの詳細を見れたり、`C(shift+c)`でcherry-pickしたりできます。

## statusビュー `s`

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/4fd14f85-c81e-156f-b351-136015a0dd97.png)
`s`を押すとstatusビューが表示されます。git statusのビューです
`enter`でファイルの変更内容を見れたり、stage/unstage(add/reset)をしたりできます。

## refsビュー `r`

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/939144f2-6ba4-4880-0ef3-7d2fb5d50161.png)
`r`を押すとrefsビューが表示されます。branch, tagsなどが一覧されます。
`enter`でmainビュー(git tree)が見れたり、C(shift+c)でcheckoutしたりできます。

## logビュー `l`

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/08a1bd8c-96bc-30a3-f49c-3a70714fe0f3.png)
`l`を押すとlogビューが表示されます。git logです。
`enter`でそのコミットのdiffが見れたりします。

## treeビュー `t`

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/49294b7a-032a-43d9-c7c7-289fcee0f239.png)
`t`を押すとtreeビューが表示されます。ディレクトリツリーです。
`enter`でファイルの内容が見れたり、`e`でファイルを編集できたり、`b`でblameを見れたりします。

## grepビュー `g`

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/46dafe90-60bc-0ec2-2866-149cc21b15ab.png)

`g`を押すと`prompt`(画面下の部分)に文字が入力できるようになり、grepした文字を入力されると検索結果のgrepビューが表示されます。
`enter`でファイルの該当行を見たりできます。

## blameビュー `b`

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/bf6a8665-bc4b-fd1c-0bf2-27fa96b5495c.png)
statusビューやtreeビューなどでファイルを選択しているような状態のときに`b`を押すとblameビューが表示されます。
`enter`でその時のコミットを見れたり、`,`でblameを辿っていくことができます。

## helpビュー `h`

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/504fa280-77cd-6c86-646a-c15a3f260ff2.png)
`h`でhelpビューが表示されます。tigのキーバインドが表示されます。
キーを忘れたときは`h`です!

# enterで開くサブビュー

(サブビューというのは勝手に名前をつけました＞＜)
`enter`はカーソルが指している対象の詳細が見れます。画面が分割され一方に詳細が表示されます。

## コミットで`enter`->diffビュー

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/25e71757-e453-2757-b711-d44840db474d.png)
mainビューやlogビューなどでコミットを指しているときに`enter`を押すとdiffビューがサブビューで表示されます。

## statusビューで`enter`->stageビュー

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/e34c1b7e-dba8-7bc3-a00b-0cc6e6ea30f6.png)
statsuビューで`enter`を押すとstageビューが表示されます。diffビューと同様にファイルの変更内容が見れます。

## ファイルで`enter`->blob

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/c77353e0-cbb7-9e28-49d7-4f59f3d7283b.png)

treeビューやgrepビューなどでファイルを選択しているときに`enter`でblobビューが表示されます。blobビューはそのファイルの内容を見ることができます。

## refsビューで`enter`->main

![image](https://qiita-image-store.s3.amazonaws.com/0/26310/70769ae5-5219-4e70-5d03-18da3de66b8f.png)
refs(branch, tag一覧)ビューで`enter`を押すと、mainビュー(git tree)が表示されます。

## `O(shift+o)`でサブビューをメインの表示に

![O2.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/ae1f32f7-1540-dc7e-533c-478a9ee7b22f.gif)

## `q`でサブビューを閉じる

開いたサブビューはqで閉じれます。

# 便利なコマンド

ここまではgitのコミットやブランチなどを見るためのツールとしてのtigの紹介だったのですが、
ここからはaddなどの操作をするための紹介です。

## add file `u`

![add.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/a34e3d7d-e65a-8142-42c1-2a434b7e3f9f.gif)
statusビューで`u`でファイルのstage/unstage(add/reset)ができます。

## add -p　`u`, `\(¥)`

![addchunk.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/20eeee1b-030c-a3f7-9a23-aec0576f4ca9.gif)

stageビューで`u`を押すと変更の一部(hunk/chunk)のstage/unstageができます。
(gitではhunk, tigではchunkと表記されています。)
また、`\(¥)`でchunkの分割ができます。

## 1行だけstage/unstage `1`

![stage.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/de4ea745-f923-b74d-6253-1e1ce1bddcf2.gif)

stageビューで`1`を押すと、その行だけstage/unstageができます。

## commit `C(shift+c)`

![commit.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/780fcaf5-8d5c-071a-015c-173322031ed6.gif)

statusビューで`C`を押すとコミットができます。
`git commit`を実行したときと同じくエディターが立ち上がります。

## cherry-pick `C(shift+c)`

![cherrypick.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/11e2bb18-c152-fb03-44c6-4953cc885de5.gif)

mainビューで`C(shift+c)`を押すとcherry-pickができます。

# checkout　branch `C(shift+c)`

![checkout.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/1e3dba66-af57-2611-f875-77e30c857d30.gif)

refs(branch, tag一覧)ビューで`C(shift+c)`を押すと、そのブランチ、tagにcheckoutできます。

# blameを再帰的に `,`

![blame.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/590b50b5-4259-149f-ee7c-b4c66ba71942.gif)

blameビューで`,`を押すと、カーソルが指しているコミットの前の時点のblameが見れます。
(この説明があっているかはちょっと怪しいです。。)

## ファイルの編集 e

![edit_conflict2.gif](https://qiita-image-store.s3.amazonaws.com/0/26310/c21f072d-e625-2c5d-9c94-3e61f77cee02.gif)
statusやtreeビューででファイルの上にカーソルがある状態で`e`を押すとエディターが立ち上がります。
ちょっとしたコンフリクトの解消とかのときにお手軽で便利です。

# カスタマイズ

上記で紹介したのはtigにあるコマンドの半分以下です。
まだコマンドはあるのですが、
`~/.tigrc`に設定を書くことがコマンドを変更・追加ができます。
また、見た目の変更などもできます。
デフォルトの設定は、僕の環境では`/usr/local/etc/tigrc.default`, `/usr/local/etc/tigrc`にあります。

ここでは基本的な設定の仕方を紹介します。詳細はマニュアルを見てください。
http://jonas.nitro.dk/tig/tigrc.5.html

## set

値の設定です。

```
set vertical-split = false
```

この例では`vertical-split`に`false`を設定しています。
設定できる項目の一覧はマニュアルのページに有ります。

## color

色の変更をすることができます。

```sh
color default			default	default	normal
color cursor			white	green	bold
color status			green	default
color delimiter			magenta	default
color "diff --"			yellow	default
color "@@"			magenta	default
color "+"			green	default
```

## bind

キーバインドの変更・追加ができます。

`bind <どのビューか> <キー> <実行するコマンドなど>`
という書き方をします。

### <どのビューか>

ここにはどのビューでそのキーバインドを有効にするか、を書きます。
どのビューでも有効にする場合は `generic`、
特定のビューの場合は`main`や`tree`,`status`などそのビューを書きます。

### <キー>

```
q
Q
,
<Up>
<C-P> # Ctrl+pです
<Tab>
<F5>
```

という指定の仕方です。

### <実行するコマンドなど>

ここの指定の仕方は色々あるのですが、主な指定の仕方を紹介します。

#### `scroll-page-down`などtigのコマンドを実行

`bind generic	k	move-up`
の場合、`move-up`つまりカーソルの移動になります

#### `:toggle xxxx`など設定の変更

キーを押したときに一時的に設定の変更ができます。その変更を永続化するためにはtigrcに上記で紹介した`set`コマンドを書く必要があります。
`bind generic	A	:toggle date`
の場合、dateの表示を切り替えられます。

#### 任意のコマンドを実行

`bind status	C	!git commit`や`bind refs	!	?git branch -D %(branch)`のような書き方です。
コマンドの先頭の文字によって挙動が変わります。

- `!xxxx`
    - コマンドを実行し、そのoutputも表示されます。
        - `!git commit`の場合、コミット入力画面になります。
- `?xxxx`
    - コマンドを実行する前にprompt(画面下)に`y/n`の確認が出ます。
- `@xxxx`
    - コマンドをバックグランドで実行します。outputは表示されません。
    - `bind generic y @sh -c "echo %(commit) | pbcopy"`としてあげれば、commitハッシュをクリップボードにコピーできます。
- `<xxxx`
    - コマンド実行後にtigを終了するみたいです。使ったことないのでよくわかりません＞＜

#### 変数の参照

コマンドの部分に`%(xxxx)`と書くと変数が参照できます。
`bind main	C	?git cherry-pick %(commit)`
の場合、カーソルが指している位置のコミットハッシュが`%(commit)`の部分に貼ります。
変数の一覧はマニュアルを見てください。
よく使うだろうものとしては、

| 変数 | 内容 |
|:-:|:-:|
| `%(commit)` | commitハッシュ |
| `%(branch)` | ブランチ名 |
|  `%(file)` | ファイル名 |
|  `%(tag)` | tag名 |
|  `%(head)` | HEADのcommitハッシュ |
|  `%(remote)`| remoteのブランチ名 |
| `%(prompt)` | `%(prompt Enter new branch name: )`のように書きます。promptに入力した内容が入ります。 |

## カスタマイズ例

僕の設定の一部です。
(少し古いのでもしかしたら一部動かない・間違っている者あるかもしれません。。)
(今までに出てきたgifなどはこのカスタマイズしていない状態のものです。)

```sh
# サブビューを横分割にする
set vertical-split = false

# main viewの左端にコミットIDを表示する
set main-view = id date author commit-title:graph=yes,refs=yes

# checkout -b
bind branch B ?git checkout -b "%(prompt Enter new branch name:)" %(branch)
bind main   B ?git checkout -b "%(prompt Enter new branch name: )"

# 差分の前後の表示行数（diff-context)を指定
set diff-context = 4

# reset hard
bind status <Ctrl-r> ?git reset --hard HEAD

# reflogをpagerで表示
bind generic W :!git reflog

# commitハッシュをコピー
bind generic y @sh -c "echo %(commit) | pbcopy"

# push
bind main U ?git poh "%(prompt Enter push branch => )" # poh = push origin HEAD:$1

# rebase
bind main <Ctrl-r> ?git rebase -i %(commit)

# リポジトリのGitHubを表示
bind generic ^ @hub browse

# 選択したbranchのcompare画面
bind branch [ @hub compare %(branch)
```

# 終わりに

僕もtigをバリバリカスタマイズして使いこなしている側ではないのですが、この記事を読んでもらえれば十分tigは使いこなせる内容になったかと思います。
より使いこなすには、デフォルトのtigrcや(僕の環境だと`/usr/local/etc/tigrc.default`, `/usr/local/etc/tigrc`にあります。)、マニュアル(http://jonas.nitro.dk/tig/manual.html , http://jonas.nitro.dk/tig/tigrc.5.html )やネットの記事を見てください。
(ただ古い記事だとキーバインドが違っていたりすることがあるので注意してください。)