Masteries

技術的なことや仕事に関することを書いていきます.

AIコーディングエージェントにログを(強引に)見せる

最近はClaude Codeの導入というかトライアルを進めているのですが、エラーが発生したときにその内容を共有するところで少し面倒を感じつつあります。

具体的には、AIコーディングエージェントが直接ログ(npm run devで開発中のプロダクトを動かしたときのログ)を見れないので、丁寧にコピーして貼り付けて「このエラーを修正して」と作業する必要がある… という点です。

mcp-daemonize

mackee.hatenablog.com

github.com

解決策の1つとして、 まこぴーさん( id:mackee_w )の「mcp-daemonize」を試しました。これを使えば、コーディングエージェントに開発サーバを起動させて、ログも見れるようになって問題は解決したのですが、今度は逆に人間(自分)がログを簡単に見る術がない、という点が気になりました。

ブログを見た感じ、まこぴーさんの使い方だと、でかいタスクを事前に丁寧に設計して、あとは自動運転… という感じで使われているようです。こういう使い方であれば、自分のように人間がログを見る必要はないように思います。一方で、自分はコーディングエージェントに対して細かいタスクをちまちま投げる時もあって、そういう場合は都度都度ログを確認しつつ動かしたいので、人間もログを簡単に見れるといいな…と思いました。

こういうときはPull Requestを送ろう、と思ったのですが、そもそも本当に(少なくとも自分にとっては)人間がログを簡単に見れると便利になるの?ということを予め検証しておきましょう。折角実装してPull Requestを送ったのに、いざ動かしてみたら「なんか思っていたのと違う…」となったら大変ですからね。

強引に試す: ログを吐いてAIコーディングエージェントに読み込ませる

unbuffer npm run dev 2>&1 | tee ./.tmp/log

...とにかく試してみるのが目的なので、強引に行きました。

  • tee コマンドでログをコンソールに表示しつつファイルにも書き出す
    • unbuffer を使うことで色付き表示を維持させています
  • そして、AIコーディングエージェント(今回はClaude Code)には ./.tmp/log を読み込ませる

これで動かしてみると、

> ./.tmp/log にアプリケーションのログがあります。これを確認して発生しているエラーを修正してください。

(中略)

⏺ Read(.tmp/log)
  ⎿  Read 23 lines (ctrl+r to expand)

⏺ エラーが見つかりました。...(以下エラーの解説)...

…という感じで、ターミナル上にnpm run devのログを残して人間が簡単にログを確認できる状況を維持しつつ、コーディングエージェントにもログを読み込ませることができました(今回はNext.jsプロダクトでの事例だったのでnpm run devですが、他のコマンドでももちろん使えると思います)。

暫くこれで試してみて、やっぱり人間もログ見れたほうが良い!と思ったら、「mcp-daemonize」にPull Request送れないか考えてみようと思います。

参考文献

なお、 unbuffer コマンドについては以下のブログを参考にしました:

blog.ayakumo.net