【プログラミング初心者向け】Macのターミナルを超便利にカスタマイズしてみよう

はじめに

Mac に搭載されているターミナルを使いやすくカスタマイズしてしまおうという趣旨の記事です。
できるだけ初心者の方でもわかりやすいよう書くつもりです。少し長いですが完成すれば使い心地は天と地の差だと思うので是非試してみてください!

【追記】 2024/04/26 初期状態から問題なく同じようにカスタムできました！

どんな事ができるようになるのか

・ コマンドの履歴を一覧表示して選択
・ git commit -m ''などのコマンドをスニペットとして保存、3 文字程度のコマンドで呼び出し
・ 常に現在のブランチや時間を表示
・ よく使うディレクトリをブックマーク。どこからでも楽にcd
・ 間違ったコマンドは赤字で表示。実行できるときは緑で表示

などなど、標準のターミナルよりはるかに使いやすくなります。

この記事を読んで zsh をカスタマイズする上での注意

筆者が記事を書くのに慣れておらず、また少し複雑な作業なので読み飛ばしがないようご注意ください。
複雑とは言っても、一つずつ丁寧に実行していけば問題なくカスタマイズは終わるはずです。
読むのがめんどくさくても、手順を間違えると余裕で機能しなくなるので注意です

環境

macOS(M1 チップ搭載) ventura (バージョン 13.2.1)
zsh 5.8.1 (x86_64-apple-darwin22.0)

下準備

現在のシェルを確認

Terminal

echo $SHELL

結果が/bin/zshなら OK
それ以外なら

Terminal

chsh -s /bin/zsh

でパスワード打ち込んでシェルを zsh に変更

.zshrcをバックアップ

path などが万が一にも消えないように避難させておきます。
そもそも.zshrcがないよ!って人、現在 oh-my-zsh を使用している人は飛ばして OK です。

Terminal

cp ~/.zshrc ~/.zshrc_backup

oh-my-zsh などを使用している場合はアンインストール

今回 oh-my-zsh は使用しないのでアンインストールします。

Terminal

uninstall_oh_my_zsh

実行時、.zshrcが自動でコピーされ~/.zshrc.omz-uninstalled-{日時}というファイルが生成されます。PATH などはここから新しい.zshrcに移しましょう！

余談

以前 oh-my-zsh インストール時に、.zshrcがリセットされていることに憤っていましたがしっかり~/.zshrc.pre-oh-my-zsh-{日時}　にバックアップされるようです...。

Homebrew をインストール

Homebrewというパッケージマネージャーをインストールします。

Terminal

brew -v
#Homebrew 4.0.28

バージョンが表示されれば飛ばして OK。表示されない方は

Terminal

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

でインストールしてください。

M1チップのMacの場合

.zshrc にパスを通す必要があります。

Terminal

vi ~/.zshrc

を実行し、PATH をどこかに書いておきましょう。

.zshrc

export PATH=/opt/homebrew/bin:$PATH

vi の基本的な操作は、iキーで編集モードにし、上記のパスをcommand + vで貼り付け、escキーで編集モードを抜け:wqで上書き保存し終了です。

いよいよ構築！

ここから構築に入ります。

これ以降、.zshrcというファイルを編集しまくるのですが、vi で編集するのは不便なので VScode を使用している人はそちらで行いましょう。
未使用の方はこの機会にぜひインストールしましょう!

.zshrcって？って方は、下記を確認してから構築を始めてください !

.zshrcファイルとは zsh(ターミナル)の設定を記載するファイルです。
ホームディレクトリに存在し、ファインダーではshift + command + .で表示されます。
最初はファイルごと存在しないかもしれませんが、構築する時生成されるので大丈夫です。

また、以降ターミナルでコマンドを打ったり、.zshrcに追記したりとすこしややこしいです。
コードブロック左上の表示でどこで実行（追記）するのかを必ず確認してください!

左上がiTermならコマンドをターミナルで実行します。

