最短最速でターミナルカスタマイズをする。

はじめに

初めまして！DMM WEBCAMPでメンターをしている@y-hirako0928です。

この記事では、日々プログラムを書いていく中で頻繁に使うターミナルを使いやすく、カッコよくしていく方法を紹介していく記事です。

ターミナルといえば、黒い背景に白い文字。実行された結果も全部白文字。

正直、ダサくないですか？
もっとかっこいいターミナル、欲しくない？

https://qiita.com/kinchiki/items/57e9391128d07819c321

この質問にYES!と思った人は、ぜひぜひターミナルを自分の思いのままにカスタマイズしていきましょう！

この記事に書かれていること：
・ Macのターミナルに使えるカスタマイズ知識
・ カスタマイズ未経験者向けの簡単な解説
・ 最低限のカスタマイズの例
・ さらに進んだカスタマイズをする場合に便利な記事一覧

この記事に書かれていないこと：
・windowsのコマンドプロンプトやPowerShellのカスタマイズ
・シェルについての詳しい解説
・zshプラグインなど、外部ツールやインストールが必要なツールを用いたカスタマイズについて

1. iTerm2を導入しよう

iTerm2とは、ターミナルと同じコマンドラインツールです。
この記事では、ターミナルのカスタマイズよりもiTerm2を導入し、カスタマイズすることをオススメしています。

iTerm2

iTermは

ターミナルを素早く&カッコよく開く設定をつけることができる！

私は、controlを2回連続で入力するとしたからニュッ！とiTerm2のコマンドラインが表示されるように設定しています。設定を変更すれば上部、右側、左側からニュッ！と表示できるように設定することもできます。

ね？かっこいいでしょ？
かっこいい以外にも、ブラウザでサイトをみながらちょっとしたコマンドを実行したい時にも便利に使えます。

また、iTerm2は設定できる項目が多く、ユーザーの好みに合わせてより細かなカスタマイズができます。

iTerm2のインストールに特別な設定は必要ありませんので、外部アプリをダウンロードする手順を素直にこなしていけば問題なくダウンロードできます。サイトのDownloadをクリックし、アプリを起動してみましょう。

もし、細かい手順を知りたい方はこちらの記事を参考にすると良いかもしれません。

初心者向け iTerm2のインストール方法 - Qiita

ニュッ! と飛び出るターミナルの設定方法

1. iTerm2 > preferences...をクリックして設定を開きます

2. ホットキー用の設定を作ります

メニューからProfileを選び、+をクリックして新しいプロファイルを作成。Name:をわかりやすいようにHotkey windowを作ります。
こうすることで、windowとHotkey windowの二つを同時に使うことができます。

3. keyメニューを開きます

keyメニューに移り、A hotkey opens a dedicated window with this profileの項目にチェックを入れ、configure Hotkey WindowをクリックしてHotkeyの設定画面を開きます。

4. ホットキーを開くためのアクションを自由に設定します。

個人的にオススメは、^Controlキーのダブルタップでニュッ！と開く設定です。もし同じ設定にするならば、Double-tap keyの項目にチェックを入れ、^Controlを選択すると良いでしょう。

5. どの場所から開くかを設定します。

メニューからwindowを選択し、Settings for New Windowsの項目を編集します。

下からニュッ！と出す設定にしたければ、Styleの項目の中からFull-Width Bottom of Screenを選択します。その他にも、フルスクリーンで開く設定や、ニュッ！と出てくる場所を下部以外に設定する項目がありますので色々と試してみると良いでしょう。

これで、カッコよくターミナルを開く設定は完成です。
もし細かくカスタマイズをしたい場合は設定項目を調べてみると良いかもしれません。
iTermの設定に関しては、Qiitaやその他のサイトで設定例を公開している方がたくさんいらっしゃいますので、そうした記事を参考にしてみるのも良いかもしれません。

記事によってはバージョンが古く、レイアウトが変わっているため設定を読み解く若干の英語力が必要になってきます。まぁ、エラー文を読む労力とそこまで変わらないと思いますのでぜひぜひチャレンジしてみてください。

これまで私がカスタマイズしていく中で参考にした先駆者様の記事一覧
僕がiTerm2を使ってる理由 - Qiita
iTerm2のHotkeyを使わないなんてもったいない！！ - Qiita

2. .zshrcを見つけよう

では、シェルの設定をしましょう。

設定を始める前に、現在使っているシェルを確認しましょう。

hogehoge[~] % echo $0
-zsh

hogehoge[~] %

シェルという言葉に聞き馴染みがなかったら、”ターミナルの中で動いているプログラム、パソコンを動かす時に使うプログラムなんだなー”ぐらいのイメージでOKです。

