【ターミナル改造③】GitをCUI操作でも効率的かつ視覚的に扱える「tig」を導入

- 白黒ターミナルを利用する生活が多くなってきた無機質生活に、少々彩りを加えるために奔走する記事第三弾。
- ネットや現実世界で魔改造ターミナルを見つけて行く中で、機能性や実用性ではなく、高ビジュアル性のみ気になってしまう。
- 今回は、gitをCUIで操作する際の便利ツール「tig」を導入して、gitの効率化を図ることにしよう。

## 概要
- Gitを、CUIでも視覚的に操作できるクライアントツール。
- add(ステージング)やcommit・log(履歴)確認等の基本操作を、ターミナル上でもGUIのような視覚性や操作性・効率性で扱える。
- そのため、サーバー上での操作も、視覚的に効率的に行うことができる。
- [公式サイト](https://jonas.github.io/tig/)

## 作業環境
- Mac OS X 10.13.4Mac OS X 10.13.4
- Homebrew 2.1.3
- git version 2.17.2
    - **※Windowsでの作業は、[こちら](https://qiita.com/y-tsutsu/items/98fc75b8814c99619cf4)を参考にする。**

## インストール
- 下記のコマンドをうち、tigをインストールする。

```bash
# tigのインストール
$ brew install tig
# バージョン確認
$ tig -v
```

## 基本操作
- ※**今回はgitリポジトリとして、github上で動画学習リポジトリとして有名な[cs-video-courses](https://github.com/Developer-Y/cs-video-courses)を使う。**
    - いつもお世話になっております。
- **※そのため、このリポジトリを`git clone`で自分の環境にいれておく。**

### メイン画面起動
- tig操作では、最初にメイン画面(履歴画面)を起動して、そこで各操作をしていく。
- 下記のコマンドで、メイン画面を表示する。
    - ※操作は、gitリポジトリがあるところで行う。

```bash
# 現在いるブランチでの、メイン画面起動。
$ tig
# 全てのブランチでの、メイン画面起動。
$ tig -all
```

### 移動
- 下記にしたがって、画面内を移動していく。

|内容 | キー |
|:-:|:-:|
| 下移動  | `j`  |
| 上移動  |  `k` |
|  ページごとの下移動 |  `ctrl + d` |
| ページごとの上移動 | `ctrl + u` |
| 下移動(2画面ある場合の左画面) | `ctrl + n` |
| 上移動(2画面ある場合の左画面) | `ctrl + p` |

### 設定画面記述
- デフォルトの操作に加えて、独自にキー操作を設定することで、より幅広い操作が可能となる。
- 下記のコマンドをうち、`~/.tigrc`ファイルを作成。

```bash
# .tig設定ファイル作成
$ touch ~/.tigrc
```

- 作成後、ひとまず中身を下記の最低限のものにする。

```rc:~/.tigrc
set main-view = id date author commit-title:graph=yes,refs=yes
bind refs n ?git checkout -b "%(prompt Enter new branch name: )" %(branch)
bind refs P ?git push origin %(branch)
bind refs L ?git pull origin %(branch)
bind main ! ?git reset --soft HEAD^
```

### 早見表
- 下記の表は、以下説明する操作をまとめた各一覧。
- **※以下からの操作は、上記の操作でメイン画面を起動した状態で行う。**
- **※以下からの操作は、`.tigrc`で設定しないと行えない操作もあるため、設定後に行う。**

|内容|キー|
|:---:|:---:|:---:|
|メイン画面|「`m`」|
|状態確認画面|「`s`」|
|操作一覧画面|「`h`」|
|ブランチ一覧確認画面|「`r`」|
|変更ファイルステージング|「`s`」で状態確認画面表示後、対象ファイル上で「`u`」<br>※ステージング解除も同様|
|1行のみステージング|「`s`」で状態確認画面表示後、対象ファイルÉnter押下で中身確認して、指定行で、`1`<br>※ステージング解除は上記と同様に「`u`」|
|コミット入力画面起動|「`s`」で状態確認画面表示後、対象ファイル上で,「`Shift + c`」でコミット入力エディタが起動して、編集して保存。|
|プッシュ|「`r`」でブランチ画面表示後、対象ブランチ上で、「`Shift + p`」|
|プル|「`r`」でブランチ画面表示後、対象ブランチ上で、「`Shift + l`」<br>※チェックアウト先を確認して行う。|
|ブランチ切り替え|「`r`」でブランチ画面表示後、対象となる切り替えブランチにカーソル当てて、「`Shift + c`」|
|外部コマンドの受付|「`:!＜外部コマンド＞`」<br>例 : 「`:!git checkout -b ブランチ名`」|
|ブランチ削除|「`r`」でブランチ画面表示後、対象となる削除ブランチにカーソル当てて、「`!`」|
|編集の廃棄|「`s`」と「`Enter`」で編集のdiff画面表示後、「`!`」|
|ファイル一覧画面|指定のコミットにカーソルを当て、「`t`」|
|各コミット履歴画面|「`t`」で、ファイル一覧画面表示後、「`b`」|
|画面更新|「`Shift + r`」|
|ブランチ作成|「`r`」でブランチ画面表示後、「`n`」と入力して、ベースブランチ名にカーソルを当て、名前を入力。|

### メイン画面起動
- メイン画面の切り替えは、`m`キーで行う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/ca4b6adf-5faf-c973-52b2-fadaf89ea1ee.png)

### 状態確認画面
- 状態確認画面の切り替えは、`s`キーで行う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/d3b7cc3d-083f-e031-9334-9f835ac6d0aa.png)

### 操作一覧画面
- 操作一覧画面の切り替えは、`h`キーで行う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/bd91087c-c346-03c2-ab60-33c6d7c58ab9.png)

