型11: プロジェクト概要の把握
クラス: 初心者
所要時間: 約30分
前提知識: 型1〜10 完了済み
1. 解説
初めてのコードベースに入るとき
開発現場では、自分が書いていないコードを理解する機会が多くある。 Claude Code は既存プロジェクトの「地図を作る」作業を大幅に短縮する。
従来のコードリーディング:
1. README を読む（あれば）
2. ディレクトリ構造を把握する
3. エントリーポイントを探す
4. 依存関係を調べる
5. 主要な関数・クラスを追う
⏱ 数時間〜数日
Claude Code を使う場合:
1. 「このプロジェクトを説明してください」 → 5分で全体像を制する効果的なプロジェクト把握の質問セット
# 1. 全体像
「このプロジェクトの目的と主要な機能を教えてください」
# 2. 技術スタック
「使用している技術・ライブラリを一覧にしてください」
# 3. ディレクトリ構造の意味
「各ディレクトリの役割を説明してください」
# 4. エントリーポイント
「アプリケーションはどこから始まりますか？処理の流れを追ってください」
# 5. 重要なファイル
「最も重要なファイルはどれですか？理由も教えてください」
# 6. 依存関係
「外部依存パッケージはどれですか？それぞれの用途は何ですか？」2. 実践
Step 1: サンプルプロジェクトを用意
bash
mkdir -p ~/claude-practice/lesson11/{src,routes,models,tests}
cd ~/claude-practice/lesson11
# package.json
cat > package.json << 'EOF'
{
"name": "todo-api",
"version": "1.0.0",
"description": "シンプルなTODO管理REST API",
"main": "src/app.js",
"scripts": {
"start": "node src/app.js",
"test": "jest"
},
"dependencies": {
"express": "^4.18.0",
"sqlite3": "^5.1.0"
},
"devDependencies": {
"jest": "^29.0.0"
}
}
EOF
# src/app.js
cat > src/app.js << 'EOF'
const express = require('express');
const todoRoutes = require('../routes/todos');
const app = express();
app.use(express.json());
app.use('/api/todos', todoRoutes);
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
module.exports = app;
EOF
# models/todo.js
cat > models/todo.js << 'EOF'
class Todo {
constructor(id, title, completed = false) {
this.id = id;
this.title = title;
this.completed = completed;
this.createdAt = new Date().toISOString();
}
}
const todos = [];
let nextId = 1;
function findAll() { return todos; }
function findById(id) { return todos.find(t => t.id === id); }
function create(title) {
const todo = new Todo(nextId++, title);
todos.push(todo);
return todo;
}
function update(id, data) {
const todo = findById(id);
if (!todo) return null;
Object.assign(todo, data);
return todo;
}
function remove(id) {
const idx = todos.findIndex(t => t.id === id);
if (idx === -1) return false;
todos.splice(idx, 1);
return true;
}
module.exports = { findAll, findById, create, update, remove };
EOF
# routes/todos.js
cat > routes/todos.js << 'EOF'
const express = require('express');
const router = express.Router();
const Todo = require('../models/todo');
router.get('/', (req, res) => res.json(Todo.findAll()));
router.post('/', (req, res) => {
const { title } = req.body;
if (!title) return res.status(400).json({ error: 'title is required' });
res.status(201).json(Todo.create(title));
});
router.put('/:id', (req, res) => {
const todo = Todo.update(parseInt(req.params.id), req.body);
if (!todo) return res.status(404).json({ error: 'Not found' });
res.json(todo);
});
router.delete('/:id', (req, res) => {
if (!Todo.remove(parseInt(req.params.id))) return res.status(404).json({ error: 'Not found' });
res.status(204).end();
});
module.exports = router;
EOFStep 2: プロジェクト全体像を把握させる
bash
claudeこのプロジェクトを初めて見ます。
全体像を把握したいので、以下を教えてください：
1. このアプリは何をするものか
2. 使用している技術スタック
3. ディレクトリ構造の説明
4. APIエンドポイントの一覧Step 3: データフローを追う
ユーザーが POST /api/todos を呼び出したとき、
どのファイルのどの関数が順番に呼ばれますか？
コードを追って説明してください。Step 4: 改善点を洗い出す
このプロジェクトの現在の問題点・改善点を5つ挙げてください。
優先度順に並べてください。3. 確認課題（Assignment）
課題 11-1: アーキテクチャ図の生成
このプロジェクトのアーキテクチャをテキストの図（ASCII art や
Mermaid記法）で表してください。達成条件: コンポーネント間の関係が視覚的に表現されていること
課題 11-2: 新規参加者向けオンボーディングドキュメント
このプロジェクトに初めて参加する開発者向けのオンボーディングガイドを
ONBOARDING.md として作成してください。
以下を含めてください：
- セットアップ手順
- プロジェクト構造の説明
- 開発の始め方
- 主要なファイルの役割達成条件: ONBOARDING.md が作成され、手順が正確に記述されていること
課題 11-3: 機能追加の影響範囲の調査
「TODO に優先度（priority: low/medium/high）を追加する」
という機能を追加する場合、どのファイルを変更する必要がありますか？
影響範囲を調べて説明してください。達成条件: 変更が必要なファイルがすべてリストアップされていること