(ちょっと知っている人向けの蛇足)
ここで、少しシェルを齧ったことがある方であれば、なんでbashじゃなくてzshなの？と疑問に思うかもしれません。zshのカスタマイズ方法を書いている理由としては、macOS 10.15 Catalinaからデフォルトシェルがbashからzshに変更されたからです。
おそらく、macを最近買った方や、Catalinaにアプデートしている方のターミナルはzshが動いているハズなので、zshの設定ファイルをカスタマイズすれば問題ないと思います・・・！

自分は、Catalinaになる前からzshを使っていたため、アップデート後自動的にbashからzshに変わるかどうか定かではありません。もし「echo $0って入力したら-Bashって表示されたよー！」とか、「echo $SHELLと入力したら/bin/bashと表示されたよー！」などの現象がありましたら、コメント蘭でMacのバージョンを添えてお知らせいただけると幸いです。

まず、設定ファイルがある場所を確認します。
cd ~
でrootディレクトリ へ移動してください。

ls -a
で、カレントディレクトリ内にある隠しファイルを探しましょう。
.zshrcというファイルがあれば、それがシェルの設定ファイルです。
もしも.zshrcファイルが存在しなければ、

touch .zshrc

で.zshrcファイルを作りましょう。

hogehoge[~] % ls -a
~(その他いろいろなファイルやディレクトリ)~
.zprofile
.zsh_history
.zshenv
.zshrc

hogehoge[~] %

rootディレクトリに.zshrcがあることが確認できましたら、いよいよ.zshrcの編集に移ります。

3. vimの基本的な使い方

設定ファイルの編集にはVimを使うと良いでしょう。.(ピリオド)から始まる設定ファイルは、Sublime TextやVisual Studio Codeのようなスクリプトエディタを使って編集することができないファイルです。
(カスタマイズ次第でできると思いますが、vimと触れ合う良い機会ですのでvimを使ってみましょう。)

Vimを使って設定ファイルを開いてみましょう。

hogehoge[~] % vi .zshrc

(もしファイルが見つからなければ、cd ~ でディレクトリを変えてから実行してみましょう。もしそれでもファイルが見つからなければ、touch .zshrcのコマンドを入力してください。)

すると、Vimのエディタが起動し.zshrcファイルの中身を見る事ができます。

Vimではコマンドを実行して保存などをします。

vimの操作についてさらに詳しく知りたければこちらのサイト( 知識0から始めるVim講座 - Qiita )や、vim 入門などのキーワードで調べてみてください。
また、ターミナル上でvimtutorのコマンドを実行すると、vimの日本語チュートリアルを見ることができます。

4. 簡単におしゃれにしたい人向け(コピー&ペーストでOK!)

1. Simple is the best

PROMPT='%*
%F{green}[%~]%f %# '

現在の時刻と、カレントディレクトリを表示するプロンプトです。
作業時間を意識するため、常にプロンプトの脇に時間が表示されるようにしています。
(私はこのスタイルにしています。)

さらに改行を入れるとこんな感じ

PROMPT='
%*
%F{green}[%~]%f
%# '

カレントディレクトリとコマンドラインを表示する行を分けると、ディレクトリが深くなっても良い感じにみやすく表示してくれます！

2. 見慣れたデフォルトプロンプトをカラフルに！

PROMPT='%F{magenta}%B%n%b%f@%F{blue}%U%m%u%f %F{green}[%~]%f %# '

ユーザー名と現在利用しているPCの名前、カレントディレクトリを表示するプロンプトです。

User_name@UsernoMacBook-Pro ~ %

Zshプロンプトのデフォルトデザインがこんな感じなので、デフォルトデザインに慣れている人にとっては見やすいプロンプトかもしれません。

3. 左右を広く使ったプロンプト

PROMPT='%F{green}[%~]%f %# '
RPROMPT='%*'

PROMPT='%F{magenta}%B%n%b%f@%F{blue}%U%m%u%f %# '
RPROMPT='%F{green}[%~]%f'

RPROMPTで右側にもプロンプト の設定をすることができます。

4.コマンド実行結果ごとに、改行を入れたい！

PROMPT='
%*
%F{green}[%~]%f %# '

プロンプト の頭に改行を入れるとこのようになります。
隙間が空いている方が見やすい！という方は、改行をしてみましょう。

ここまでカスタマイズができれば、だいぶ使いやすいターミナルになってきたと思います！

! 設定を変更したら実行してください

変更した設定を読み込み、画面に反映させるために

hogehoge[~] % source .zshrc