.zshrcなら vi や VSCode を使用し.zshrcに追記します。

VScodeで.zshrcを編集する方法(強く推奨)

VScode 未インストールの場合はVSCode インストール macとでもググってインストールしましょう。
難しいことは特にないのですぐ終わるかと思います。

インストール済みの場合、VScode でshift + command + Pでコマンドパレットを開き、shell commandを入力します。

シェルコマンド : PATH内にcodeコマンドをインストールしますを選択し権限が求められたら許可。
成功のダイアログがでたら完了です。

Terminal

code ~/.zshrc

で.zshrcを VSCode にて編集できるようになります!

1. iTerm2 のインストール

iTerm2 というターミナルアプリをインストールします。もともとのターミナルより良い機能が揃ったアプリです!

1. 上のサイトを開き、サイト下部の Download ボタンでダウンロード
2. ファインダーで iTerm を開く
3. 開くとアプリケーションフォルダに移動するか質問されるので許可
4. ダイアログで色々質問されますが、全て許可して問題ありません。

起動したらecho $SHELLでシェルが zsh かも確認しておきましょう。

以降のコマンド入力などの作業は全てこの iTerm で行います。
元々あったターミナルは以降使用しません。

2. Zinit のインストール

Zinitは、zsh のプラグインマネージャーです。起動も早くなるらしいです。

以下のコマンドを順に実行します。

iTerm2

sh -c "$(curl -fsSL https://git.io/zinit-install)"
source ~/.zshrc
zinit self-update

このような表示がなされれば OK です。yを押して続行しましょう。

コマンドを入力できるようになったら次に進みます。

source ~/.zshrcは.zshrc を読み込むコマンドです。
今後.zshrc をいじった後は実行することをおすすめします。

3. powerlevel10k をインストール

ターミナルを自分好みの見た目にカスタマイズできるプラグインです。

.zshrcに以下を記載します。ターミナルで実行するわけではないので注意！

.zshrc

zinit light romkatv/powerlevel10k

そしてsource ~/.zshrcを実行するとpowerlevel10kの設定ウィザードが起動します。

推奨フォントをインストールするか質問されるのでyで続行。

推奨フォントを使用しない場合、絵文字が表示されなかったり不都合が生じます。

フォントのインストールが終わると iTerm の再起動を求められるので再起動します。

もし推奨フォントをインストールするか質問されなかった場合、以下の手順でフォントをインストールしてください。

推奨フォントのインストール方法

1. Githubのページからフォントをダウンロード

このページにアクセスし、

を 4 つともダウンロード。

2. フォントのインストール
Finder でダブルクリックして 4 つともインストールします。

3. フォントの適用
iTerm でcommand + ,で設定を開き画像の場所でインストールしたフォントを適用させます。

これでフォントの設定は終了です。

また、そもそもウィザードが表示されなかった場合はp10k configureをターミナルで実行してください。

再起動後、表示されるウィザードにしたがってテーマを設定していきます。

色々なデザインを提示されるので、各自で好きなデザインに設定してください。

例えば、3 番のデザインがいいなら3キーを押す、といった手順です。

選択肢に(recommend)と書かれた選択肢は原則それを選択してください。

例外的にInstant Prompt Modeのときのみ(2)を選択してください。

私は最終的にこうなりました。

やり直したい場合、p10k configureで再設定できます。

VSCode のターミナルで表示がおかしい場合(アイコンが表示されないなど)

VSCode のターミナルでpowerlevel10kの設定は反映されているけど、絵文字が表示されていない、などの場合、VSCode のsettings.jsonを編集する必要があります。

VScode 上にてshift + command + Pでコマンドパレットを開き、open settingsと入力します。

Preference: open Settings (JSON)または
Preference: open User settings(JSON)をクリックします。

Json ファイルが開くので、下記の 2 行を追記しましょう。フォントサイズはお好みで変えてください。

settings.json

