触れる前にコードベース全体を可視化するAIツール（Understand-Anything）

日本語العربية Deutsch English Español Français हिन्दी Bahasa Indonesia 한국어 Русский 中文

컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

00:00:00新しいチームに加わり、リポジトリをクローンして、コードベースを開く。

00:00:04するとそこには20万行ものコードが。まるでヘッドライトに照らされた鹿のように立ち尽くしてしまう。

00:00:09そこで誰もがやることをやる。

00:00:11grepをかけ、ファイルを行き来し、おそらくClaudeにこのリポジトリの解説を頼むだろう。

00:00:17もし、コードベースを学習できる、本物のインタラクティブな地図があったらどうだろう？

00:00:22フロー、アーキテクチャ層、変更、影響範囲。それが「Understand Anything」だ。

00:00:27GitHubでは数週間で1万4000以上のスターを獲得し、多くの開発者が話題にしている。

00:00:32それについてだ。

00:00:33次の1分で、その仕組みと、いかにコードベースの理解を劇的に

00:00:36スピードアップしてくれるかを紹介しよう。

00:00:44Understand Anythingは、Claude Codeのオープンソースプラグインだ。

00:00:47Cursor、Copilot、Gemini CLIといったツールのワークフローにも組み込める。

00:00:53リポジトリやナレッジベースを指定するだけで、そのプロジェクトをクエリ可能な

00:00:58インタラクティブなナレッジグラフに変えてくれる。

00:01:00静的解析とマルチエージェントLLM処理によってこれを実現している。

00:01:05だが重要なのは、技術スタックではない。

00:01:07重要なのは、このツールが解決する課題だ。すべての開発者がこの問題を経験しているからだ。

00:01:13新しく参加したレガシーコードやレガシーアプリの現場。

00:01:16ドキュメントは古く、

00:01:18すべてを知っていたエンジニアは半年前に辞めている。

00:01:22そしてAIコーディングエージェントは、推測を繰り返すばかり。

00:01:26そんな時にこそ、このツールが役立つ。

00:01:28では動かしてみよう。

00:01:29ワークフローを高速化するツールに興味があれば、ぜひチャンネル登録を。

00:01:33動画はどんどん公開していく。

00:01:35これは中規模のプロジェクトだ。

00:01:36非常に厄介な規模だが、このツールの凄さを実演するには

00:01:40ちょうどいい大きさだ。

00:01:42Googleのマイクロサービスのリポジトリからクローンしたものだが、

00:01:46実用性を試すには十分なものだ。

00:01:49まず、プラグインをインストールする。Claudeで「plugin install understand-anything」と。

00:01:54これで完了。

00:01:55生成されたら、プラグインをリロードして、あとは実行するだけだ。

00:01:58「understand」と入力する。

00:02:00今、リポジトリ全体をスキャンしている。

00:02:03構造、関係性、主要なモジュール、そしてビジネス上の概念まで抽出する。

00:02:09ダッシュボードコマンドを実行してすべてを起動しよう。

00:02:11まず言っておくと、実行には30分ほどかかり、大量のトークンを消費した。

00:02:16だから、Claudeのプラン選びは重要だ。

00:02:19私はClaude Maxを使っているが、制限の25%を消費した。かなり激しく燃える。

00:02:24しかし、完了すればダッシュボードを開ける。ここからが本当に面白い部分だ。

00:02:29真価が問われるところだ。

00:02:30ズームアウトすれば高レベルなアーキテクチャが見える。

00:02:32ズームインすれば内部構造にアクセスできる。

00:02:35クリックしてコードの内訳や、接続関係を確認できる。

00:02:40クリックひとつで、実際のコードを閲覧することさえ可能だ。

00:02:43ここで「payments」のように検索してみよう。

00:02:46通常なら、ルート、サービス、モデル、ハンドラー、役に立たないドキュメントを

00:02:52あちこち行き来するハメになるが、このツールなら一箇所にまとめてくれる。

00:02:56「Guided tour」をクリックすれば、流れに沿ってガイドしてくれる。

00:03:01エントリポイント、バリデーション、ロジック、DB、外部API、エラー処理まで。

