個人開発でAIコード可視化ツール「CodeMap」を作った話

はじめに

「動いてるけど、コードの中身がわからない」

Vibe Codingをやっている人なら、一度はこの感覚を味わったことがあるんじゃないでしょうか。

Lovableでアプリを作った。Cursorで機能を追加した。デプロイも完了して、ちゃんと動いている。でも、ふとコードを開いてみると——何が何だかわからない。どのファイルが何をしていて、どこから読めばいいかもわからない。

自分もまさにその状態でした。個人開発でいくつかプロジェクトを作ってきましたが、AI生成コードが増えるにつれて「理解の負債」がどんどん積み上がっていく感覚がありました。

Stack Overflowの2026年調査では、76%の開発者がAI生成コードを完全には理解できていないと回答しています。さらにCheckmarxのレポートによると、AI生成コードの45%にセキュリティ脆弱性が含まれているとのこと。

コードは書けるようになった。でも「理解」が追いついていない。

この課題を解決するために、コードの構造を可視化し、AIが「どこから読めばいいか」を案内してくれるツール CodeMap を作りました。

なぜ作ったか

既存ツールを14個調査して気づいたこと

最初は「もう誰か作ってるだろう」と思って調べました。セキュリティスキャンツールはいくつかある。コード可視化ツールもある。でも、「可視化 + 理解支援 + セキュリティ」を統合して、しかもVibe Coderのような非エンジニア寄りの人が使えるツールは、14ツール調べた限りでは見つかりませんでした。

Y Combinatorも2026年春のRFS（Request for Startups）で「Vibe code security scanner」を明記していて、市場としてもこの課題が認識され始めています。

ターゲットは「コードが読めない人」

重要なのは、CodeMapのメインターゲットがプロのエンジニアではないこと。Lovable、Bolt.new、Cursorなどを使ってアプリを作ったけど、生成されたコードを読めない人——つまりVibe Coderです。

なので、UIもUXも「初心者にわかること」を最優先に設計しました。ターミナル操作は不要。GitHubのURLを貼るか、フォルダをアップロードするだけ。

何ができるか

1. コードマップ可視化（5つのビューモード）

React Flowを使ったインタラクティブなコード構造の可視化です。

• システムビュー: トップレベルのモジュール間の依存関係
  

• モジュールビュー: モジュール内ファイルのimport関係
  

• ファイルビュー: ファイル内のシンボル（関数・クラス・変数）
  

• セキュリティビュー: 脆弱性を重ね合わせ表示
  

• ガイドビュー: 読む順番をハイライト
  

D0（システム全体）→ D1（モジュール）→ D2（ファイル内シンボル）の3段階でドリルダウンでき、パンくずナビで自由に行き来できます。

2. AI読み始めガイド

「コード全体を見せられても、どこから手をつければいいかわからない」——これが一番多いペインポイントでした。

CodeMapはコードの構造を分析し、package.json → エントリーポイント → アプリコア → ストア/状態管理 → 型定義の順に、理解すべきファイルを7〜10件リストアップします。各ファイルには「なぜこのファイルが重要か」の初心者向け説明が付きます。

3. セキュリティチェック（2層構造）

• Layer 1（静的スキャン）: ハードコードされたAPIキー、.envのコミット、CORS: * や debug: true などの危険な設定を正規表現で即座に検出
• Layer 2（AI分析）: Claude Haikuが認証の欠如やデータ露出リスクを分析

検出結果は「何が危険で、どう修正するか」を初心者にもわかる言葉で表示します。

4. ソースビューア + AIチャット

VS Code風のインターフェースで、左にファイルツリー、右にコード表示。コードの任意の部分を選択してAIに質問できます。import文やReact Hooksには初心者向けのインラインコメントが自動付与されます。

技術スタック

カテゴリ	技術
フロントエンド	Next.js 15 (App Router) + React 19
可視化	React Flow
コード解析	@babel/parser (JS/TS), regex (Python)
AI	Claude Haiku (Anthropic API)
DB / 認証	Supabase (PostgreSQL + Auth + RLS)
決済	Stripe (REST API直接呼び出し)
ホスティング	Vercel (Serverless)
モノレポ	Turborepo + pnpm
テスト	Vitest 41件 + Playwright 25件