を実行してください。
そうすると、プロンプトが設定したデザインに変わります！

5. さらに自由なカスタマイズがしたい！(オススメ参考資料)

ここからは、ここまでのカスタマイズでも満足できない！もっとカスタマイズしたい！向けです。

紹介したカスタマイズの例で使用しているコードの意味をまとめていきます。

プロンプトの設定

PROMPT=''
RPROMPT=''

zshのプロンプトは、PROMPT=以降に書かれた内容は、コマンドラインの左端に表示。
RPROMPT=以降に記述した内容は、コマンドラインの右端に表示されます。

文字に色をつける

%F{color}お好きなコマンド%f

%F{color}と%fで挟まれた場所は、colorで定義した色に文字色を変えます。
ここで使っているコマンド以外にも背景色を設定するやり方もあったりします。
詳しくは、こちらのQiitaを参考にすると良いです。

zshでプロンプトをカラー表示する - Qiita

その他のコード

その他にも出力できる項目はまだまだありますので、調べてみると面白いかもしれません！

zshプロンプトのカスタマイズ - Qiita
zsh 設定 - プロンプト -

沼に挑戦したい方

fishシェルを導入してみよう！
何も、シェルはbashとzshしかないわけではありません。
世の中にはfishシェルというシェルも存在します。
もし、自分が今使っている環境以外のシェルにも興味が湧いたら、導入してみると楽しいですよ・・・！

fish shellが結構良かった話 - Qiita
シェルにあんまりこだわりのなかった僕がfishを使ってかんじたこと - SlideShare

shellスクリプトを勉強してみよう！

こんなサイトがあります。一通り中身に目を通せば、シェルスクリプトの意味がだいたい理解できるようになるかも・・・？

UNIX & Linux コマンド・シェルスクリプト リファレンス

もうここからは趣味の領域になってきます。興味がある人はググってみてください！

[補足]bashをカスタマイズする場合

周りの人に話を聞いてみたところ、「そもそもCatalinaにしてねーよ！」とお声をいただきましたので、bashでのカスタマイズ方法とカスタマイズ例を紹介していこうと思います。

今のターミナルでbashが動いているかを確認したい場合は、先ほどと同じようにターミナルでコマンドを入力すればわかります。

hogehoge[~] $ echo $0
-bash
hogehoge[~] $

ちなみにですが、

hogehoge[~] % ←　プロンプトが`%`表示ならzsh
hogehoge[~] $ ←　プロンプトが`$`表示ならbash

とざっくり目星をつけることもできます。(カスタマイズで変更できる部分なので、あてにはできません。)

では、

hogehoge[~] $ cd ~

でrootディレクトリへ移動しましょう。
移動したら、bashの設定ファイルを探します。

hogehoge[~] $ ls -a
~(その他いろいろなファイルやディレクトリ)~
.bashrc
.bash_profile

bashの場合は、.bashrcと.bash_profileが設定ファイルです。
プロンプトカスタマイズするだけなら、.bashrcを設定すれば問題ないです！

hogehoge[~] $ vi .bashrc

でbashの設定ファイルを開きましょう。

プロンプトの設定例(コピペでOK!)

1. Simple is the best

export PS1='\n\t\n\[\e[1;32m[\w]\[\e[0m\] \n$ '

2. 見慣れたデザインをカラフルに

export PS1='\[\e[35m\]\u\[\e[0m\]@\[\e[34m\]\h\[\e[0m\] \[\e[32m\][\w]\[\e[0m\] \$ '

編集が終わりましたら、zshと同様に設定を適応する必要があります。

hogehoge[~] $ source .bashrc

これで設定したレイアウトが反映されました！

参考サイト
【Bash】ターミナルのプロンプトのカスタマイズ方法まとめ - Qiita

終わりに

ターミナルのカスタマイズは、ハマると結構楽しいです！oh-my-zshを導入してみたり、zshの補完機能を強化したり、gitのbranch名やcommit状況を表示するなどなど、できることは無限大と言って良いでしょう。
本当にハマってしまうと一日中ターミナルのカスタマイズを永遠とカスタマイズしてしまう・・・なんて状況も発生してしまうかもしれません。

もちろんハマってみるとかなりプログラミングの勉強になります。私も、bashやzshのカスタマイズを通じて、隠しファイルの存在やプログラムファイルの保存場所、ディレクトリの概念や"PATHを通す"という概念に触れることができました。

ポートフォリオ作りに疲れた時、休みの日にターミナル環境弄りに挑戦したいなと感じた時、時間に余裕があって心に余裕がある時。そんなタイミングがありましたら、ぜひターミナル環境弄りにハマってみてください！