"terminal.integrated.fontFamily": "MesloLGS NF",
"terminal.integrated.fontSize": 12,

例

settings.json

{
  "git.autofetch": true,
  "terminal.integrated.inheritEnv": false,
  "terminal.integrated.fontFamily": "MesloLGS NF", <ここと
  "terminal.integrated.fontSize": 12,　 <ここ。
  "explorer.confirmDragAndDrop": false,
  "workbench.iconTheme": "vscode-icons",
}

VSCode のターミナルが powerlevel10k で設定した見た目に変わっていない場合

powerlevel10kで見た目を変えたのにそれが反映されていない場合、まずは VSCode の再起動を試してください。(command + Qなどで完全に終了させます)

それでも治らない場合、以下の解決法で反映されるかと思います。

解決法

1. VSCode でshift + command + Pでコマンドパレットを表示
2. Open User Settingsと入力し、Preference: Open User Settingsを開きます
3. 下の画像のように、terminalで絞り込み、ターミナル(Terminal)タブからTerminal > External: Osx Execを探し、iTerm.appに書き換えます。

これで変更が反映されます

iTerm 起動時にエラーが出てしまう場合

iTerm 起動時に
[WARNING]: Console output during zsh initialization detected.というエラーがでてしまった時の対処法

エラー全文

iTerm

[WARNING]: Console output during zsh initialization detected.

When using Powerlevel10k with instant prompt, console output during zsh
initialization may indicate issues.

You can:

  - Recommended: Change ~/.zshrc so that it does not perform console I/O
    after the instant prompt preamble. See the link below for details.

    * You will not see this error message again.
    * Zsh will start quickly and prompt will update smoothly.

  - Suppress this warning either by running p10k configure or by manually
    defining the following parameter:

      typeset -g POWERLEVEL9K_INSTANT_PROMPT=quiet

    * You will not see this error message again.
    * Zsh will start quickly but prompt will jump down after initialization.

  - Disable instant prompt either by running p10k configure or by manually
    defining the following parameter:

      typeset -g POWERLEVEL9K_INSTANT_PROMPT=off

    * You will not see this error message again.
    * Zsh will start slowly.

  - Do nothing.

    * You will see this error message every time you start zsh.
    * Zsh will start quickly but prompt will jump down after initialization.

For details, see:
https://github.com/romkatv/powerlevel10k/blob/master/README.md#instant-prompt

-- console output produced during zsh initialization follows --

解決法

Powerlevel10k の設定ファイル、.p10k.zshを編集する必要があります。

iTerm

code ~/.p10k.zsh

で.p10k.zshを開き、command + fで検索バーに
typeset -g POWERLEVEL9K_INSTANT_PROMPT=verboseを入力します。

typeset -g POWERLEVEL9K_INSTANT_PROMPT=verboseを
typeset -g POWERLEVEL9K_INSTANT_PROMPT=quietに変更し、保存します。

iTerm でsource ~/.zshrcを打てばエラーはなくなるはずです!

4. 便利なオプションを追加

zsh では何かをインストールせずとも、.zshrcに追記するだけで ON にできるオプションがあります。
おすすめのオプションとその効果を書いたリストを以下に記載するので、.zshrcに追記してください。

.zshrc

# -------------------------------------------------------
#      setting....
# -------------------------------------------------------

