はじめてのClaude Code

LLM101

Ryo Nakagami

2026年04月13日

コーディングエージェントとは何か？

  • コーディングエージェントとは，LLMが自律的にコードの読み書き・コマンド実行・検証を行うAIエージェントのこと
  • ユーザーの指示を受けて「計画 → 実行 → 検証 → 修正」のループを自走し，タスク完了まで反復する
    • 従来ソフトウェア: 人間が アルゴリズム・分岐・例外処理を事前にすべて設計し，その手順に従う
    • コーディングエージェント: 手順そのものを動的に生成・修正

コーディングエージェントの進化1

pipeline:
  title: "LLM登場前"
  content:
    - 'バッチ処理やワークフローによる処理自動化'
    - '処理は自動化されるがロジックは固定'
  opposite: "2010年代後半"
  color: "#B4D7FF"

copilot:
  title: "LLMコーディング支援"
  content:
    - 'コード補完・生成（Copilot, ChatGPTなど）'
    - 'コード補完や関数の生成'
    - '試行錯誤は人間が実施'
  opposite: "2020年代前半"
  color: "#0E3666"

agent_v1:
  title: "対話型エージェント"
  content:
    - 'IDE + AIモデル(Cursorが代表例)'
    - 'レポジトリ内容を踏まえて，コード生成と実行を自動化'
    - 対話的な開発フロー中心
  opposite: "2023〜2024"
  color: "#0E3666"

agent_v2:
  title: "自律型エージェント"
  content:
    - 'Devin, Claude Code'
    - '計画→実行→検証→修正のループを確立'
    - 'バックグラウンド実行，非同期・並列実行'
  opposite: "2024〜"
  color: "#428CE6"

コーディングエージェントの特徴

「計画 → 実行 → 検証 → 修正」の自律ループで動く

指示・ゴール

  • ユーザー要件
  • 成功条件の把握

計画立案

  • タスク分解・要件具体化
  • 手順の動的設計

実行

  • Read/Edit/Bash
  • 環境への作用

検証

  • 出力・エラー確認
  • テスト結果検証

修正・再計画

  • 誤り訂正
  • 方針転換
フィードバックループ：完了条件を満たすまで自走反復

コーディングエージェントの中核機能

regmonkey_abstract_summary:
  title_fontsize: 1em
  bullet_fontsize: 0.8em
  keystat_fontsize: 0.8em
  children:
    - title: 目的駆動
      description:
        - 操作ではなく「やりたいこと（Goal）」を与える
        - 完了条件・成功基準をもとに自走
      width: [25,75]

    - title: 動的生成
      description:
        - 手順・コード・コマンドを状況に応じて生成
        - 固定ロジックではなく都度設計・変更
      width: [25,75]
regmonkey_abstract_summary:
  title_fontsize: 1em
  bullet_fontsize: 0.8em
  keystat_fontsize: 0.8em
  children:
    - title: ツール実行
      description:
        - Git，APIなどのツールを自律的に操作
        - ファイル操作・シェル実行・検索を使い分け
      width: [25,75]

    - title: 自己修正
      description:
        - 実行結果を確認し，エラーに応じて修正
        - 完了条件を満たすまで反復
      width: [25,75]

コーディングエージェントを使いこなすには？

仕様書駆動（Spec-Driven）でエージェントのコンテキストを整える

Key Takeaways

  • エージェントはコンテキストの質で精度が決まる ⇔ 曖昧な指示は動的生成を暴走させる
  • コードではなく仕様書を「正」として扱い，仕様 → 実装の方向性を固定することでズレを抑える
  • 小さく切った仕様に沿わせることで自律ループの予測可能性が高まる

📋 仕様書を先に書く

  • REQUIREMENTS → DESIGN → TASKS1 の順で書く
  • コードより仕様書を「正」として扱う
  • 実装詳細ではなく意図と制約を明文化

🤖 仕様書をコンテキストとして渡す

  • 会話のたびに仕様書を参照させる(CLAUD.mdで制御)
  • エージェントの外部記憶として機能させる
  • セッション間での一貫性を担保

🔄 変更は仕様書から

  • 要件変更があれば仕様書を先に更新
  • コードへの直接パッチは仕様との乖離を生む
  • 仕様 ↔︎ 実装の整合性を維持

📏 タスクを細かく切る

  • 小さなタスク = 高い予測可能性
  • エージェントが迷わず実装できる粒度に分解
  • 検証・修正ループを短く保つ

Appendix: REQUIREMENTS → DESIGN → TASKS

  • コードを書く前に機械が読める以下の仕様書を作ることで，仕様書をエージェントの「外部記憶」として機能させる
  • 一義的には，人間のためのドキュメントではなく，エージェントのためのコンテキストとして設計
  • 変更が起きたらコードより仕様書を先に更新すること

WHATの明確化

# REQUIREMENTS.md

## ゴール

CSV をアップロードし
グラフを生成・DLできるアプリ

## 機能要件

- [ ] ドラッグ&ドロップでCSV読込
- [ ] X/Y 軸を選択できる
- [ ] 折れ線・棒・散布図に対応
- [ ] PNG/SVG でダウンロード

## 非機能要件

- 1,000行以下は 300ms 以内
- サーバーレス（フロントのみ）

## 制約

- 外部APIへのデータ送信禁止

## 完了の定義（DoD）

- 全要件の [ ] が ✅ になること

HOWの明確化

# DESIGN.md

## アーキテクチャ

単一HTML + Vanilla JS + d3.js

## コンポーネント構成

┌────────────────────┐
│ DropZone     │ CSV受け取り
├────────────────────┤
│ AxisSelector │ 列選択UI
├────────────────────┤
│ ChartRenderer│ d3で描画
├────────────────────┤
│ ExportButton │ PNG/SVG出力
└────────────────────┘

## データフロー

CSV → Papa.parse → rawData[]
→ { xCol, yCol, chartType }
→ d3.select('#chart') → SVG

TODOの明確化

# TASKS.md

## Phase 1: 基盤構築

- [x] index.html 骨格作成
- [x] d3.js CDN 動作確認
- [ ] CSS Grid レイアウト

## Phase 2: CSV処理

- [ ] DropZone 実装
  - [ ] drag/drop イベント
  - [ ] File API 読み込み
  - [ ] Papa.parse で変換
- [ ] 数値列の自動検出

## Phase 3: 可視化

- [ ] 折れ線グラフ（d3.line）
- [ ] 棒グラフ（d3.scaleBand）
- [ ] 散布図（d3.scaleLinear）