00:03:07これだけでも非常に便利だ。

00:03:09ガイドツアーがすべてを分解してくれる。

00:03:11中に入って、各コンポーネントにアクセスできる。

00:03:14これがただの綺麗なグラフと、本番コードに触れる前に

00:03:18実際に確認したくなるグラフとの違いだ。

00:03:20ここで当然の疑問が浮かぶだろう。「似たようなツールは既にあるのでは？」

00:03:25開発者として、綺麗なダッシュボードはもう必要ない。

00:03:29時間の無駄を減らしたい。このツールはソフトウェア開発の最大の時間の無駄に挑んでいる。

00:03:35コンテキストの把握だ。

00:03:37全体はどう繋がっているのか？

00:03:38どう役立つのか？

00:03:39人々は、巨大なJavaのモノリスやマイクロサービス、何百ものファイルがある

00:03:45プロジェクトでテストしており、反応は私のものに近い。

00:03:48すべてを分解し、繋げ、絡み合いを見せてくれるため、最初の2週間を

00:03:53救ってくれたはずだ。

00:03:56最初の大きなユースケースはオンボーディングだ。

00:03:58「12ページの資料を読んで、分からなければ聞いて」ではなく、

00:04:03それだけで混乱するようなことを避けて、「グラフを開いてツアーを見ろ、

00:04:08その上で質問してくれ」と言える。

00:04:092つ目のユースケースはAIエージェントだ。ほとんどのAIコーディングツールは

00:04:14与えられたコンテキスト次第だからだ。

00:04:17エージェントが見るファイルが3つだけなら、推測するしかない。

00:04:20ドメイン、フロー、依存関係、解説を含むシステム構造のマップがあれば、

00:04:27最初から正しい修正を行う可能性が高まる。

00:04:30そしてもちろん、リファクタリングだ。

00:04:32コードに触れる前に「何に依存しているのか？

00:04:36どのフローに属しているか？

00:04:38動かしたら何が壊れるのか？」と聞ける。

00:04:40これが、1行の修正を大惨事にしない方法だ。

00:04:44これが、開発者がこのプロジェクトに興奮している本当の理由だ。

00:04:48図が好きだからではない。確かに図はクールで便利だし、

00:04:51私も視覚的だが、迷子になるのが嫌なんだ。

00:04:55ここで慎重になる必要がある。開発者は以前にもコード可視化ツールを見てきた。

00:05:00IDEグラフ、Sourcegraphスタイルのナビ、NXグラフ、Tree-sitterビジュアライザー。

00:05:05その多くは全く同じ問題を抱えていた。

00:05:09何をしたか？

00:05:10構造は示すが、実際の意味を説明しない。

00:05:13「このファイルはこのファイルをインポートしている」、それで？なぜ？

00:05:18どのフローの一部なのか？

00:05:19リクエストはどこから始まる？

00:05:20変更すると何が壊れる？

00:05:22それが欠けていたレイヤーだ。

00:05:24Understand Anythingはそのレイヤーを追加しようとしている。

00:05:27単にTypeScriptファイルを表示するだけでなく、実際に

00:05:31どう動くかの流れに近いものに変えようとしている。

00:05:35それが重要だ。

00:05:37ファイルから意味へ、インポートからシステム挙動へ、部品から、

00:05:42機械の動きそのものへ。

00:05:43多くのLLMやRAGコードツールと比較して、より視覚的で教示的だ。

00:05:48多くのAIコーディングツールはただの検索ボックスに過ぎない。

00:05:52質問して、回答を得るだけ。

00:05:54これは包括的な分解を行い、すべてがどこへ向かい、何が絡み合い、

00:06:00どう繋がっているかを見せ、実際にコードを見れるようにしてくれる。

00:06:04では、人々が実際に何を評価しているか話そう。

00:06:05明らかな勝因はオンボーディングだった。

00:06:07巨大なコードベースに参加するなら、これが良い出発点になる。

00:06:12そしてアーキテクチャ層もそうだ。

00:06:13これらは非常に作り込まれている。

