便利なtmuxの使い方をまとめてみる

こんにちは！
最近、お仕事で、バックエンドとフロントエンドを立ち上げる際に、便利なツール「tmux」(ティーマックス)を初めて使いました！
折角なので、今回は、この tmux についてまとめていきたいと思います。

本記事は、Macを使用して検証したものになります。ご了承ください。

tmux って何？

まず、tmux とは何なのか、概要や基本的な用語、コマンド操作を簡単に整理しておきます。

概要

tmux とは、 端末多重化ソフトウェア（terminal multiplexer） のことです。
ターミナル画面で、複数のセッションを起動したり、複数のウィンドウを作成したり、1 つのウィンドウで複数のペインに分割することができます。
分割することで、それぞれのペインやウィンドウなどで、それぞれ別々の操作を行うことが可能になります。

tmux における基本的な用語

tmux を利用するときによく使う、基本的な用語（セッション・ウィンドウ・ペイン）について簡単に整理します。

セッション（Session）

セッションとは、1 つ以上のウィンドウのまとまりのこと。

ウィンドウ（Window）

ウィンドウとは、1 つ以上のセッションに紐づいた、1 つ以上のペインのまとまりのこと。

ペイン（Pane）

ペインとは、1 つのウィンドウに表示されるターミナルエリアのこと。
ペインそれぞれが、ターミナル画面として使用できる。

基本的なコマンド操作

基本的なコマンド操作についても簡単にまとめておきます。
tmux では、基本的にプレフィックスキーと操作ごとに指定されたキーを順に押下することで操作することができます。プレフィックスキーは、デフォルトでは、Ctrl + bです。

こちらでご紹介しているコマンド操作は一部であり、ほかにも色々あるので、tmux 公式ドキュメントの Getting Startedなどを参照してみてください。

セッション関係

セッション関係のコマンドはこちらになります。

操作内容	コマンド
セッションを起動する	tmux
名前付きセッションを起動する	tmux new -s 名前
セッションを一覧表示する	プレフィックスキー + s
セッションを一覧表示する	tmux list-sessions
セッションを終了する	exit

ペイン関係

ペイン関係のコマンドはこちらになります。

操作内容	コマンド
ペインを左右に分割する	tmux splitw -h
ペインを上下に分割する	tmux splitw -v
ペインを左右に分割する	プレフィックスキー + %
ペインを上下に分割する	プレフィックスキー + "
ペインを移動する(左右に分割した場合)	プレフィックスキー + 左右の矢印キー
ペインを移動する(上下に分割した場合)	プレフィックスキー + 上下の矢印キー
上のペインに移動する	tmux selectp -U
下のペインに移動する	tmux selectp -D
左のペインに移動する	tmux selectp -L
右のペインに移動する	tmux selectp -R
次のペインに移動する	プレフィックスキー + o
前のペインに移動する	プレフィックスキー + ;
ペインで時刻を表示する	プレフィックスキー + t
ペインを終了する	exit

ペイン間の移動を行うコマンドはいくつか種類がありますね。
selectpはselect-paneを使っても良いです。

ウィンドウ関係

ウィンドウ関係のコマンドはこちらになります。

操作内容	コマンド
ウィンドウを作成する	プレフィックスキー + c
次のウィンドウに移動する	プレフィックスキー + n
前のウィンドウに移動する	プレフィックスキー + p
ウィンドウを一覧表示	プレフィックスキー + w
ウィンドウを終了する(確認メッセージあり)	プレフィックスキー + &
ウィンドウを終了する	exit

tmux を使ってみる

tmux を導入する

今回は、Mac を使っているので、Homebrew で導入していきます。
ターミナル画面で、以下のコマンドを実行します。

$ brew install tmux

Homebrew が入っていない場合は、公式ドキュメントを参照して、インストールしてから上記コマンドを実行します。
Homebrew 公式ドキュメント

最低限の設定をする

とりあえず、最低限の設定を行なって、tmux を使っていきます。
以下のコマンドを実行して、エディタを開き、設定を行っていきます。

$ vi .tmux.conf

特に設定をせずとも使えますが、使い勝手の面から、以下のように設定していきます。

set -g prefix C-a
unbind C-b

set-option -g mouse on

1 つずつ説明します。

プレフィックスキーの変更

以下の設定を記述することで、プレフィックスキーを変更できます。
デフォルトでは、Ctrl + b（C-b）ですが、ご自身が使いやすい、任意のキーに変更することが可能です。以下の設定では、Ctrl + a（C-a）に変更しています。

set -g prefix C-a
unbind C-b

マウス操作を有効にする

以下の設定を記述することで、マウスでペイン選択等の操作ができるようになります。

set-option -g mouse on