# コマンド履歴の管理ファイル
HISTFILE=~/.zsh_history
# メモリに保存する履歴のサイズ
export HISTSIZE=10000
# ファイルに保存する履歴のサイズ
export SAVEHIST=100000
# 補完で小文字でも大文字にマッチさせる
zstyle ':completion:*' matcher-list 'm:{a-z}={A-Z}'
# コマンドのスペルを訂正
setopt correct
# 補完候補を詰めて表示
setopt list_packed
## 他のzshと履歴を共有
setopt inc_append_history
setopt share_history
## パスを直接入力してもcdする
setopt AUTO_CD
# 補完候補をカーソルで選択
zstyle ':completion:*:default' menu select=1
# スラッシュを単語の区切りと見なす
autoload -Uz select-word-style
select-word-style bash
WORDCHARS='.-'
# ヒストリーに重複を表示しない
setopt hist_ignore_all_dups
# 重複するコマンドが保存されるとき、古い方を削除する。
setopt hist_save_no_dups
# コマンドのタイムスタンプをHISTFILEに記録する
setopt extended_history
# HISTFILEのサイズがHISTSIZEを超える場合、最初に重複を削除
setopt hist_expire_dups_first
# コマンドラインでも # 以降をコメントと見なす
setopt interactive_comments
# LSDで使用されるカラーを変更(ディレクトリのみ変更)
export LS_COLORS="di=36"
# cd抜きでもパスと認識されればcd
setopt AUTO_CD

一部働かないオプションがあるかもしれませんが、この記事全ての項目が終われば動くはずです。

５. 各種便利なプラグインのインストール

ここでは必須とも言える便利なプラグイン、見た目を整えるプラグインのインストールを行なっていきます。

まず５つのプラグインを紹介します。

インストールはあとでまとめて行うので簡単な説明と使い方を記載します。

詳しい使い方は公式の Github などで確認できます。

zsh-autosuggestions

過去に入力したコマンドから候補を引っ張って薄く表示してくれるプラグイン

fast-syntax-highlighting

入力したコマンドに色付けしてくれるプラグイン

間違っている場合赤字にしてくれる機能もあります。

zsh-completions

Tabキーで次に来るコマンドを補完してくれるプラグイン

cd-bookmark

ディレクトリを任意の名前でブックマークし、簡単にcdできるようになるプラグイン

よく使用するディレクトリはブックマークしておきましょう。

.zshrc

# -a オプションで今いるディレクトリをブックマークに追加する。(複数登録可)
% cd-bookmark -a name　<=任意の名前

# 'name' を指定すれば上で設定したディレクトリに戻れる
% cd-bookmark name

# オプション無しで登録済のブックマーク一覧を表示する
% cd-bookmark
name|{設定したディレクトリ}

LSDeluxeのインストール

lsコマンドを使用した時の表示をカラフルに、見やすくするプラグイン

参考画像(公式 Github より)

ここまでのプラグイン 5 つを一気にインストールします

.zshrcに追記

.zshrc

autoload -Uz compinit
compinit

zinit light zdharma-continuum/fast-syntax-highlighting
zinit light zsh-users/zsh-autosuggestions
zinit light zsh-users/zsh-completions
zinit light mollifier/cd-bookmark

LSDeluxe は Homebrew でインストールします。

iTerm2

brew install lsd

.zshrcに追記します。

.zshrc

alias ls='lsd'
alias l='ls -l'
alias la='ls -a'
alias lla='ls -la'
alias lt='ls --tree'

これを追記することにより、lsコマンドを打った時lsdに自動で変換されます。

このalias、自分の好きなように色々設定できるのでよく打つコマンドには打ちやすいものを設定しておくと便利です！

ではその他のプラグインをインストールします。

peco・anyframe のインストール

シェルフィルタリングプラグイン、とそれを使いやすいようにするプラグイン

簡単に言うと履歴の確認、検索が便利になります。

peco のインストール

iTerm2

brew install peco

anyframe のインストール

.zshrc

zinit light mollifier/anyframe

以下を.zshrcに追記

.zshrc

# -----------------------------
#  Anyframe bindKey
# -----------------------------

# # ディレクトリの移動履歴を表示
bindkey '^]' anyframe-widget-cdr
autoload -Uz chpwd_recent_dirs cdr add-zsh-hook
add-zsh-hook chpwd chpwd_recent_dirs

# # コマンドの実行履歴を表示
bindkey '^R' anyframe-widget-execute-history

# # Gitブランチを表示して切替え
bindkey '^x^b' anyframe-widget-checkout-git-branch

