tmuxinatorで開発効率があがったよ

プロジェクト切り替えって大変ですよね。プロジェクトが複数あり、それぞれローカル環境立ち上げるためのコマンドが違うと覚えきれないです。そんなときに tmuxinatorを知りました。今はプロジェクト切り替えるときに tmuxinator [project] でローカル環境がすべて立ち上がります。最高ですね。

今ある問題

プロジェクトを切り替えるときに、大抵以下のようなコマンドを実行してます。

cd [docker-path]
docker compose up
cd [node-project-path]
nvm use [node-version]
npm run dev
cd [java-project-path]
./gradlew run web:bootRun

 
手動でたくさんコマンドを実行すると忘れることがたくさんあります?

  • どのコマンド実行するんだっけ?
    • どのnode script実行するんだっけ?
    • どのGradleタスク実行するんだっけ?
    • どんなJVM Optionが必要なんだっけ?
  • どのpathで実行するんだっけ?
  • Node Versionなんだっけ?

一番イヤな間違えは別のNode Versionで npm install しちゃうときです。そのあといつも rm -rf node_modules; nvm use [node-version]; npm install を実行してしばらく待つ必要があります。いやですねー

解決方法

tmuxinatorを使えばこの問題から開放されます。一回セットアップすると、 tmuxinator [project] のコマンドを実行するだけで必要なすべてのコマンドが画面分割で実行されます。

次のセクションでセットアップ方法を紹介します。

tmuxinator のセットアップ方法

コマンドのインストール

以下のUnix commandが必要になります。

僕はmacOSを使っているので下記のコマンドを実行してインストールしました。

brew install tmux
brew install tmuxinator

tmux のセットアップ

僕は tmux の設定は一つだけ入れてます。

# ~/.tmux.conf
set -g mouse on

この設定で以下のことが可能になりました。

  • 分割された画面をクリックで遷移
  • 分割された画面それぞれでスクロール
  • tmux のショートカットキーを覚える工程をサボる

tmuxinator のセットアップ方法

まず最初に EDITOR の変数を設定しないと tmuxinator に怒られます。僕はVimが好きなので下記のせってを入れました。

# ~/.zshrc
export EDITOR=vim

これで tmuxinator のコマンドを実行できます。下記のコマンドで新規プロジェクトを作れます。

tmuxinator new [project]

Vim が開いてデフォルトの設定が表示されます。ここでそのプロジェクトで実行したいコマンドを設定します。こんな感じに

name: sample
root: /Users/gene/IdeaProjects/sample

windows:
  - editor:
      layout: even-vertical
      panes:
        - cd tools/docker; docker compose up
        - cd admin-web/src/main/resources; nvm use 16.12 && npm run dev
        - cd web/src/main/resources && nvm use 14.18 && npm run watch
        - cd app && ./gradlew bootRun --args='--spring.profiles.active=local'

これで設定終わり!

実行してみよう!

これを実行してください。 tmuxinator sample
画面が分割されて、指定したコマンドが実行されるはずです。これでコマンドを覚える必要なくなりましたね。すべてのプロジェクトで設定しちゃいなよ!