cmux だけで開発を回す — ペイン分割・ブラウザ・lazygit 実践

ZenChAIne·2026年3月2日

AIターミナル開発ツールClaude Code

はじめに

前回の記事では、cmux の導入方法と基本的な使い方を解説しました。Claude Code を cmux で動かす方法は分かった。でも結局、ファイルの差分確認や UI のプレビューで VS Code に戻ってしまう——そんな方も多いのではないでしょうか。

この記事では、cmux に最初から組み込まれている機能と、ひとつだけ追加するツール lazygit を使って、日常開発の 8 割をターミナルだけで完結させる方法を紹介します。

今回扱うのは cmux のペイン分割、組み込みブラウザ、そして lazygit の 3 つだけです。次回の Vol.2 では Yazi（ファイラー）と Neovim を加えて、ターミナルを完全な IDE 代替にする構成を取り上げる予定です。

今回のゴール: このレイアウトを作る

最終的に目指すのは、以下の 4 ペイン構成です。

┌──────────────────────┬──────────────────────┐
│                      │                      │
│    Claude Code       │    Dev Server         │
│    (メイン作業)       │    (npm run dev)      │
│                      │                      │
├──────────────────────┼──────────────────────┤
│                      │                      │
│    Browser           │    Codex / lazygit    │
│    (localhost確認)    │    (差分確認・コミット) │
│                      │                      │
└──────────────────────┴──────────────────────┘

lazygit だけ brew install が必要ですが、それ以外はすべて cmux の組み込み機能です。

下準備: Nerd Font を入れる

lazygit や今後導入する Yazi などのターミナルツールは、アイコン表示に Nerd Font を使います。Nerd Font は既存のプログラミングフォントにアイコングリフ（ファイルタイプアイコン、Git ステータスマークなど）をパッチしたフォントファミリーです。通常のフォントだとアイコン部分が豆腐（□）になるので、先に入れておきましょう。

bash

brew install --cask font-jetbrains-mono-nerd-font

インストールしたら、cmux（Ghostty）の設定ファイルでフォントを指定します。

bash

# ~/.config/ghostty/config
font-family = JetBrains Mono Nerd Font
font-size = 14

設定を反映するために cmux を再起動してください。フォントが正しく適用されると、ls コマンドの出力にファイルタイプごとのアイコンが表示されるようになります（eza や lsd を併用している場合）。

ペイン分割パターンを使いこなす

cmux のペイン分割はキーボードショートカット一発です。用途に応じて 3 つのパターンを使い分けます。

パターン 1: Claude Code + シェル（基本形）

もっともシンプルな構成です。左で Claude Code を動かしながら、右のシェルで手動コマンドを実行します。

操作	ショートカット
右にペイン分割	`⌘ D`
下にペイン分割	`⌘ ⇧ D`
ペイン間の移動	`⌃ H / J / K / L`
ペインを閉じる	`⌘ W`

⌘ D で分割 →

┌──────────────────┬──────────────────┐
│                  │                  │
│  Claude Code     │  Shell           │
│                  │  (手動コマンド)   │
│                  │                  │
└──────────────────┴──────────────────┘

パターン 2: Claude Code + ブラウザ

フロントエンド開発で重宝する構成です。⌘ ⇧ L で組み込みブラウザが開きます。

操作	ショートカット
ブラウザを開く	`⌘ ⇧ L`
URL バーにフォーカス	`⌘ L`
リロード	`⌘ R`

⌘ ⇧ L でブラウザを開く →

┌──────────────────┬──────────────────┐
│                  │                  │
│  Claude Code     │  Browser         │
│                  │  (localhost:3000) │
│                  │                  │
└──────────────────┴──────────────────┘

パターン 3: 4 ペインフルレイアウト

冒頭で紹介した完成形です。手順は以下の通りです。

⌘ D で右に分割 → 右ペインで npm run dev
左ペインにフォーカスして ⌘ ⇧ D で下に分割 → ⌘ ⇧ L でブラウザを開く
右ペインにフォーカスして ⌘ ⇧ D で下に分割 → lazygit を起動

各ペインの境界はマウスドラッグでサイズ調整できます。Claude Code を左上に大きく取り、他の 3 ペインをコンパクトにするのがおすすめです。

ペイン間の移動は ⌃ H / J / K / L（Vim 風の方向キー）で、マウスに手を伸ばす必要はありません。慣れると VS Code のパネル切り替えよりも速く感じるはずです。

組み込みブラウザを活用する

cmux の組み込みブラウザは Chrome DevTools のようなフル機能は持っていません。しかし、開発中の UI 確認には十分です。

できること:

localhost:3000 などの開発サーバーをプレビュー
URL バーでの直接入力とページ遷移
⌘ R でリロード
ドキュメントやリファレンスの参照（Zenn、GitHub など）

ポイントはコンテキストスイッチが発生しないことです。Claude Code にコードを書かせて、隣のブラウザペインで即座に結果を確認する。⌘ Tab で別アプリに切り替える必要がないので、作業の流れが途切れません。

