ターミナルをいい感じにして楽しむ

はじめまして。
この度PCを新調しまして、いつものように[ターミナルにGitのブランチ名を表示](https://qiita.com/lemtosh469/items/334ff76366e054a3a3aa)させようとしたのですが、ふと**もっといい感じに表示できたらかっこいい**のでは？と思い立っていろいろ調べた備忘録です。ついでに環境構築もしてました。

## 環境

macOS Catalina (10.15.4)

フロントエンドの開発がメインの人です。
筆者のスキル＝**ターミナルはほぼGit用**、あとDockerやnpmの起動とかビルドで使う 程度

## Finderの隠しファイルを表示する

デフォルトでは非表示になっている Finder の隠しファイルを見えるようにしておきます。
Finderをアクティブにした状態でショートカットを入れるだけでOK。

隠しファイルの表示・非表示ショートカット： `command + shift + .` 

## テーマを設定する
[Iceberg](http://cocopon.github.io/iceberg.vim/)

定番のテーマ。強いこだわりがないなら Iceberg にしておけば間違いない。
でも[**ゲンガーのテーマ**](https://github.com/klaussinani/hyper-pokemon#usage)とかかわいいなって思います。


## Homebrew の導入

[Homebrew](https://brew.sh/index_ja)

便利な万能パッケージマネージャー。
~~Homebrewのインストールには `xcode-select` というコマンドラインツールが必要なので、AppStoreでXcodeをインストール（重い）するか、[xcode-select単体をインストール](https://dezanari.com/homebrew-without-xcode/)してください。
`xcode-select` が使える状態になったら公式サイトのスクリプトを実行して導入します。~~

> 2021年2月4日追記

macOS 10.15.6 Catalina でxcode-selectの単体インストールする前にHomebrewのインストールコマンドを打ってしまいましたが、Homebrew インストール時に xcode-select も一緒にインストールしてくれてました！お手軽！

## zsh と Git のインストール

どちらも標準で入っていますが、アップデートかねて Homebrew で入れ直します。
ついでに補完プラグインも入れちゃいます。

```
brew install zsh
brew install git
brew install zsh-completions
```

なお、[Catalinaからは**デフォルトでzsh**](https://support.apple.com/ja-jp/HT208050)になのでログインシェルの変更は必要ありません。
念の為、 `cat /etc/shells` と叩いてzshがあるか確認、一覧にzshがあったらOKです。

``` 
cat /etc/shells

# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
```

### zshの設定

zshの設定ファイルを作り、環境変数の設定やインストールした補完プラグインの適用をします。
新品のmacで今回の手順だと多分 .zshrc ファイルはないのでホームディレクトリに新しく作って任意のエディタから編集しましょう

```
touch .zshrc
```
作った.zshrcは `/Users/ユーザー名/.p10k.zsh` にあります！
一番最初の「隠しファイルの表示」設定を忘れてると見えないので設定しましょうね

エディタで開いたら以下の内容をペタッと。
ここは必要があれば各々設定の追加・削除をしてください。

```~/.zshrc
# 環境変数
export LANG=ja_JP.UTF-8

# ----------
#    補完
# ----------
if type brew &>/dev/null; then
  FPATH=$(brew --prefix)/share/zsh/site-functions:$FPATH

  autoload -Uz compinit
  compinit
fi

## 大文字小文字を区別しない
zstyle ':completion:*' matcher-list 'm:{a-z}={A-Z}'

## 日本語ファイルを扱えるようにする
setopt print_eight_bit

# ----------
#    履歴
# ----------
export HISTFILE=~/.zsh_history
export HISTSIZE=1000
export SAVEHIST=10000

##  直前の重複を記録しない
setopt hist_ignore_dups
```

これでいろいろ便利なTab補完の完成です。いいものだなー。
ヒストリー（履歴）に関しては取り急ぎおまけ程度です。

> 補完 : https://docs.brew.sh/Shell-Completion

## zinit の導入

[zinit](https://github.com/zdharma/zinit)

ターミナルのカスタマイズについて調べると oh-my-zsh の紹介がたくさん出てくるのですが、さらに調べると oh-my-zsh は起動が遅いとか古いとかもっと優秀なプラグインマネージャーがあるとか見かけました。
使い方を理解できてないものの、今回は速度が早いらしい `zinit` を入れてみることに。

インストール手順に沿って導入します。
https://github.com/zdharma/zinit#installation

### zsh-syntax-highlighting を読み込む

[zsh-syntax-highlighting](https://github.com/zsh-users/zsh-syntax-highlighting)

せっかく入れたので試しにプラグインを読み込ませてみます。
`zinit` の記述の後に `zsh-syntax-highlighting` を遅延読み込みする設定で追記。
一文追加するだけでいいのはお手軽ですね…！

```~/.zshrc
source "$HOME/.zinit/bin/zinit.zsh"
autoload -Uz _zinit
(( ${+_comps} )) && _comps[zinit]=_zinit

## コマンドに色付け
zinit ice wait'!0'; zinit load zsh-users/zsh-syntax-highlighting
```

> [【zsh高速化】え～、そんなプラグインマネージャーがあるんだったらもっと早く教えてよ、と姉が怒り出した - Zinit (旧名Zplugin)](https://qiita.com/9sako6/items/23b164a95b91c644aade)

## Meslo Nerd Font の導入

[Meslo Nerd Font](https://github.com/romkatv/powerlevel10k#fonts)

後述する `Powerlevel10k` の推奨フォントです。[Nerd Fonts](https://github.com/ryanoasis/nerd-fonts) のお仲間ちゃん。
Powerlevel10k にフォントファイルが置いてあるのでそちらをそのままお借りします。

フォントを落としたらターミナルのフォント設定を `MesloLGS NF` に変更します。

## Powerlevel10k の導入

[Powerleve10k](https://github.com/romkatv/powerlevel10k)

プロンプトの表示をいい感じにするプラグインです。**今回の大本命ちゃん**。
各種インストール方法が記載さているので自身の環境にあったものを適用してください。

https://github.com/romkatv/powerlevel10k#installation

インストール後、ターミナルを再起動すると Powerlevel10k の設定ウィザードが始まります。
好みな方を選択するだけであっという間にセッティングが完了します👏
<img width="602" alt="スクリーンショット 2020-04-04 16.56.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223712/e0bdeed3-8af1-7ba5-ff3b-593abccdbd81.png">
適当に設定しただけでもいい感じに。
やり直したい場合は `p10k configure` でもう一度開始することができます。
細かい設定を変更したい場合は `~/.p10k.zsh` にある設定ファイルをいじればOKです。

設定ウィザードで再設定したり設定ファイルをごにょごにょ弄ってできたのがこちら。
<img width="544" alt="スクリーンショット 2020-04-05 1.07.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223712/072328a2-f852-f9c0-5172-bc12c465f727.png">
**これすっごいテンション上がる**
設定ファイルを書き加えたり変更したのは以下の3箇所（上からOS、ディレクトリ、Git）です。

```~/.p10k.zsh
# OS identifier color.
typeset -g POWERLEVEL9K_OS_ICON_FOREGROUND=255
typeset -g POWERLEVEL9K_OS_ICON_BACKGROUND=235
```

```~/.p10k.zsh
# Current directory background color.
typeset -g POWERLEVEL9K_DIR_BACKGROUND=237
# Default current directory foreground color.
typeset -g POWERLEVEL9K_DIR_FOREGROUND=32

# 〜省略〜

# Color of the shortened directory segments.
typeset -g POWERLEVEL9K_DIR_SHORTENED_FOREGROUND=103
# Color of the anchor directory segments. Anchor segments are never shortened. The first
# segment is always an anchor.
typeset -g POWERLEVEL9K_DIR_ANCHOR_FOREGROUND=39
```

```~/.p10k.zsh
typeset -g POWERLEVEL9K_VCS_BACKGROUND=220
```

~~Gitの背景色だけ該当する記述が見つからなかったので `# Version control system colors` の後に書き加えました。~~

> 2021年4月13日追記

いつの間にか `# Version control system colors` は見当たらないけど340行付近にGitに関する設定群があったのでそちらに加えました！

プロンプトヘッドの色がちょっと明るくなってるのも直したかったのですが、修正箇所が分かりませんでした…。（分かる方いたら教えてください！）

## おわり

一通り設定を終わらせたらなんだかいい感じのターミナルになりました。

最初は oh-my-zsh を入れたらいい感じになるらしい程度の認識だったのですが、入れる前にどんなものか調べてみたら前述の内容に加え実際にほしい機能は Powerlevel9k と判明。そのプラグインも後継の `Powerlevel10k` が出てたりと、導入前にいろいろ調べてみてよかったと思います。
せっかく新しいPCなのに設定やプラグインが古いのはもったいないですしね。

バリバリにターミナル使って開発する人には物足りないと思いますが、フロントエンドメインならこの程度でも十分開発を楽しめる気がします。
なんなら `Powerlevel10k` の設定だけでも楽しかったので**実質優勝**ですはっぴー。


### 参考
[とりあえずZshを使えば良いんだろう？](https://qiita.com/ktr_type23/items/3eb782f98c7a5f4c60b0)
[Homebrewでzsh-completionsを利用する手順。](https://gist.github.com/juno/5546198)
[お前らのターミナルはダサい](https://qiita.com/kinchiki/items/57e9391128d07819c321)