Transcript
00:00:00この2年間、私たちはコードベースをAIエージェントに任せ、
00:00:05好きなように書き換えさせ、それを大量のコードをスクロールしてレビューしてきました。
00:00:09ついに誰かがそれに愛想を尽かし、真逆のツールを作りました。
00:00:14エージェントがコード内を移動する様子を3Dで観察できるツールです。
00:00:17名前はMindWalkといいます。
00:00:18これはコードを可視化し、生き生きと表現するための、より優れた方法かもしれません。
00:00:23Graphifyのようなツールもありますが、それらと比べてどうでしょうか?
00:00:30さて、ここからがMindWalkが解決しようとしている本当の問題です。
00:00:34エージェントのログは、何を実行し何を編集したかという「結果」は教えてくれます。
00:00:38しかし、タスクをどのように理解したかは教えてくれません。
00:00:41どのファイルが関連していると判断したのか?
00:00:441行も変更しないうちに、どこを見回していたのか?
00:00:47自分の領域にとどまっていたのか、それともリポジトリの半分をこっそり探っていたのか?
00:00:51そういったことすべてです。
00:00:52エージェントの思考プロセスは、トランスクリプトでは見えなくなってしまいます。
00:00:55消えてしまうのです。
00:00:56ワークフローをスピードアップするコーディングツールがお好きなら、ぜひチャンネル登録をお願いします。
00:00:59新しい動画を随時公開しています。
00:01:01では、その思考が見える状態がどういうものかお見せしましょう。
00:01:04ここに先ほど実行したClaude Codeセッションのプロジェクトがあります。
00:01:08これをインストールし(Go言語のGoとかけていますが)、ビルドすることができます。
00:01:14このコマンドでMindWalkを起動すると、コードベース全体が
00:01:20ダークな3D都市としてレンダリングされます。
00:01:21各ファイルがビルになっていて、コード量が多いほど高くそびえ立ちます。
00:01:26そしてセッションの再生ボタンを押します。
00:01:29このライトに注目してください。
00:01:31エージェントが少し目を通しただけのファイルは、緑色(苔のような緑)に光ります。
00:01:36実際にじっくり読み込んだ時は青、編集を加えた時は琥珀色になります。
00:01:41タイムラインを前後にドラッグすることで、エージェントがコード内をどのように辿ったかを
00:01:46文字通り追跡できます。
00:01:48これはClaude CodeやCodexがすでにディスクに書き出しているセッションログを読み込むだけの1つのGoバイナリと、
00:01:54ブラウザで3D表示するためのThree.jsシーンで構成されています。
00:01:58この色による言語化こそが、真の工夫です。
00:02:01寒色はエージェントが閲覧していたことを意味し、
00:02:03暖色は変更を加えていたことを意味します。
00:02:06タイムラインにもマークがついています。
00:02:07小さなシンボルによって、サブエージェントが起動した場所、コンテキストウィンドウが圧縮された場所、
00:02:14そして新しい指示を出して割り込んだ場所が正確にわかります。
00:02:17これで、どこに向かっているのかが常に把握できるようになります。
00:02:20しかし、私が本当に重要だと思うのはここからです。
00:02:22「見た目がかっこいい」という段階を過ぎた後の話です。
00:02:24analyzeコマンドを実行すると、ローカルのClaudeやCodexを使って
00:02:29セッション全体に対する評価が行われ、実行内容にグレードが付けられます。
00:02:33エージェントは編集を始める前に十分な調査を行ったか?
00:02:37スコープ内にとどまっていたか?
00:02:38脱線しなかったか?
00:02:40自分の作業を検証する手間をかけたか?
00:02:42そして、これらの指摘事項はすべて、タイムライン上の該当する瞬間へ直接飛べるクリック可能なリンクになっています。
00:02:47まさにエージェントに対するコードレビューです。
00:02:49また、セッションの再生ログがなくても、mapコマンドを使えば
00:02:54事前設定なしでリポジトリを単体で3D都市としてレンダリングできます。これも非常に面白い機能です。
00:02:59さて、ここからが本題です。
00:03:00このツールがHacker Newsで公開された時、一番多かったコメントは実に率直なものでした。
00:03:06皆さんもきっと疑問に思っているでしょう。
00:03:08「確かにすごくかっこいいけど、実際に使うだろうか?」
00:03:10「具体的に何のために使うのか?」と。
00:03:12中には反論すらしない人もいました。
00:03:14「実用的な目的はない。
00:03:16でも楽しいし、すべてのものに理由が必要なわけじゃない」といった意見です。
00:03:19また、ある人は小さな変更についての鋭い指摘を残しました。
00:03:23普通のgit diffを見た方が、エージェントの3Dツアーを眺めるより単純に早いという指摘です。
00:03:28言いたいことはよくわかります。
00:03:29実際、これはまだ出たばかりです。
00:03:31バージョン0.3ですからね。
00:03:32Claude CodeとCodexのログにしか対応していません。
00:03:34Cursorをメインで使っている場合、まだセッションの再生はできません。
00:03:38そこで疑問が生じます。「これは一体誰のためのツールなのか?」
00:03:41単なるお楽しみ要素なのか?
00:03:42例えばモデルを比較したい時、Claudeがタスクをどう探索するかと
00:03:45Codexのやり方の違いを見たい場合があります。
00:03:48これは他では得られない、非常に興味深い視点を与えてくれます。
00:03:51エージェントによる大規模で広範囲な変更に向き合っていて、平坦なdiffだけでは何が起きたか
00:03:56全容を把握できない場合、この3Dウォークスルーと評価レポートはかなり使えます。
00:04:01内容を分解して分かりやすくしてくれます。
00:04:02ですが、たった2行の修正ならどうでしょうか。
00:04:04diffを読めば十分ですよね。
00:04:05MindWalkが既存のレビューツールに取って代わるとは思いません。
00:04:09しかし、従来のツールでは視覚化できなかった「エージェントの実行過程」の感覚を
00:04:14掴むのには役立つかもしれません。
00:04:15そしてそれこそが、私たちが試してみる価値のある部分です。
00:04:19私たちは、AIが書いたものを理解する手法を開発するよりも遥かに早いスピードで、
00:04:24マシンにコードを書かせる方法を教えてしまいました。
00:04:25MindWalkは、Graphify(グラフィファイ)のように…
00:04:29発音はこれで合っていると思いますが、
00:04:31そのギャップを埋めるための本格的な第一歩となるかもしれません。単に残されたキー入力の跡だけでなく、
00:04:36エージェントがコードベース全体をどう推論したかを視覚的に理解させてくれます。
00:04:40まだ削り出しの初期段階ですが、まさに適切な問題に焦点を当てています。
00:04:43ぜひ触ってみて、役立つかどうか確認してみてください。
00:04:46このようなコーディングのコツやテクニックが気に入っていただけたら、ぜひBetterStackチャンネルの登録をお願いします。
00:04:50それでは、また別の動画でお会いしましょう。