とりあえず使ってみる！

tmux を導入できたので、以下をやってみます。

① セッション起動
② 複数ウィンドウ作成
③ ウィンドウを移動する
④ ペイン分割
⑤ ペインの移動
⑥ ペイン・ウィンドウの終了

① セッション起動

まずは、セッションを起動します。
ターミナル画面で、以下のコマンドを実行します。

$ tmux

すると、ターミナル画面が次のような画面になるかと思います。

ターミナル画面の一番下に緑色のエリアができています。これがステータスラインになります。
ステータスラインでは、セッション名やウィンドウ名が表示されます。プレフィックスキー + &でウィンドウを終了するときの確認メッセージも、こちらのステータスラインに表示されます。

② 複数ウィンドウ作成

それでは、複数のウィンドウを作ってみます。
セッションを起動した画面で、プレフィックスキー + cというコマンドを実行します。
プレフィックスキーは、.tmux.confで指定しているもの、もしくは指定していない場合は、デフォルトのCtrl + bです。

すると、次のような画面になるかと思います。

ステータスラインにウィンドウが 1 つ（1:zsh）追加されています。*がついているウィンドウ名のウィンドウが現在表示しているウィンドウです。

③ ウィンドウを移動する

次に複数ウィンドウができたので、移動してみます。

まずは、1 つ前のウィンドウに移動します。
プレフィックスキー + pで、1 つ前のウィンドウに移動できます。

ターミナル画面は、次のようになるかと思います。

現在表示しているウィンドウを示す*が 1 つ前のウィンドウ名のところに変わっています。

では、その次のウィンドウに移動します。
プレフィックスキー + nで、次のウィンドウに移動できます。

ターミナル画面は、次のようになるかと思います。

現在表示しているウィンドウを示す*が その次のウィンドウ名のところに変わっています。

④ ペインの分割

それでは、ペインの分割をやってみます。

左右に分割する

ペインを左右に分割するには、プレフィックスキー + %もしくは、tmux splitw -hというコマンドを実行します。どちらでも大丈夫です。

ターミナル画面は、次のようになるかと思います。

左右に分割されています。

上下に分割する

ペインを上下に分割するには、プレフィックスキー + "もしくは、tmux splitw -vというコマンドを実行します。どちらでも大丈夫です。

ターミナル画面は、次のようになるかと思います。

上下に分割されています。

⑤ ペインの移動

ペインが分割されている状態なので、ペイン間を移動してみたいと思います。
ペイン間の移動は、プレフィックスキー + 矢印キーもしくは、select-paneやselectpコマンドでできます。
今回は、selectpコマンドを使ってみます。

1 つ前の項目で上下にペインを分割しているので、上下のペインを移動してみます。
上のペインに移動する場合は、tmux selectp -Uで移動できます。

画面はこのようになるかと思います。

カーソルの位置が上のペインに移動しています。

また、下のペインに移動する場合は、tmux selectp -Dで移動できます。

画面はこのようになるかと思います。

カーソルの位置が下のペインに移動しています。

左右にペインを分割している場合は、引数を-L(左)や-R(右)に変えることで、左右で移動できるようになります。

また、プレフィックスキー + oで次のペインへ、プレフィックスキー + ;で前のペインへ移動できるため、そちらのコマンドでペイン間の移動を行うことも可能です。

⑥ ペイン・ウィンドウの終了

複数ウィンドウを作成したり、ペインを複数に分割したりしてきました。
それでは、ペインとウィンドウを終了します。

まずは、複数ペインを分割しているところのペインを終了します。
上下に分割しているので、下の方のペインを終了してみます。
exitコマンドを実行します。

実行すると、次のような画面になるかと思います。

ペインが分割されていない状態に戻りました。

次に、ウィンドウを終了します。
同じように、exitコマンドを実行しても良いですし、プレフィックスキー + &を使っても良いです。
ここでは、プレフィックスキー + &を使ってみます。

すると、次のような画面になるかと思います。ステータスラインが変化しています。

ステータスラインが黄色くなり、kill-window zsh? (y/n)というメッセージが表示されています。ステータスラインの黒いカーソルのところで、yと入力すると、ウィンドウが終了します。

yを選択すると、次のような画面になるかと思います。

先ほどまで、ステータスラインにもう 1 つウィンドウ名が表示されていましたが、もう 1 つのウィンドウは終了し、現在表示しているウィンドウの 1 つのみになっている状態です。

シェルスクリプトを使って実践！

tmux の基本的な動かし方を押さえたところで、シェルスクリプトを使って、実践してみます。
シェルスクリプトでやることは、以下の 2 つです。

• ペインを分割する
• バックエンドとフロントエンドの両方を起動する

