概要
AI生成コードの「理解の負債」を解消するため、React FlowとAI解析を用いてコード構造を可視化し、セキュリティ診断や読み始めガイドを提供するツール「CodeMap」の開発記録。
詳細内容
### 開発の背景と目的
AI生成（Vibe Coding）により「動くが理解できないコード」が増加している現状を課題とし、非エンジニアや初心者でもコード構造を直感的に把握できるツール「CodeMap」を開発。既存の14ツールを調査した上で、可視化・理解支援・セキュリティを統合した点が特徴です。
### 主な機能
1. **コードマップ可視化**: React Flowを活用し、システム、モジュール、ファイル、セキュリティ、ガイドの5つのビューモードを提供。3段階のドリルダウンが可能です。
2. **AI読み始めガイド**: package.jsonから順に、理解すべきファイルを優先度順に7〜10件リストアップし解説します。
3. **セキュリティチェック**: 正規表現による静的スキャンとClaude Haikuによるロジック分析の2層構造で脆弱性を検出。
4. **ソースビューア & AIチャット**: コード内のimport文やHooksに解説を自動付与し、AIへの質問も可能です。
### 技術スタックと工夫
- **Next.js 15 / React 19**: 最新のフロントエンド環境を採用。
- **@babel/parser**: TypeScriptのAST解析における複雑なエッジケースを41件のテストで克服。
- **Stripe REST API**: サーバーレス環境のコールドスタート対策としてSDKを使わず直接APIを叩く設計。
- **従量課金モデル**: 初心者の心理的ハードルを下げるため、月額制ではなく100円からのクレジット制を採用しています。