📱

Claude Codeの並列実行を効率化する管理アプリを作った

2026/01/15に公開

こんにちは、秋野です。Xでもチームや組織でのAI開発効率化を発信してます。ぜひフォローいただけますと幸いです🙏

 作ったものClaude Codeで、複数のターミナルウィンドウで並行してセッションを実行していると「あのセッションは今何をしているのか？」「権限の入力待ちになっていないか？」といった状況を把握するのが難しくなりがちです。
この課題を解決するために、Claude Code Monitor（リアルタイム監視ダッシュボード）を自作しました。Claude Code Hooksを活用してイベントを収集し、WebSocketでWebUIに即座に反映します。
画面UI
実際に動かしている動画は下記のポストで共有しています
https://x.com/akino_1027/status/2011057397410955419
!このアプリは自分用に作ったものであり、公開予定はありません
ここからインスピレーションを受け、ご自身の開発において手助けになればと思い共有させていただいています！

 並列運用の課題：「見えない待機時間」Claude Codeのようなエージェント型AIは、指示を与えれば自律的にタスクを進めてくれます。しかし、途中で確認や追加指示が必要になる場面は意外と多く、 複数のセッションを並列で走らせていると、どのセッションが止まっているのか把握しづらくなります。
例えば、並列実行していて
「あの実装をしているターミナルどこだっけ...」
「さっき質問されてたのに気づかず放置してた...」
みたいな経験はありませんか？
この 「見えない待機時間」 こそが並列運用の最大の敵です。エージェントが入力を待っているのに気づかないまま時間が過ぎてしまうと、せっかくの並列化のメリットが失われてしまいます。

 なぜ可視化が重要なのかAIエージェントとの協働では、「人間の応答速度」がボトルネックになります。
従来の開発では、ビルドやテストの待ち時間が生産性を下げる要因でした。しかしAIエージェントを活用する開発では、状況が逆転します。エージェントはコードを高速に生成し、タスクを次々と進めてくれる。一方で、確認依頼や質問への応答は人間にしかできません。
ここで人間の反応が遅れると、エージェントは待機状態のまま止まってしまう。並列でセッションを走らせるほど、この「人間待ち」の影響は大きくなります。
ボトルネックの所在が変わった以上、最適化すべきポイントも変わるはずです。

 Claude Code Monitorについてこの課題に対処するため、Claude Codeのセッション状態をリアルタイムで監視するアプリを自作しました。
機能は主に3つです。
複数セッションの一覧表示
ステータス（実行中・入力待ち・完了）の可視化
クリックでiTerm2の該当タブへ即座にフォーカス
アプリを立ち上げておくだけで、どのタスクが自分の入力を待っているか一目でわかります。

 アプリケーションの仕組みこのアプリは3つのコンポーネントで構成されています。
Hook（シェルスクリプト）：Claude Codeからイベントを収集
バックエンド（Hono）：セッション状態を管理・配信
フロントエンド（React）：ダッシュボードUI表示
動作の流れ
Claude Codeでツールが実行されると、Hooksがイベント情報（何をしたか、どのターミナルか）をバックエンドに送信。バックエンドはセッションごとに状態を管理し、WebSocketで接続中のブラウザにリアルタイム配信。フロントエンドは受け取った情報をダッシュボードに即座に反映。
設定するhooks
{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "/path/to/claude-code-monitor/hooks/monitor-hook.sh PreToolUse"
          }
        ]
      }
    ],
    "PostToolUse": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "/path/to/claude-code-monitor/hooks/monitor-hook.sh PostToolUse"
          }
        ]
      }
    ],
    "Notification": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "/path/to/claude-code-monitor/hooks/monitor-hook.sh Notification"
          }
        ]
      }
    ],
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "/path/to/claude-code-monitor/hooks/monitor-hook.sh Stop"
          }
        ]
      }
    ]
  }
}

 導入効果これにより、筆者は3〜4つのタスクを同時進行できるようになりました。
エージェントが作業している間に別のセッションに指示を出し、入力待ちになったらすぐ対応する。この流れが自然にできるようになり、エージェントの待ち時間はほぼゼロになりました。 並列運用の効率が体感で2〜3倍は上がったと感じています。
使ってみて気づいたのは、並列数には「ちょうどいい上限」があるということです。5つ以上になるとコンテキストスイッチのコストが増え、逆に効率が落ちる感覚がありました。筆者の場合は3〜4並列がしっかり見れる限界でした。
今後は社内に展開してみて、チームでの開発を効率化したいと考えています。

 まとめAIエージェントの能力が上がるほど、ボトルネックは人間側に移っていくと思います。
高性能なAIを導入しても、人間の応答が追いつかなければ効果は半減します。可視化ツールの形態は何でもよく、「エージェントの状態を把握し、素早く切り替える」という考え方が本質だと思います。
Claude Codeに限らず、AIエージェントを並列で活用する場面は今後増えていくはずです。その際に「人間側のワークフローをどう最適化するか」という視点が、差を生むポイントになるのではないでしょうか。
今回は、その一つのアンサーとしてモニタリングアプリケーションを自作している話を共有させていただきました！
以上です！
Xでもチームや組織でのAI開発効率化を発信してます。ぜひフォローいただけますと幸いです！

作ったもの

並列運用の課題：「見えない待機時間」

なぜ可視化が重要なのか

Claude Code Monitorについて

アプリケーションの仕組み

導入効果

まとめ

Discussion