モバイルアプリエンジニアの山下（@yamshta）です。
先日、エンジニアチームでの勉強会にてターミナルを題材としたハンズオンを行いました。
今回はその際に共有した業務効率を上げるためのターミナル環境構築について紹介します。
以下に心当たりのある方は一緒に構築していきましょう。
- ターミナルがモノクロ
- ターミナルをいい感じにしたいけどよくわからない
- ターミナルにこだわりが無い
iTerm2
まずはじめにプリインストールされているターミナルとはお別れをします。
ターミナルアプリには、便利な機能が含まれている『iTerm2』を使うのがオススメです。こだわりが無い人こそ、とりあえずこれを使っておきましょう。
iTerm2 - macOS Terminal Replacement
上記のページからダウンロードして、解凍したものをApplicationフォルダに移動します。
iTerm2を使うことで以下の機能をすぐに使えるようになります。
- 画面分割
- オートコンプリート（コマンドやディレクトリなど）
- リンクを開く
- ペースト履歴からの入力
- インスタントリプレイ（実行処理のリプレイ）
- Hotkey 起動
この他にも機能や設定が細かく存在しますが、始めのうちは使い方を覚えきれず挫折しかねないため、よく使う機能から徐々に身につけていきましょう。
それでは機能の使い方を紹介します。
使い方
操作の手間を省くためにショートカットキーを覚えることが大切です。キーボードから手を離さずに操作することで無駄な動作を省けます。普段からGUIのツールを使っている方も少しずつ慣れていきましょう。
画面分割
画面分割はGitリポジトリ内のサブモジュールを操作したり、ssh接続をする際によく使います。
| 操作 | ショートカット |
|---|---|
| 横分割 | cmd + d |
| 縦分割 | cmd + shift + d |
| 閉じる | cmd + w |
分割された画面のことをペインと呼び、ペイン間は以下のショートカットで移動します。
| 操作 | ショートカット |
|---|---|
| 左のペインに移動 | cmd + opt + ← |
| 右のペインに移動 | cmd + opt + ➝ |
| 上のペインに移動 | cmd + opt + ↑ |
| 下のペインに移動 | cmd + opt + ↓ |
| 前ペインに移動 | cmd + [ |
| 次ペインに移動 | cmd + ] |
慣れないうちは前後の移動を繰り返して目当てのペインにたどり着けるとよいと思います。
オートコンプリート
先頭の文字を入力した後にcmd + ; を打つことで、入力や表示履歴から補完候補を選択することができます。
入力を進めることで絞り込み検索が行えます。
リンクを開く
cmd + クリック でリンクを開くことができます。
| リンク対象 | アプリケーション |
|---|---|
| URL | Webブラウザ |
| ディレクトリパス | Finder |
| ファイル | 指定のエディタ |
ペースト履歴からの入力
cmd + shift +hでペースト履歴を表示する事ができます。
こちらもオートコンプリート同様に入力を進めることで絞り込み検索が行えます。
インスタントリプレイ
cmd +opt + b でターミナルでの操作をリプレイで確認できるシークバーを表示することができます。
これはダウンロード処理や実行ログが流れてしまった場合などでよく使います。
通常操作時でも操作や手順の確認に非常に役に立ちます。
矢印キーでシークバーを操作することができ、escで操作を終わります。
Hotkey 起動
ターミナルはいつでもすぐに起動したいものです。
Preferences > Keys の下部にあるHotkeyを設定しましょう。
私はctrl + spaceを設定しています。
次にカーソルのある画面に対してフルスクリーンで表示されるように、以下の設定をします。
- Transparency: 透明度
- Style: Fullscreen（全画面表示）
- Screen: Screen with Cursor（カーソルのある画面で表示）
- Space: All Spaces（全てのスペースで表示）
最後に、デスクトップが切り替わらないように「Native full screen windows」のチェックを外します。
ここまで設定を行うとiTermが以下の様に表示され、ブラウザやエディタを確認しならが作業が行なえます。
以上、6つの機能を自然と使えるようになると作業効率の向上に繋がります。
テーマを変更
iTermはプリインストールされているターミナルと同様に配色を変更することができます。あらかじめ用意されているテーマで気に入るものがない場合は公開されているテーマをインポートするとよいです。
今回は真っ黒な画面から心機一転、明るいテーマに変更したいと思います。
テーマを探すスタンダードな方法としてiTerm2-Color-Schemes から選びます。
ソースをクローン（or zipダウンロード）してPreference > Colors > Color Presets > Importから、気に入ったテーマの.itermcolorsファイルを選択します。
インポートが完了したらもう一度Color Presetsを開いて、テーマを選択すると変更することができます。
さて、これで配色を変更できましたが、次はプロンプト（カーソルの左側の部分）にパスやGitのステータスの表示を増やすためにシェルの環境を整えたいと思います。
fish shell
今回は数あるシェルの中からfish shellを導入してみます。
fish-shell/fish-shell: The user-friendly command line shell.
fish shell（以下、fish）は最初から以下の機能を備えており、インストールしただけでも十分に活用できます。
- シンタックスハイライト
- コマンドやパスなどのオートサジェスチョン
- タブ補完
- コマンドエラー判定
- 存在しないコマンドやディレクトリの場合は赤文字で表示
- grepに 色がつく ..等
導入方法
Homebrewでインストールできます。
$ brew install fish $ fish -v fish, version 2.7.1
インストールが完了したらデフォルトシェルを変更する必要があります。設定後、次回起動時からは bash ではなく、fish が起動されるようになります。
# `/etc/shells`に`/usr/local/bin/fish`を追記 $ echo /usr/local/bin/fish | sudo tee -a /etc/shells # デフォルトシェルを fish に変更 $ chsh -s /usr/local/bin/fish
iTermを再起動してみましょう。以下のように表示されれば成功です。
（テーマが戻っているのは無視してください）
設定
fishは以下のコマンドを打つことでブラウザから設定の変更ができます。
※ iTermを使っている場合、配色の変更はiTerm側に依存するため反映されません
$ fish_config
デフォルトの設定でプロンプトを変更してみましょう。
プロンプトで表示する情報を増やすことで業務効率の向上に繋がります。
プロンプトに気に入ったものがない場合は、後述するプラグインを導入してカスタマイズができます。
使い方
上で挙げた機能を使うにはショートカットやコマンドを覚える必要があります。覚えることが増えて大変ですが、iTermの機能と組み合わせることで作業中に過去のコマンドを思い出したり、調べ直したりなおすといった操作が無くなります。
オートサジェスチョン
パスやコマンド、オプションに対してカーソルの右に灰色でコマンドの候補を表示します。
採用しない場合はそのまま入力を続けます。
| 操作 | ショートカット |
|---|---|
| 採用 | ctrl + f or e |
| 1語のみ採用 | alt + ➝ |
ワイルドカード
fishはワイルドカード「*」をサポートしています。
例えばディレクトリ内のPNG画像を表示したい場合は、以下のようにコマンドを打ちます。
$ ls *.png image.png image2.png image3.png
注意
fishは他のシェルと違った入出力方法を持っています。
これらについてより詳しく知りたい方は以下のサイトが参考になります。
- fish: Documentation
- 本家ドキュメント
- ターミナルから
$ help documentを打つとページが表示できます
- fish 日本語ドキュメント - 全訳！fishシェル普及計画
ここまででも充分に便利ですが、更に便利にするためプラグインを導入します。
fisherman
fisherman/fisherman: The fish-shell plugin manager.
fish shell用のプラグインマネージャです。READMEの日本語訳 があります。
同様なことを行うツールで oh-my-fish というものがありますが、こちらはフレームワークとなっており、専用のコマンドや設定を起動時にロードするためやや重くなります。
fishermanはoh-my-fishのプラグインも利用できるため、こちらのみインストールします。
導入方法
curl でインストールします。
$ curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs git.io/fisherman
使い方
コマンドは install、update、remove、list、helpのみです。
これらは以下のように簡易的に入力することができます。
| 操作 | コマンド例 |
|---|---|
| install | fisher <プラグイン名> |
| update | fisher up <プラグイン名> |
| remove | fisher rm <プラグイン名> |
| list | fisher ls |
| 利用可能なプラグインの検索 | fisher ls-remote |
| プラグインの全削除 | fisher ls | fisher rm |
| fishermanのアンインストール | fisher self-uninstall |
テーマを変更
fishの設定でも配色やプロンプトの変更ができましたが、気に入ったものがない場合は公開されているテーマ使用しましょう。
テーマ一覧は oh-my-fish/Themes.md からスクリーンショットと一緒に探すことができます。
今回は例として明るいテーマの pure に変更してみます。
# oh-my-fishのテーマを入れる際に事前にインストールする必要がある $ fisher git_util # テーマをインストール $ fisher rafaelrinaldi/pure
プロンプトが2段構成となり、パスとブランチ名とステータスのみが表示されるシンプルな見た目になりました。
配色やプロンプトの情報を自分好みにするとより使いやすくなります。もちろんこれらは自分で設定することも可能です。
プラグイン紹介
日頃から使っているプラグインを紹介します。
プラグインは以下のページから探すことができます。
https://fisherman.github.io/
z / 履歴からディレクトリへ移動
z + 文字列 で履歴から移動するディレクトリの候補を表示してくれます。
フルパスを入力しなくていいのでラクです。
$ fisher z
fish-bd / 親ディレクトリへ移動
作業中はカレントディレクトリの階層が深くなりがちですが、親ディレクトリへ移動してくれます。$ cd ../../../ のような相対パスを打たなくてよくなります。
$ fisher fish-bd
fzf / 履歴からコマンド選択
ctrl + r で実行履歴を表示し、コマンドが選択できます。
$ brew install fzf $ fisher fzf
| 操作 | コマンド |
|---|---|
| 上へ移動 | ctrl + kor ↑ |
| 下へ移動 | ctrl + jor ↓ |
fish-ghq / リポジトリへ移動
ctrl + g で一覧からリポジトリを選択して移動できるようになります。
※ リポジトリは事前にghqでクローンしておく必要があります。
$ brew install ghq $ fisher decors/fish-ghq
ghq について
クローンしたリポジトリを一括管理できます。
以下のコマンドで~/.ghq/github.com/motemen/ghqフォルダにクローンされます。（保存先は設定で変えられます）
$ ghq get <リポジトリURL>
balias / エイリアスを設定
エイリアスを定義した上で、なおかつ登録したエイリアスも他のコマンドと同じように補完できます。
$ fisher oh-my-fish/plugin-balias
エイリアスを追加します。
今回はgitコマンドをgで打てるように登録します。
$ vim ~/.config/fish/config.fish # 下記を追記 balias g git
rbenv
fishでrbenvを使えるようになります。
$ fisher rbenv
環境変数をセットするために、conf.dに設定ファイルを作成して追記します。
$ echo 'set -x PATH $HOME/.rbenv/bin $PATH' >> ~/.config/fish/conf.d/000-env.fish
おわりに
ここまで環境が揃えば何倍にも作業効率が上がります。あとは自分好みに環境を整えて、自然にこれらの機能を使えるように日々慣れていくことが大切です。
いろいろなプラグインを導入してもっとカスタマイズしたくなったら、zshを使うのもありだと思います。