たとえば、Claude Code に「ヘッダーのデザインを変更して」と指示したあと、隣のブラウザペインで ⌘ R を押すだけで結果を確認できます。「Chrome に切り替えて、タブを探して、リロードして……」という手順が消えるのは、想像以上に快適です。

フル機能の DevTools が必要な場面（ネットワークタブの確認、パフォーマンス計測など）では、通常の Chrome を使ってください。あくまで「ちょっと見る」ための軽量ブラウザという位置づけです。

lazygit を導入する — Git 操作を視覚化

Claude Code はコードを書くだけでなく、git add や git commit も実行できます。しかし、「何がどう変わったのか」を人間の目で確認してからコミットしたい場面は多いはずです。

lazygit は Git の操作を TUI（ターミナル UI）で視覚化するツールです。左側にファイル一覧、右側に選択ファイルの差分がリアルタイムで表示され、ステージング、コミット、プッシュがすべてキーボードで完結します。

VS Code の Git タブや GitHub Desktop と似た体験ですが、ターミナル内で動作するので cmux のペインに収まります。「AI が書いたコードを自分の目で確認してからコミットする」という習慣をつけるのに最適なツールです。

インストール

bash

brew install lazygit

基本キーバインド

キー	操作
`Tab`	パネル間を移動（Files / Branches / Commits / Stash）
`Space`	ファイルをステージ / アンステージ
`c`	コミットメッセージを入力
`Enter`	ファイルの差分を表示
`p`	プル
`P`	プッシュ
`q`	終了

実践フロー: Claude Code → lazygit

日常的なワークフローは以下のサイクルになります。

Claude Code に機能実装やバグ修正を指示する
エージェントがコードを変更する
隣のペインで lazygit を開き、変更内容を確認する
問題なければ Space でステージング → c でコミット → P でプッシュ
修正が必要なら Claude Code に追加指示を出す

このフローのメリットは、Claude Code が書いたコードをコミット前に必ず人間がレビューする習慣が自然にできることです。AI エージェントは便利ですが、意図しない変更が混入することもあります。lazygit の差分ビューで変更内容をざっと眺めるだけでも、問題の早期発見につながります。

なお、lazygit は起動したままにしておけば、Claude Code がファイルを変更するたびに自動的に差分が更新されます。わざわざ git diff を打つ必要はありません。

ワークフローを自動化する — cmux CLI

毎回手動でペインを分割するのは面倒です。cmux は CLI を提供しているので、シェルスクリプトでレイアウト構築を自動化できます。

bash

#!/bin/bash
# dev-layout.sh — 4ペイン開発環境を一発構築
 
# 右にペインを分割して dev server を起動
cmux new-pane --direction right
cmux send "npm run dev"
cmux send-key Enter
 
# 左ペインに戻って下に分割、ブラウザを開く
cmux focus-pane --direction left
cmux new-pane --direction down
 
# 右上ペインに移動して下に分割、lazygit を起動
cmux focus-pane --direction right
cmux focus-pane --direction up
cmux new-pane --direction down
cmux send "lazygit"
cmux send-key Enter

プロジェクトのルートにこのスクリプトを置いておけば、./dev-layout.sh だけで開発環境が立ち上がります。プロジェクトごとにスクリプトを用意しておくと、朝の開発開始がワンコマンドで済みます。

スクリプトの内容はプロジェクトに応じてカスタマイズしてください。たとえば Docker Compose を使うプロジェクトなら docker-compose up を、テスト駆動開発なら npm run test:watch をペインに割り当てるのも良いでしょう。

トラブルシューティング

ペインのサイズが合わない

ペインの境界線をマウスでドラッグすれば、自由にサイズを調整できます。ディスプレイの解像度に応じて好みの比率に設定してください。

セキュリティソフトとの競合

Microsoft Defender などのセキュリティソフトが原因で、シェルコマンドが Interrupted system call エラーになることがあります。詳しい対処法は前回の記事の「注意点とTips」セクションを参照してください。

組み込みブラウザが表示されない

cmux のバージョンが古い場合、ブラウザ機能が正常に動作しないことがあります。brew upgrade --cask cmux または公式サイトから最新版をダウンロードしてください。

まとめ & 次回予告

この記事で紹介した構成をまとめると:

cmux のペイン分割 — ショートカットキーだけで自在にレイアウト構築
組み込みブラウザ — コンテキストスイッチなしで UI 確認
lazygit — Git 差分の視覚化とキーボードだけのコミット操作
cmux CLI — スクリプトによるレイアウト自動化

日常の開発サイクルは「Claude Code がコードを書く → lazygit で差分を確認 → ブラウザで動作を見る」の繰り返しです。この 3 つが同じウィンドウに収まるだけで、作業効率は大きく変わります。

ただし、この構成だけではカバーしきれない領域もあります。ファイルツリーの閲覧、手動でのコード編集、複雑なファイル操作——これらが必要なとき、まだ VS Code に戻っている方もいるでしょう。

次回の Vol.2 では、ファイラー Yazi とエディタ Neovim を加えて、ターミナルだけで IDE を完全に代替する構成を紹介します。