便利なtmuxの使い方をまとめてみる | 您所在的位置:网站首页 › tmux切换左右 › 便利な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 tmuxHomebrew が入っていない場合は、公式ドキュメントを参照して、インストールしてから上記コマンドを実行します。 Homebrew 公式ドキュメント 最低限の設定をするとりあえず、最低限の設定を行なって、tmux を使っていきます。 以下のコマンドを実行して、エディタを開き、設定を行っていきます。 $ vi .tmux.conf特に設定をせずとも使えますが、使い勝手の面から、以下のように設定していきます。 set -g prefix C-a unbind C-b set-option -g mouse on1 つずつ説明します。 プレフィックスキーの変更以下の設定を記述することで、プレフィックスキーを変更できます。 デフォルトでは、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 つ前のウィンドウに移動できます。 ターミナル画面は、次のようになるかと思います。
では、その次のウィンドウに移動します。 プレフィックスキー + nで、次のウィンドウに移動できます。 ターミナル画面は、次のようになるかと思います。
それでは、ペインの分割をやってみます。 左右に分割するペインを左右に分割するには、プレフィックスキー + %もしくは、tmux splitw -hというコマンドを実行します。どちらでも大丈夫です。 ターミナル画面は、次のようになるかと思います。
ペインを上下に分割するには、プレフィックスキー + "もしくは、tmux splitw -vというコマンドを実行します。どちらでも大丈夫です。 ターミナル画面は、次のようになるかと思います。
ペインが分割されている状態なので、ペイン間を移動してみたいと思います。 ペイン間の移動は、プレフィックスキー + 矢印キーもしくは、select-paneやselectpコマンドでできます。 今回は、selectpコマンドを使ってみます。 1 つ前の項目で上下にペインを分割しているので、上下のペインを移動してみます。 上のペインに移動する場合は、tmux selectp -Uで移動できます。 画面はこのようになるかと思います。
また、下のペインに移動する場合は、tmux selectp -Dで移動できます。 画面はこのようになるかと思います。
左右にペインを分割している場合は、引数を-L(左)や-R(右)に変えることで、左右で移動できるようになります。 また、プレフィックスキー + oで次のペインへ、プレフィックスキー + ;で前のペインへ移動できるため、そちらのコマンドでペイン間の移動を行うことも可能です。 ⑥ ペイン・ウィンドウの終了複数ウィンドウを作成したり、ペインを複数に分割したりしてきました。 それでは、ペインとウィンドウを終了します。 まずは、複数ペインを分割しているところのペインを終了します。 上下に分割しているので、下の方のペインを終了してみます。 exitコマンドを実行します。 実行すると、次のような画面になるかと思います。
次に、ウィンドウを終了します。 同じように、exitコマンドを実行しても良いですし、プレフィックスキー + &を使っても良いです。 ここでは、プレフィックスキー + &を使ってみます。 すると、次のような画面になるかと思います。ステータスラインが変化しています。
yを選択すると、次のような画面になるかと思います。
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-msend-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 起動できているか確認シェルスクリプトを実行すると、ターミナル画面は次のような感じになっているかと思います。
画面ではどうなっているでしょうか?
tmux の使い方について、簡単にまとめてみました! ターミナル画面を分割できるので、バックエンドとフロントエンドの開発を行う際に、1 つのターミナル画面で一気に起動できて、とても便利だと思いました。今後も重宝しそうです! 本記事に記載はしませんでしたが、普段 CLI で操作する際など何気なく使っている、「ターミナル」とは何なのかなどについても考え、調査するきっかけにもなりました。 ここまでお読み下さり、ありがとうございます! 参考資料tmux 公式ドキュメント とほほの tmux 入門 |
CopyRight 2018-2019 实验室设备网 版权所有 |