株式会社ブレインパッドプロダクトユニットでRtoaster GenAIの開発をしている依田です。
今回は「Claude Codeを使うならtmuxを組み合わせると便利」という話を、Ghosttyでの実演つきでお伝えします。
はじめに
Claude Codeに長時間かかるタスクを任せている最中に、ターミナルを閉じてしまったことはありませんか？
コードの規模にもよりますが、複雑なタスクを任せると処理に10〜20分かかることもあります。実行中にターミナルを閉じてしまったり、ノートPCをスリープさせてしまうと、Claude Codeのセッションは丸ごと消えてしまいます。
この問題をシンプルに解決するのが tmux であり、Claude Code には --tmux オプションが用意されています。
この記事で学べること
- tmuxによって「セッションが消えない仕組み」を理解する
-
claude --worktree --tmux=classicの使い方 - セッションが切れても復旧できることの実演
対象読者
- Claude Codeを使い始めた方
- ターミナルはまあ使えるが tmux は未経験の方
環境情報
| 項目 | 仕様/バージョン |
|---|---|
| OS | macOS Tahoe 26.4.1 |
| Claude Code | 2.1.114 |
| Ghostty | 1.3.1 |
| tmux | 3.6a |
tmuxを一言で説明すると
「ターミナルセッションをウィンドウから切り離して維持できるツール」です。
通常のターミナルはウィンドウに紐づいているため、ウィンドウを閉じると中のプロセスも終了します。
tmuxを使うと、ターミナルのセッションをウィンドウから切り離し、バックグラウンドで維持できます。ウィンドウを閉じても、プロセスは動き続ける点が大きな特徴です。
環境構築
1. Ghosttyについて
GhosttyはMitchell Hashimoto氏（HashiCorpの共同創業者）開発のターミナルエミュレータです。Zigで実装されており、Mac標準のターミナル（Terminal.app）と比べて以下のメリットがあります。
| Mac標準のターミナル | Ghostty | |
|---|---|---|
| 描画速度 | 文字が多いと遅れる | GPU加速により高速（環境による） |
| 日本語の扱い | 環境によっては表示が崩れることがある | 自然に表示される |
| 256色/トゥルーカラー | 限定的 | フル対応 |
| 設定のしやすさ | 主にGUIで設定 | テキストファイル1つで管理 |
Claude Codeを使うとターミナルに大量のテキストが流れるため、描画速度の差が特に体感しやすいです。
brew install --cask ghostty
2. tmuxのインストール
brew install tmux
# バージョン確認
tmux -V
# tmux 3.6a
3. Ghostty + tmuxの相性設定
キーボードの「キー入力をどう伝えるか」という規格（プロトコル）は、ターミナルごとに異なります。GhosttyはモダンなキーボードプロトコルをデフォルトでONにしていますが、tmuxはデフォルトでその規格に対応していません。この設定をしていないと、tmux内でCtrlキーの組み合わせが正しく動かないことがあります。
たとえばClaude Codeのプロンプト入力中に Ctrl+C（キャンセル）が意図どおりに動かなくなることがあります。
~/.tmux.conf というファイル（tmuxの設定ファイル）に以下を追記してください。このファイルがない場合は新規作成でOKです。
# ~/.tmux.conf
set -g extended-keys on
set -as terminal-features 'xterm*:extkeys'
保存したら以下のコマンドで設定を反映します。
tmux source-file ~/.tmux.conf
claude --tmux の使い方
基本コマンド
claude --worktree --tmux=classic
# 短縮形
claude -w --tmux=classic
--tmux オプションは --worktree（-w）と組み合わせて使います。それぞれの役割は以下のとおりです。
| オプション | 役割 |
|---|---|
--worktree / -w
|
現在のブランチから独立した git worktree（作業ツリー）を自動作成。Claudeが安全な隔離環境で作業できる |
--tmux=classic |
tmuxセッションを自動作成してその中でClaude Codeを起動。Ghosttyなど非iTerm2環境では =classic が必要
|
--tmux と --tmux=classic の違い
iTerm2とはmacOSでよく用いられるターミナルアプリで、画面分割などをターミナル自身の機能として実現しています。--tmux（=classic なし）はiTerm2専用の連携機能を使おうとするため、Ghosttyなど他のターミナルでは動作しません。Ghosttyを使っている場合は必ず --tmux=classic を指定して、iTerm2に依存しない従来型のtmuxセッションとして起動します。
※ classic は従来のtmuxの仕組みをそのまま使うモードです。
--worktree でできること
git worktreeとは、同じリポジトリを別ディレクトリに展開する機能です。Claudeが作業するブランチを現在の作業ブランチから分離できるため、Claudeが大規模な変更をしている間も、自分は main ブランチで別の作業を並行して進めることができます。
リポジトリ/
├── 本体（あなたの作業スペース）
└── .worktrees/
└── claude-work（Claudeの作業スペース）← 独立したブランチ
【ハンズオン】 React TODOアプリを作って、途中でセッションを切断する
このハンズオンはアプリの完成ではなく、「セッションが途中で切れても復旧できる」体験を目的としています。
シナリオ概要
React（Vite）製のTODOアプリをゼロから作ってもらいます。Sonnetで3〜5分程度かかる規模なので、途中でGhosttyを閉じてもセッションが継続することを体感しやすいシナリオです。
最近のモデルは優秀ですぐに実装を完了してしまうので、本記事ではあえて複数のエージェントを用意して実装させます。
事前準備1：カスタムエージェントファイルを作成する
まずプロジェクトを作成し、カスタムエージェントファイルを配置します。
npm create vite@latest todo-react -- --template react
cd todo-react
mkdir -p .claude/agents
.claude/agents/ui-engineer.md を以下の内容で作成します。
---
name: ui-engineer
description: ReactコンポーネントとCSS Modulesによるスタイリングを担当する。AddTodo・TodoList・TodoItem・FilterBarなどのUIコンポーネントの実装を任せるときに呼び出す。
---
あなたはReact UIコンポーネントの専門家です。
担当範囲：src/components/ 配下のコンポーネントファイルとその CSS Modules ファイル。
- コンポーネントはアロー関数で記述する
- スタイルはCSS Modulesを使用する（styles.module.css）
- propsの型はJSDocコメントで記述する
.claude/agents/logic-engineer.md を以下の内容で作成します。
---
name: logic-engineer
description: ビジネスロジックとカスタムフックを担当する。状態管理・localStorageへの永続化・フィルタリングロジックの実装を任せるときに呼び出す。
---
あなたはReactのカスタムフックとビジネスロジックの専門家です。
担当範囲：src/hooks/ 配下のカスタムフック。
- useState・useEffect・useCallbackを適切に使い分ける
- localStorageへの読み書きはuseTodosフック内にカプセル化する
- 副作用は最小限にする
事前準備2：Gitリポジトリを初期化する
--worktree オプションにはGitリポジトリが必要です。
git init
git add .
git commit -m "init"
ステップ1：claude -w --tmux=classic で起動
claude -w --tmux=classic
tmuxセッション内のClaude Codeに、以下のプロンプトを入力して送信します。
React（Vite）で以下の仕様のTODOアプリを実装してください。
ui-engineerエージェントにUIコンポーネントを、logic-engineerエージェントにカスタムフックを担当させてください。
【コンポーネント構成】
- src/components/AddTodo.jsx + AddTodo.module.css：タスク入力フォーム（Enterキー対応）
- src/components/TodoList.jsx + TodoList.module.css：タスク一覧
- src/components/TodoItem.jsx + TodoItem.module.css：個別タスク（完了チェック・削除ボタン）
- src/components/FilterBar.jsx + FilterBar.module.css：「すべて／未完了／完了済み」フィルタータブ
- src/hooks/useTodos.js：TODOのCRUD操作とlocalStorageへの永続化
【機能】
- タスクの追加・削除・完了チェック（完了時は取り消し線）
- フィルタリング（すべて／未完了／完了済み）
- ページリロード後もタスクが保持される（localStorage）
- 未完了タスク件数のバッジ表示
【スタイル】
- CSS Modulesを使用
- アクセントカラーは青系（#3b82f6）
- レスポンシブ対応、カードUIデザイン
Claude Codeがファイルの生成を始めます。
ステップ2：画面を上下に分割して進捗を見守る
Claude Codeが動いている間に、control+b → Shift+2 で画面を上下に分割できます（下図参考）。上側がClaude Codeの実行画面、下側を別作業用に使うことができます。
Ghosttyの標準機能で画面を分割する場合は command+shift+d で上下分割できますが、この分割はtmuxのセッションに含まれないので注意しましょう。
ステップ3：Ghosttyのウィンドウを閉じる
Claude Codeがまだ処理中の間に、画面を操作していたら...あっ！間違えてGhosttyを閉じちゃった！
通常のターミナルなら、これでClaude Codeのプロセスも終了します。一部の成果物だけを残し、次に作業を再開するには、何をどこまで作ったかをClaude Codeに調べ直してもらう必要があります。
ステップ4：Ghosttyを再度開いて再接続
Ghosttyを再起動して、切り離されたセッションに再接続します。
# 残っているセッションを確認
tmux list-sessions # または tmux ls
# todo-react-xxxx: 1 windows (created ...) [detached]
# セッションに再接続
tmux attach-session -t todo-react-xxxx
すると、先ほどのセッションがそのまま復元され、Claude Codeの処理も継続されています。
Ghosttyを閉じている間も、Claude Codeは黙々と作業を続けていました。画面の分割設定も一緒に復活します。
まとめ
Claude Codeに時間のかかる作業を任せるなら、claude -w --tmux=classic で起動するのがおすすめです。
Ghosttyの快適なレンダリングと、tmuxのセッション管理を組み合わせることで、「セッションが消える不安」から解放され、Claude Codeとの協業体験が大きく変わります。
ぜひ claude -w --tmux=classic を試してみてください。