12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

つよつよエンジニアと思わせるためのスタイリッシュなターミナル構築

Last updated at Posted at 2020-02-11

白いターミナルはダサい

Macの標準ターミナルって、こんなかんじではないでしょうか?
スクリーンショット 2020-02-11 12.44.04.png
プログラミングを始めた人、誰もが最初はこの真っ白な画面に、恐る恐るコマンドを打つものです。
しかし、このターミナルには、ざっと以下のような問題があります。

  • 背景の白が目に痛い
  • 文字が黒一色で見づらい
  • 上級者にこのターミナルを見せると失笑される…

そうです。はっきりいってこの白いターミナルは初心者臭いのです(※好きで白背景を選んでいる人を否定するわけではありません)。

でも、この記事を読み終わる頃には、次のように変わっているでしょう。
スクリーンショット 2020-02-11 16.40.14.png

なんということでしょう~

  • 真っ白だった背景は透過色になって、Webページを見ながらコマンドを打てるようになり、
  • 黒一色だった文字に色がつくようになり、
  • さらにはGitのブランチ名が表示されるではありませんか。

さあ、あなたのターミナルを魔改造しましょう。

前提

  • Macユーザー向け
  • Homebrewの導入が済んでいる
  • 最低限のunixコマンドが打てる(cd, lsくらい)

本編

標準のターミナルから卒業する

iTerm2をインストールしましょう。
ezgif.com-video-to-gif.gif

標準ターミナルと比べて、

  1. 一瞬でウィンドウの表示・非表示ができる
  2. ペインが分割できる(上下左右)
    という利点があります。特につよつよエンジニアというのはターミナルを全画面で開いているものなので、1. はとても大事です。使い方はこちらの記事が詳しいです

bash, zsh以外のシェルを知る

Catalina以前のMacではbashが、Catalinaからはzshが標準のシェルになっていると思います。bashやzshも改造していけば、冒頭に上げたようにスタイリッシュな見た目にはできるのですが、少々設定項目が多くなってしまいます。
そこで、導入するのが新時代のシェルfishです。
fish.gif

  • コマンドをタイプミスすると色で教えてくれる
  • 過去のコマンド履歴から薄っすらと補完を表示してくれる

などなどbashやzshだと頑張って設定しなければいけない機能が、fishでは標準でついています。
導入方法は以下のとおりです。iTerm2を起動してコマンドを打ち込みましょう。

shell
$ brew install fish

# これで設定ファイルにfishを追加。Passwordを聞かれたら入力してください。
$ sudo sh -c 'echo $(which fish) >> /etc/shells' 

# fishをデフォルトのシェルに
$ chsh -s $(which fish)

その後、iTerm2を再起動すれば完了です。

ブランチ名が表示されるようにする

fishのプラグインマネージャーであるfisherを導入します。その後、fisherを使って、theme-bobthefishというプラグインをインストールします。

shell
$ curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish
$ fisher add oh-my-fish/theme-bobthefish

標準のフォントだと、文字化けしてしまうので、フォントをインストールします。
個人的なおすすめはRobotoMono Nerd Fontです。他のフォントが良い人は「powerline font」でググると良さげなものが出てきます。
インストールしたフォントをiTerm2に設定します。
スクリーンショット 2020-02-11 15.26.16.png
+,でPreferencesを開き、Profiles>Text>Fontのところでインストールしたフォントを設定しましょう。
ezgif.com-video-to-gif.gif
これで、ブランチ名が表示されるようになりました。

発展編 せっかくスタイリッシュなターミナルになったので…

スタイリッシュなターミナル構築、お疲れさまでした。ところで、

「スタイリッシュなターミナルになったけど、コマンドをたまに打つくらいしか使わないな〜」

そう思っているあなた。ターミナルだけでコードの編集もGitの操作もするようにすれば、このスタイリッシュなターミナルを周りに見せつけることができると思いませんか?
以下は、スタイリッシュなターミナルですべてを済ませたい人向けです。

エディタはVimを使うようにする

VSCodeが大人気です。世は大VSCode時代と言っても過言ではないでしょう。
そんな中Vimを使うことで周りに差をつけましょう。今から始める方にはNeoVimがおすすめです。Vimについての解説は別の記事にまとめる予定です。

Gitの操作にtigを使う

導入方法
brew install tig

VSCodeの拡張機能やSourcetreeでもできますが、tigを使えばターミナルから出る必要がなくなります。

参考記事

Macでfishを使う

12
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?