生成AI研修
Part 4: AI × 開発 入門

Chapter 24: AI でコードを読む

既存コードベースの理解とドキュメント生成

24.1 知らないコードベースの理解

新しいプロジェクトに参加したとき、巨大なコードベースを短時間で理解するのは大変な作業です。 AI を使うと、コードの全体像や特定の機能を素早く把握できます。

AI を使ったコードリーディングの流れ

最初にすること:全体像を掴む

Claude Code を使う場合、まずプロジェクトディレクトリで Claude Code を起動します。

cd /path/to/unknown-project
claude

そして以下のように質問します。

このプロジェクトの概要を教えてください。
- 何をするシステムか
- 使われている技術スタック
- ディレクトリ構造の説明
- エントリーポイントはどこか

Claude Code はプロジェクトのファイルを調査して、全体像をまとめてくれます。

TODO: あとで実際のスクリーンショットに置き換え - Claude Code がプロジェクト構造を調査して説明している様子

Copilot Chat を使う場合

VS Code で Copilot Chat を開き、ワークスペース全体を参照させます。

@workspace このプロジェクトはどのような構造になっていますか?
主要なモジュールとその役割を教えてください。

@workspace をつけることで、Copilot がワークスペース全体を参照します。

24.2 関数・クラスの説明を求める

特定のコードが何をしているかわからないとき、AI に説明を求めます。

コード選択から説明を求める(Copilot)

  1. VS Code でコードを選択
  2. Ctrl+I でインラインチャットを開く
  3. 「このコードを日本語で説明してください」と入力
// 例: 読んでいてよくわからない関数がある場合
function processTransactions(
  transactions: Transaction[],
  config: ProcessConfig
): ProcessResult {
  const grouped = transactions.reduce((acc, tx) => {
    const key = `${tx.userId}-${tx.type}`;
    if (!acc[key]) acc[key] = [];
    acc[key].push(tx);
    return acc;
  }, {} as Record<string, Transaction[]>);

  // ... 複雑な処理が続く
}

Copilot への質問例:

この processTransactions 関数が何をしているか、
ステップバイステップで日本語で説明してください。
特に grouped の作り方と、その後どう使われるかを中心に。

Claude Code で詳細に調査する

Claude Code なら、関数が呼び出している他の関数や、どこから呼ばれているかも追跡できます。

processTransactions 関数について教えてください。
1. この関数が何をするか
2. 引数の型 ProcessConfig はどのように定義されているか
3. この関数はどこから呼ばれているか
4. 想定されるユースケースは何か

24.3 依存関係の把握

複雑なシステムでは、モジュール間の依存関係を把握することが重要です。

依存関係の調査

# Claude Code への質問例
UserService クラスの依存関係を教えてください。
- このクラスが使っているサービス・リポジトリ
- このクラスを使っているファイル
- 循環依存はないか

データの流れを追う

特定のデータがどこで生成されてどこで消費されるかを追跡します。

ユーザーが注文を確定してから、注文データが
データベースに保存されるまでの処理の流れを
順番に説明してください。
関連するすべてのファイル・関数を含めてください。

上記のような図を AI に生成してもらうことも可能です。

24.4 処理フローの可視化(Mermaid 図の生成)

AI はコードから Mermaid 形式のフロー図を生成できます。 複雑な処理の流れを視覚化するのに便利です。

Mermaid 図を生成してもらう

src/services/AuthService.ts のログインフローを
Mermaid のシーケンス図で表現してください。
正常系とエラー系(パスワード不一致、アカウントロックなど)
を含めてください。

生成例(Claude の出力):

```mermaid
sequenceDiagram
    participant User
    participant AuthService
    participant UserRepo
    participant TokenService

    User->>AuthService: login(email, password)
    AuthService->>UserRepo: findByEmail(email)
    alt ユーザーが存在しない
        UserRepo-->>AuthService: null
        AuthService-->>User: AuthError("ユーザーが見つかりません")
    else ユーザーが存在する
        UserRepo-->>AuthService: User
        AuthService->>AuthService: verifyPassword(password, hash)
        alt パスワード不一致
            AuthService-->>User: AuthError("パスワードが違います")
        else 認証成功
            AuthService->>TokenService: generateTokens(user)
            TokenService-->>AuthService: { access, refresh }
            AuthService-->>User: { token, refreshToken }
        end
    end
```

状態遷移図の生成

注文の状態管理(pending → confirmed → shipped → delivered)を
Mermaid の状態遷移図で表現してください。

24.5 ドキュメントの自動生成

既存コードにドキュメントが不足している場合、AI で自動生成できます。

JSDoc コメントの生成(TypeScript/JavaScript)

// ドキュメントがない関数
function calculateShippingCost(
  weight: number,
  distance: number,
  expedited: boolean
): number {
  const base = weight * 0.5 + distance * 0.1;
  return expedited ? base * 1.5 : base;
}

Copilot Chat や Claude Code に以下を依頼します。

この calculateShippingCost 関数に JSDoc コメントを追加してください。
パラメータ・戻り値・使用例を含めてください。

生成される結果の例:

/**
 * 配送コストを計算する。
 *
 * 基本コストは重量と距離から計算され、
 * 速達オプションが有効な場合は 1.5 倍になる。
 *
 * @param weight - 荷物の重量(kg)
 * @param distance - 配送距離(km)
 * @param expedited - 速達オプション(true の場合 1.5 倍)
 * @returns 配送コスト(円)
 *
 * @example
 * // 10kg の荷物を 100km 先に通常配送
 * calculateShippingCost(10, 100, false); // → 15
 *
 * // 10kg の荷物を 100km 先に速達配送
 * calculateShippingCost(10, 100, true); // → 22.5
 */
function calculateShippingCost(
  weight: number,
  distance: number,
  expedited: boolean
): number {
  const base = weight * 0.5 + distance * 0.1;
  return expedited ? base * 1.5 : base;
}

README の生成

プロジェクト全体の README を生成することもできます。

このプロジェクトの README.md を生成してください。
以下を含めてください:
- プロジェクトの概要
- セットアップ手順
- よく使うコマンド
- API の概要(主要なエンドポイント)

ドキュメント生成のポイント

  • 生成後は必ず確認: AI が生成するドキュメントが正確かを確認する
  • 実際の動作で検証: 「使用例」が実際に動くか確認する
  • 段階的に生成: 全ファイルを一度に依頼するより、重要なファイルから順番に進める
  • 既存のスタイルを踏襲: 「既存のドキュメントスタイルに合わせて」と伝える

まとめ

AI を使ったコードリーディングの活用シーン:

場面AI への依頼
プロジェクト参加初日全体構造の説明、主要コンポーネントの役割
特定のバグを調査処理フローの追跡、副作用の調査
複雑なロジックの理解ステップバイステップの説明
レビュー準備変更の影響範囲の調査
ドキュメント整備JSDoc・README の生成

AI はコードを「読む」作業を大幅に効率化しますが、最終的な理解の確認は自分で行いましょう。 AI の説明が正しいかを、実際のコードと照らし合わせる習慣が大切です。

On this page