### ブランチ一覧確認画面
- ブランチ一覧確認画面の切り替えは、`r`キーで行う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/363ff593-096c-52a6-b41d-e76ea6ec4c5b.png)

### ブランチ作成
- ブランチ作成の切り替えは、`n`キーで行う。
- `r`でブランチ画面表示後、`n`と入力して、ベースブランチ名にカーソルを当て、名前を入力。
- **※この機能はデフォルトでは設定されていないため、`~/.tigrc`でキーバインドとして設定されている必要がある。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/86b21de3-430c-5e8e-e1c4-57256a1a2251.png)

### 変更ファイルステージング
- 変更ファイルステージングは、`u`キーで行う。
- `s`キーで状態確認画面を開き、画面上の「Changes not staged for commit:」の対象ファイル上で、`u`キーをクリック。
- ※ステージング解除の場合、「Changes to be committed:」の対象ファイル上で、再び`u`をクリックすれば戻る。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/678a8de3-9f83-4b46-630a-72b6a3eb7643.png)

### 1行のみステージング
- 一部の行のみステージングの切り替えは、`1`キーで行う。
- `s`キーで状態確認画面を開き、対象ファイルをÉnter押下で中身を確認して、指定行で、`1`キーをクリック。
- **※ステージング解除の場合、上記と同様**

### コミット入力画面起動
- コミット入力画面起動の切り替えは、`shift + c`キーで行う。
- `s`で状態確認画面を開き、画面上の「Changes to be committed:」の対象ファイル上で、`shift + c`キーをクリックしてコミット入力エディタが起動して、メッセージを編集して保存。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/39bb4114-cd3d-26cc-e4db-a563d2041f19.png)

### プッシュ
- プッシュの切り替えは、`shift + p`キーで行う。
- `r`でブランチ画面表示後、対象ブランチ上で、「`Shift + p`」をクリック。
- **※この機能はデフォルトでは設定されていないため、`~/.tigrc`でキーバインドとして設定されている必要がある。**

### プル
- プルの切り替えは、`shift + l`キーで行う。
- `r`でブランチ画面表示後、対象ブランチ上で、`Shift + l`
- **※チェックアウト先を確認して行う。**
- **※この機能はデフォルトでは設定されていないため、`~/.tigrc`でキーバインドとして設定されている必要がある。**

### ブランチ切り替え
- ブランチ切り替えの切り替えは、`shift + c`キーで行う。
- `r`キーでブランチ画面表示後、対象となる切り替えブランチにカーソル当てて、`Shift + c`キーをクリック

### 外部コマンドの受付
- 外部コマンドの受付の切り替えは、`:!＜外部コマンド＞`キーで行う。
- 例 : `:!git pull origin master`

### ブランチ削除
- ブランチ削除の切り替えは、`!`キーで行う。
- `r`でブランチ画面表示後、対象となる削除ブランチにカーソル当てて、`!`キーをクリック

### 編集の廃棄
- 編集の廃棄の切り替えは、`!`キーで行う。
- `s`キーで状態確認画面を開き、「Changes not staged for commit:」の対象ファイルを`Enter`キー押下で編集のdiff画面表示後、`!`キーをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/b7850c17-3eff-0a34-f1a1-0274ef461896.png)

### ファイル一覧画面
- ファイル一覧画面の切り替えは、`t`キーで行う。
- `m`でメイン画面を開き、任意のコミット上で、`t`キーをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/dfcb5a31-55d9-7335-d38d-5e1b54c26b0d.png)

### 各コミット履歴画面
- 各コミット履歴画面の切り替えは、`t`で`b`キーで行う。
- `m`でメイン画面を開き、任意のコミット上で`t`キーをクリックして、ファイル一覧を開き、各ファイル上で、`b`キーをクリック。

### 画面更新
- 画面更新の切り替えは、`shift + r`キーで行う。

## まとめ
- 今回は、CUIでのgit効率化ツールということで、賢人技術者同士で嗜まれている「インターフェース論争」とは全く無縁であることを生かし、雰囲気でCUIツールを密かに使いながら、記事を書く。
- このtigも随分前からあるらしいが、エンジニア歴約1年の私としては、昔からある便利ツールの掘り起こし作業は、毎回至福の極み。
- 次回も賢人技術者が昔から当然のように扱っている「便利ツール」を、真っ当な今更顔で調べて行くことにしよう。

## 参考
- https://qiita.com/y-tsutsu/items/98fc75b8814c99619cf4  
→こちらの記事を参考にしました。大変お世話になりました。
- https://github.com/Developer-Y/cs-video-courses  
→gitリポジトリとして、使わせていただきました。いつも大変お世話になっております。