00:06:15システムレベルから開始し、モジュールや実装詳細へと

00:06:20掘り下げることができる。

00:06:21Diffの影響範囲も重要だ。

00:06:23経験豊富な開発者なら誰もが、理解していないコードベースに少しの変更を加える

00:06:27恐怖を知っている。

00:06:29Claude Codeユーザーにとって、グラフは優れたコンテキストになり得る。

00:06:34ランダムなファイルをプロンプトに投げる代わりに、構造化されたアーキテクチャ知識を与える。

00:06:39無料かつMITライセンスで、インクリメンタルで、複数の開発環境で動くよう設計されている。

00:06:45さて、懐疑的な視点から言えば、プロジェクトがこれほど急速に拡大すると、

00:06:49「これは役に立つのか、それともGitHubのアルゴリズムで勝っただけか」と問うべきだ。

00:06:53良い質問だ。

00:06:55LLMの依存関係がある、つまりトークンコストがかかる。

00:06:59トークンコストで爆発的に増えた。

00:07:02時間がかかり、大量のトークンを消費した。

00:07:05使うなら、良いプランを用意しておくことだ。

00:07:08それでも良い判断力は必要だ。

00:07:09これは単に全体像を見せてくれるだけだ。

00:07:11コードを読む代わりにはならない。

00:07:13理解を助けてくれるだけだ。

00:07:16このようなコーディングツールやヒントが好きなら、Better Stackチャンネルを登録してくれ。

00:07:20また別の動画で会おう。

Key Takeaway

Understand-Anythingは、レガシーコードや複雑なプロジェクトのコードベースを静的解析とマルチエージェントLLMでインタラクティブな地図に変え、コンテキスト把握に伴う人的コストを大幅に削減する。

Highlights

Understand-Anythingは、Claude Codeのプラグインとして動作し、リポジトリをクエリ可能なインタラクティブなナレッジグラフへ変換する。
GitHubで1万4000以上のスターを獲得しており、静的解析とマルチエージェントLLM処理を組み合わせてコードベースの依存関係を可視化する。
コードベースをスキャンし構造化するプロセスには約30分を要し、LLMのトークンを大量に消費する。
単なるファイル構成図ではなく、エントリポイントからビジネスロジックまでのコードフローとシステム挙動を明示する。
コードに触れる前のリファクタリングの影響範囲特定や、新規開発者のオンボーディング資料として活用できる。

Timeline

コードベース理解の課題と解決策

巨大なリポジトリへの参加時に、開発者が直面する情報の非対称性を解消する。
静的解析とマルチエージェントLLMの活用により、コードの構造やビジネス概念をインタラクティブなグラフにする。

新しいチームに加わった際、数十万行のコードを前にgrepやファイル移動だけで全体像を把握するのは困難である。特にドキュメントが古く、元の設計者が離脱したプロジェクトではなおさらである。このツールは、単なるテキスト検索に頼る従来のAIエージェントの推測依存を改善する役割を果たす。

ツール導入と実行プロセス

Claude Codeプラグインとしてインストールし、understandコマンドでリポジトリのスキャンを開始する。
実行には約30分を要し、トークン消費が激しいため、適切なAPIプランの選択が不可欠である。

プラグインのインストール後、リポジトリ全体をスキャンして主要モジュール、関係性、ビジネス的概念を抽出する。実行完了後、ダッシュボード上で高レベルなアーキテクチャから詳細なコード実装までシームレスにズームインが可能になる。通常の検索では辿り着けない、サービスやハンドラーのつながりを一箇所で閲覧できる。

実務への応用と既存ツールとの差異

オンボーディング効率の向上、AIエージェントの精度向上、リファクタリング時の影響範囲分析に有効である。
従来の可視化ツールと異なり、ファイル間の接続だけでなくシステム全体の挙動と意味を提示する。

既存の可視化ツールは構造を示すだけで「なぜその処理が必要か」という文脈が欠けていた。このツールはその意味的レイヤーを追加することで、コードがどう動くかの流れを可視化する。ただし、あくまで理解を助ける補助ツールであり、トークンコストを考慮した計画的な利用が求められる。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video