モノレポ構成で、コード解析エンジン（packages/core）とWebアプリ（apps/web）を分離しています。coreパッケージはフレームワーク非依存なので、将来的にVS Code拡張やCLIでも再利用できる設計です。

苦労した点を正直に書く

Babelパーサーとの格闘

@babel/parser でTypeScriptのASTを正確にパースするのが一番技術的に辛かったです。特にアロー関数 + デフォルトエクスポート + ジェネリクスの組み合わせ。

たとえば export default function<T>(props: T): JSX.Element みたいなパターンと export const Foo = (props: Props) => { ... } が混在すると、ASTの構造が全然違う。テストケースを41件まで増やしながら、一つずつエッジケースを潰していきました。

React Flowのビュー状態消失問題

5つのビューモードを切り替えると、ズーム位置やノード選択状態が消えてしまう問題がありました。原因は ReactFlowProvider のスコープ。ビュー切り替え時にProviderごと再マウントされていたため、状態がリセットされていました。

解決策はProvider分離。各ビューモードにそれぞれ独立したProviderを持たせ、CSS表示切り替えで見た目だけ変える方式にしました。

Stripe連携——SDKを使わなかった理由

Vercelのサーバーレス環境でStripe SDKを使うと、コールドスタート時にコネクション確立で問題が出ることがありました。そこでCheckout Session作成にはREST APIを直接叩く方式を採用。

// Stripe REST API直接呼び出し（SDKなし）
const res = await fetch('https://api.stripe.com/v1/checkout/sessions', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${stripeKey}`,
    'Content-Type': 'application/x-www-form-urlencoded',
    'Idempotency-Key': idempotencyKey,
  },
  body: params.toString(),
});

Webhook受信側は署名検証が必要なのでSDKを使っています。用途に応じて使い分ける判断でした。

Supabase RLSのハマりどころ

ユーザーごとのデータ分離をRLS（Row Level Security）で実装しましたが、JWTトークンのクレーム参照とRLSポリシーの組み合わせでハマりました。auth.uid() を使ったポリシーをテーブルごとに設計し直す必要がありました。

料金モデル——月額課金をやめた理由

初心者にとって月額課金はハードルが高い。「まだ使いこなせるかわからないのに月1,000円」は心理的に厳しいです。

そこで従量課金（クレジット制）を採用しました。

• 基本機能（可視化・ガイド・セキュリティスキャン）は 完全無料
• AI機能（AI分析・AIチャット）だけクレジット消費
• 新規登録で 10クレジット無料（AI分析3回分）
• 追加は 100円（10クレジット） から購入可能

「使った分だけ払う」モデルなので、初心者でも気軽に試せます。最小課金100円。これならハードルはかなり低いはず。

開発期間と学び

実質5日間で0からデプロイまで完了しました（もちろん毎日長時間やりましたが）。

一番大きな学びは「テストを最初から書いておいてよかった」ということ。パーサーのエッジケース対応で41件のユニットテストに何度も助けられました。E2Eテスト25件（Playwright）もUIの操作フロー検証で威力を発揮。

個人開発だと「テスト書く時間がもったいない」と思いがちですが、むしろ個人開発だからこそテストが重要だと実感しました。レビューしてくれる人がいないので、テストが唯一のセーフティネットです。

今後の予定

• VS Code拡張: エディタ内で直接コードマップを表示
• Python対応強化: 現在のregex解析からAST解析へ移行
• チーム機能: 分析結果の共有・コメント機能
• PDFエクスポート: コードマップをレポートとして出力

おわりに

Vibe Codingの普及で「コードを書く」ハードルは劇的に下がりました。次に必要なのは「コードを理解する」ためのツールだと考えています。

CodeMapはまだMVPですが、フィードバックをいただきながら改善を続けていきます。ぜひ触ってみてください。

感想・フィードバックはX（@CreolabDev）のDMやリプライで気軽にどうぞ。技術的な質問も大歓迎です。

---

Zenn でアーキテクチャ・実装の詳細を深掘りした技術記事も書いています。Next.js 15 + Supabase + Stripeの設計判断に興味がある方はそちらもぜひ。