バックエンドは Express、フロントエンドは React で構築し、バックエンドから受け取った値をフロントエンドで表示できたら OK とします。

ちなみに、バックエンドからは、次のように値を返します。

router.get('/', (req: any, res: any) => {
  res.send('バックエンドからきました');
});

router.get('/message', (req: any, res: any) => {
  res.send('Hello World! Hello tmux!');
});

「バックエンドからきました」と「Hello World! Hello tmux!」が取得できれば OK です。
今回特にフロントの処理は関係ないので、省きます。axiosなりfetchなりでバックエンドからGETできれば良いです。

シェルスクリプトを用意する

それでは、用意したシェルスクリプトの全体はこちらです。
exec_tmux_sample_app.shというファイル名で用意しました。

exec_tmux_sample_app.sh

#!/bin/zsh

# ペインを上下に分割する
tmux splitw -v

# 上のペインを使う
tmux selectp -U

# バックエンドを起動する
# send-keysでキー入力。
tmux send-keys 'cd backend' C-m
tmux send-keys 'npm start' C-m

# 下のペインを使う
tmux selectp -D

# フロントエンドを起動する
# send-keysでキー入力。
tmux send-keys 'cd frontend' C-m
tmux send-keys 'npm start' C-m

細かく分けて解説していきます。

ペインを上下に分割する

ペインを上下に分割しています。

# ペインを上下に分割する
tmux splitw -v

こちらは左右の方が使いやすいという場合は、左右に分割(-h)でも良いと思います。

ペインを移動する

使うペインを指定します。

# 上のペインを使う
tmux selectp -U

まず、上のペインを使います。

バックエンドを起動する

上のペインで、バックエンドを起動します。
バックエンドは、backendディレクトリで開発を行なっており、起動コマンドはnpm startです。

# バックエンドを起動する
# send-keysでキー入力。
tmux send-keys 'cd backend' C-m
tmux send-keys 'npm start' C-m

send-keysでキー入力ができるようになります。C-mは Enterと同じです。
tmux send-keys '実行したいコマンド' C-mでキー入力したコマンドを実行できます。
実行したいコマンドは、ここでは、backend ディレクトリに移動するcd backendとバックエンドの起動を行うnpm startです。

ペインを移動する

バックエンドは起動できるようにしたので、次はフロントエンドです。
まずは、使うペインを変更します。

# 下のペインを使う
tmux selectp -D

上下に分割しているうちの、下の方のペインを使っていきます。

フロントエンドを起動する

下のペインで、フロントエンドを起動していきます。
フロントエンドは、frontendディレクトリで開発を行なっており、起動コマンドはnpm startです。

# フロントエンドを起動する
# send-keysでキー入力。
tmux send-keys 'cd frontend' C-m
tmux send-keys 'npm start' C-m

バックエンドを起動するのと同じく、send-keysを使います。
実行したいコマンドは、ここでは、frontend ディレクトリに移動するcd frontendとフロントエンドの起動を行うnpm startです。

シェルスクリプトを実行する

シェルスクリプトができたので、実行してみます。
シェルスクリプトでバックエンドとフロントエンドを両方起動し、フロントエンドでバックエンドから受け取った値を表示します。

セッションを起動

まずは、tmuxコマンドでセッションを起動します。

$ tmux

実行

そして、以下のコマンドで、シェルスクリプトを実行します。

$ ./exec_tmux_sample_app.sh

もし、permission deniedのエラーが出たら、以下のコマンドで実行権限を付与します。

$ chmod +x exec_tmux_sample_app.sh

実行権限を付与したら、改めて、以下のコマンドを実行します。

$ ./exec_tmux_sample_app.sh

起動できているか確認

シェルスクリプトを実行すると、ターミナル画面は次のような感じになっているかと思います。

上下に 2 分割され、それぞれのペインでコマンドが実行されています。

画面ではどうなっているでしょうか？

雑な感じになっていますが、バックエンドから受けとった値 2 種類が表示されています！（バックエンドから受け取った値・メッセージの 2 種類）
無事、tmux を利用してバックエンドとフロントエンド両方を起動し、値の取得ができています 🎉

おわりに

tmux の使い方について、簡単にまとめてみました！
ターミナル画面を分割できるので、バックエンドとフロントエンドの開発を行う際に、1 つのターミナル画面で一気に起動できて、とても便利だと思いました。今後も重宝しそうです！
本記事に記載はしませんでしたが、普段 CLI で操作する際など何気なく使っている、「ターミナル」とは何なのかなどについても考え、調査するきっかけにもなりました。
ここまでお読み下さり、ありがとうございます！

参考資料

tmux 公式ドキュメント
とほほの tmux 入門