追記し終わったらsource ~/.zshrcを実行し、

control + R でこのような画面が出てきたら成功です

これはbindkey '^R' anyframe-widget-execute-history部分の機能で、コマンドの履歴が一覧表示されています。

各部の色がなんか気にいらないので変えましょう。(気にならない人は飛ばして OK)

iTerm2

mkdir ~/.config/peco
touch ~/.config/peco/config.json

で config ファイルを作成し、

code ~/.config/peco/config.json

などでconfig.jsonを開いて追記します。

config.json

{
  "Style": {
    "Basic": ["on_default", "default"],
    "Selected": ["underline", "on_cyan", "black"],
    "SavedSelection": ["bold", "on_yellow", "white"],
    "Query": ["yellow", "bold"],
    "Matched": ["yellow"]
  }
}

色はお好みで変えてみてください。peco の style 設定一覧はこちら

Zeno.zshのインストール

便利なスニペットを設定できるプラグインです。

前述のaliasよりも使いやすく、細かい設定が可能です。

また履歴に展開後のコマンドが残るところも便利です。

まず前提パッケージのインストールをします。

iTerm2

brew install deno
brew install fzf

問題なく終わったらzeno.zshのインストール・設定をします。

以下を.zshrcに追記します。

.zshrc

export ZENO_HOME=~/.config/zeno

zinit ice lucid depth"1" blockf
zinit light yuki-yano/zeno.zsh

if [[ -n $ZENO_LOADED ]]; then
  bindkey ' '  zeno-auto-snippet
  bindkey '^g' zeno-ghq-c
  bindkey '^x' zeno-insert-snippet
fi

次にスニペットを設定するconfig.ymlファイルを作成します。

iTerm2

mkdir ~/.config/zeno
touch ~/.config/zeno/config.yml

で config ファイルを作成し、

code ~/.config/zeno/config.yml

などのコマンドでconfig.ymlを開き以下を追記します。

config.yml

snippets:
  # 標準的なsnippet
  - name: git status
    keyword: gs
    snippet: git status --short --branch

  # {{}}で囲むことによって''内に自動でカーソルが移動
  - name: git commit message
    keyword: gcim
    snippet: git commit -m '{{commit_message}}'

保存して設定は完了です。

お好みでよく使うコマンドを設定しておくと便利です。

細かい使い方はこちら（zeno.zsh 作者様の記事）

設定した keyword を入力し、spaceキーを入力することによって設定した snippet が展開されます。

control + xで設定したスニペット一覧を表示、またそこから選択して実行も可能です。

これでこの記事でのすべての設定は終わりです。お疲れ様でした!

下準備の段階で PATH などを避難させている方は.zshrcに戻しておきましょう。

この記事における.zshrcの完成形

.zshrc

if [[ ! -f $HOME/.local/share/zinit/zinit.git/zinit.zsh ]]; then
    print -P "%F{33} %F{220}Installing %F{33}ZDHARMA-CONTINUUM%F{220} Initiative Plugin Manager (%F{33}zdharma-continuum/zinit%F{220})…%f"
    command mkdir -p "$HOME/.local/share/zinit" && command chmod g-rwX "$HOME/.local/share/zinit"
    command git clone https://github.com/zdharma-continuum/zinit "$HOME/.local/share/zinit/zinit.git" && \
        print -P "%F{33} %F{34}Installation successful.%f%b" || \
        print -P "%F{160} The clone has failed.%f%b"
fi

source "$HOME/.local/share/zinit/zinit.git/zinit.zsh"
autoload -Uz _zinit
(( ${+_comps} )) && _comps[zinit]=_zinit

if [[ -r "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh" ]]; then
  source "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh"
fi

