この記事は Claude on SonicGarden の記事です。ソニックガーデンのプログラマが、Claude Codeの活用について書いています。#claude_on_sonicgarden

はじめに

ソニックガーデンでClaude Codeを業務で使うようになってから、自分の開発スタイルは大きく変わりました。今回は、その中で実際に感じた不便を解消するために、作業環境を整えるツールを作った話を書きます。

Claude Codeで変わった、自分の開発スタイルと新たに発生した摩擦

まずは、自分の普段の働き方とClaude Codeの使い方を簡単に紹介します。

ソニックガーデンには「親方」と「弟子」の関係で若手を育てる徒弟制度があり、自分は弟子として親方のもとで日々の作業に取り組んでいます。

また、案件ごとに週1回の打ち合わせがあり、そこで決まった複数のタスクを、次の打ち合わせまでの1週間で仕上げる。これがひとつの作業サイクルです。

こうしたタスクを1週間でこなすために、Claude Codeを並行で立ち上げて同時に進めています。それぞれが別リポジトリ(案件)なら何も気にせず作業できますが、同じリポジトリのタスクを並行して作業したいときは、作業ディレクトリの衝突を避けるため git worktree を活用しています。具体的には、こんな感じです。

worktreeでブランチ毎に環境分離。ブランチごとにURL・DB・環境変数・開発サーバーが独立して立ち上がる構成にし、複数タスクを並行で走らせても干渉しない状態。
複数のClaude Codeを並行で走らせる。タスクごとに別worktreeでClaude Codeを動かして、自分はその間に別タスクをレビューしたり、動作確認をする。並列管理はcmuxに任せて、入力待ちや完了になったタイミングで通知が飛ぶように設定。

ただ、並列作業になった途端にいくつか問題が浮かび上がってきます。

URL迷子

worktreeごとに <案件名>-<ブランチ名>.test のようなブランチ専用のpuma-dev URLが同時に立ち上がる構成にしています。いざ、動作確認しようとすると「あれ、このタスクのURLって何だっけ……」とブランチが何本もあると、毎回迷子になります。

並行作業の時間計測

時間感覚を養うため、そして1日の終わりに見積もった予定時間と実績のズレを振り返るために、タスクごとに時間を測っています。並行しているタスクについては、作業していないアイドル時間も含めて計測しています。ただ、並行で複数走らせているとストップウォッチアプリ1個では足りないし、画面を行き来していると測ること自体が面倒になります。

タスクごとのメモ迷子

タスクごとのメモをテキストファイルで管理しているので、タスクを切り替えるたびに該当するメモを探す手間がかかります。並行作業が増えるほど、この探す時間がボトルネックになります。

また、以下はAI開発に転換したことで新たに発生した摩擦ではありませんが、ずっと感じていた２つの困りごとです。

録音のAI要約の手間 : タスク毎の相談は、録音するようにしています。その場で受けたFBや親方の判断の意図を後から振り返り、自分の型として身につけたいからです。ただ、録音後に音声ファイルを抜き出して、要約するためにAIに投げる作業が、少し手間です。
日報用のフォーマットの手書き : 前述の振り返り(予定と実績のズレを見る)のために、1日の終わりにタスク毎にこれに何分かかったと手書きで残しています。

並行作業するようになって新たに生じた３つと、前から感じていた２つ。これらをまとめて、1つのアプリで解決することにしました。タスク詳細画面の中に、Claude CodeのCLIも、worktree操作も、URLジャンプも、メモも、時間計測も全部詰め込んでみました。タスク詳細画面を開けばそのタスクの作業環境がそこに揃っている、という状態にしたかったのです。

やったこと

1. タスク詳細画面にCLIを置いた → メモを見ながらClaude Codeを動かせる

タスク詳細画面を開くと、その中で zsh が立ち上がっていて、claude を叩けばClaude Codeがブラウザの中でそのまま動きます。

この画面には、タスクに紐付いたメモや、後述する録音の要約なども一緒に表示されています。Claude Codeを動かしながら、同じ画面でメモを参照できる、という状態になります。

このおかげで、タスクごとのメモ迷子が消えました。タスクに紐付いたメモが同じ画面にあるので、Claude Codeに何を頼むか考えながらメモを参照できます。メモを探すという動作そのものがなくなりました。

2. worktree作成ボタンとブラウザボタン → ワークツリー作成からURLジャンプまで一気通貫

タスク詳細画面に、ロケットボタンと地球儀ボタンを並べて置きました。

ロケットボタンを押すと、裏側でworktreeが作られます。また、worktreeが作成されるタイミングをフックにして、次のことが裏側で順に走ります。

ブランチ専用のpuma-devへのリンク作成と、ポート割り当て
ブランチ専用のDBと環境変数ファイルの作成
メインリポジトリから未追跡の開発用ファイル一式をコピー
依存関係をインストール
最後に開発サーバーをバックグラウンドで起動

ここまで自動化しているので、ボタン1つでタスク用の作業環境一式が立ち上がります。

地球儀ボタンを押すと、そのタスク用に設定されたURLが開きます。あれ、どのURLだっけを考える時間がゼロになります。これでURL迷子が解消されて、スムーズに動作確認に進めます。

3. 並行作業の時間計測 → サブタスク単位のWorkLog + フローティングカード

サブタスクごとに開始/停止できるタイマーを作って、開始から停止までをWorkLogとして記録するようにしました。

走っているタイマーは、フローティングカードで常駐表示しています。

派手な機能ではありませんが、今いくつ走っているかが常に画面の隅にあるので、画面の行き来が減りました。

とはいえ、並行作業のアイドル時間も計測に含まれてしまうため、このタスクに何分かかったと厳密には言い切れません。手を動かしているタスクに応じて自動でタイマーを切り替えるなど、ここはまだ改善の余地があります。

4. 録音 → ブラウザ完結 + AI要約

タスク詳細画面のマイクボタンを押すと、ブラウザのSpeech Recognition APIで録音とリアルタイム文字起こしが同時に走ります。

サーバーには音声ファイルを送らず、文字起こし済みのテキストだけを渡します。録音データを保存、抽出しないので扱いも楽です。

また、テキストの保存と同時に、サーバー側でAI要約まで走らせて、要約結果はそのままタスク詳細画面に残ります。

5. 日報の手書き → WorkLog自動集計

当日のWorkLogを集計して、案件 → タスク → サブタスクの階層付きMarkdownで自動出力する画面を作りました。コピーボタン1つで日報の本文として貼り付けられます。

WorkLogがちゃんと溜まっていれば、もう手で書き起こす必要はありません。手書きが消えたぶん、その日の振り返りそのものに時間を使えるようになりました

おわりに

並行作業が増えるほど、自分なりのタスク管理が必要になります。タスクを開けば、Claude CodeもURLもメモも時間計測も録音もその場にある。自分の作業環境を、整えてみた話でした。

Claude Codeを業務で並行運用していて、自分なりのタスク管理を組もうとしている人がいたら、参考になれば嬉しいです。