[[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh

autoload -Uz compinit
compinit

# -----------------------------------------------------------------------------
#   Plugin list
# -----------------------------------------------------------------------------

zinit light romkatv/powerlevel10k
zinit light zdharma-continuum/fast-syntax-highlighting
zinit light zsh-users/zsh-autosuggestions
zinit light zsh-users/zsh-completions
zinit light mollifier/anyframe
zinit light mollifier/cd-bookmark
zinit ice lucid depth"1" blockf
zinit light yuki-yano/zeno.zsh

# ---------------------------------------------------------------------------
#        PATH ...
# ---------------------------------------------------------------------------

export PATH="$PATH:/usr/local/bin"
export PATH=/opt/homebrew/bin:$PATH
export ZENO_HOME=~/.config/zeno

# -----------------------------------------------------------------
#      setting....
# -----------------------------------------------------------------

# コマンド履歴の管理ファイル
HISTFILE=~/.zsh_history
# メモリに保存する履歴のサイズ
export HISTSIZE=10000
# ファイルに保存する履歴のサイズ
export SAVEHIST=100000
# 補完で小文字でも大文字にマッチさせる
zstyle ':completion:*' matcher-list 'm:{a-z}={A-Z}'
# コマンドのスペルを訂正
setopt correct
# 補完候補を詰めて表示
setopt list_packed
## 他のzshと履歴を共有
setopt inc_append_history
setopt share_history
## パスを直接入力してもcdする
setopt AUTO_CD
# 補完候補をカーソルで選択
zstyle ':completion:*:default' menu select=1
# スラッシュを単語の区切りと見なす
autoload -Uz select-word-style
select-word-style bash
WORDCHARS='.-'
# ヒストリーに重複を表示しない
setopt hist_ignore_all_dups
# 重複するコマンドが保存されるとき、古い方を削除する。
setopt hist_save_no_dups
# コマンドのタイムスタンプをHISTFILEに記録する
setopt extended_history
# HISTFILEのサイズがHISTSIZEを超える場合、最初に重複を削除
setopt hist_expire_dups_first
# コマンドラインでも # 以降をコメントと見なす
setopt interactive_comments
# LSDで使用されるカラーを変更(ディレクトリのみ変更)
export LS_COLORS="di=36"
# cd抜きでもパスと認識されればcd
setopt AUTO_CD

# ----------------------------
# alias
# ----------------------------
# 使わないaliasは消してもいい
# zeno-snippet > ~/.config/zeno/config.yml

alias g="git"
alias gb="git branch"
alias gsw="git switch"
alias gco="git checkout"

alias ls='lsd'
alias l='ls -l'
alias la='ls -a'
alias lla='ls -la'
alias lt='ls --tree'

alias tp='cd-bookmark'

alias dcb="docker-compose build"
alias dcu="docker-compose up -d"
alias dcd="docker-compose down"
alias dce="docker-compose exec"
alias dcps="docker-compose ps"

alias sz="source ~/.zshrc"


# -----------------------------
#  Anyframe bindkey
# -----------------------------
# color config > ~/.config/peco/config.json

# ディレクトリの移動履歴を表示
bindkey '^]' anyframe-widget-cdr
autoload -Uz chpwd_recent_dirs cdr add-zsh-hook
add-zsh-hook chpwd chpwd_recent_dirs

# コマンドの実行履歴を表示
bindkey '^R' anyframe-widget-execute-history

# Gitブランチを表示して切替え
bindkey '^x^b' anyframe-widget-checkout-git-branch


# -----------------------------
#  zeno setting
# -----------------------------
if [[ -n $ZENO_LOADED ]]; then
  bindkey ' '  zeno-auto-snippet
  bindkey '^x' zeno-insert-snippet
  bindkey '^g' zeno-ghq-cd
fi

おわりに

ここまでいじるとかなり使いやすいものになったのではないかと思います。

自分でカスタマイズしていくと使うのも楽しくなるので、ぜひいろいろ調べてさらに自分好みにしていってください!

また、この記事にミスや改善点などありましたらコメントに書いてくださると助かります。

ここまで読んでくださりありがとうございました!

参考記事

抜けがありましたら申し訳ございません。