🙆
Cursor の Vibe Coding で見落としがちなコード品質を Claude Code で自動チェックしてみた
はじめに
最近、Cursor を使った開発が主流になってきており、AI とペアプログラミングしながら高速で開発を進めることが多くなりました。
しかし、高速開発には落とし穴があります。コミット時に「本当にこのコードで問題ないか？」と不安になることがあります。
特に以下のような懸念があります：
- 型の整合性
- エラーハンドリングの漏れ
- セキュリティ上の問題
- パフォーマンスへの影響
ESLint や TypeScript のチェックは通るものの、より高次元の品質チェックが必要と感じていました。
課題：高速開発における品質担保
Vibe Coding では開発速度が上がる一方で、品質面での見落としが発生しやすくなります。
// 一見問題なさそうなコードでも...
const handleSubmit = async (data: any) => {
const result = await api.post('/users', data);
return result;
};
このようなコードでも、実際には：
- エラーハンドリングが不十分
- 型定義が曖昧
- セキュリティ面での検証不足
といった問題が潜んでいる可能性があります。
従来の静的解析ツールでは、構文やルールベースのチェックはできますが、より高次元の品質判断は困難でした。
解決策：Claude Code によるコミット時品質チェック
そこで、コミット時に Claude Code が自動的にコード品質をチェックし、問題があれば自動的にコミットを停止する仕組みを構築しました。
実装：技術的な詳細
1. Claude CLI との連携
# Claude CLI のインストール
npm install -g @anthropic-ai/claude-cli
2. 品質チェックスクリプトの作成
scripts/claude-check.mjs
#!/usr/bin/env node
import { execSync, spawn } from 'child_process';
import fs from 'fs';
// ステージングされたファイルを取得
function getStagedFiles() {
const files = execSync('git diff --cached --name-only --diff-filter=AM', {
encoding: 'utf8'
})
.trim()
.split('\n')
.filter(file => file && /\.(ts|tsx|js|jsx)$/.test(file));
return files;
}
// Claude Code でチェック実行
async function checkWithClaude(fileContents) {
const prompt = `以下のコードの品質をチェックしてください。
チェック項目:
1. コードの可読性と保守性
2. 型安全性（TypeScriptの場合）
3. エラーハンドリング
4. セキュリティの懸念事項
5. パフォーマンスの問題
6. ベストプラクティスの遵守
各ファイルについて:
- 問題点を具体的に指摘（行番号も含めて）
- 改善提案を提供
- 緊急度を3段階で評価（🔴高/🟡中/🟢低）
最後に:
- 総合評価を5段階（⭐）で
- コミットを推奨するかどうかの判断
**重要**: 最終的に以下のいずれかの判定マーカーを必ず出力してください:
- 問題がなくコミットを推奨する場合: [COMMIT_APPROVED]
- 重大な問題がありコミットをブロックすべき場合: [COMMIT_BLOCKED]
コード:
${fileContents.map(f => `--- ファイル: ${f.path} ---\n${f.content}`).join('\n\n')}`;
// Claude Code コマンドを実行
return new Promise((resolve, reject) => {
const claude = spawn('claude', ['code'], {
stdio: ['pipe', 'pipe', 'pipe']
});
let output = '';
claude.stdout.on('data', (data) => {
output += data.toString();
});
claude.on('close', (code) => {
if (code !== 0) {
reject(new Error(`claude コマンドがエラーで終了しました`));
} else {
resolve(output);
}
});
claude.stdin.write(prompt);
claude.stdin.end();
});
}
3. 判定ロジックの実装
// コミットブロック判定
function shouldBlockCommit(result) {
// 明確な判定マーカーを最優先でチェック
if (result.includes('[COMMIT_APPROVED]')) {
return false;
}
if (result.includes('[COMMIT_BLOCKED]')) {
return true;
}
// フォールバック: 高重要度問題の検出
const hasHighSeverityIssues = result.includes('🔴') &&
!result.match(/見つかりません|ありません|なし|問題はありません/);
const hasExplicitRecommendation = result.match(/コミット.*推奨.*しない/);
return hasExplicitRecommendation || hasHighSeverityIssues;
}
4. pre-commit フックとの連携
.husky/pre-commit に追加：
# Claude Code品質チェック（claudeコマンドが存在する場合のみ実行）
if command -v claude &> /dev/null; then
node scripts/claude-check.mjs
fi
動作例
品質チェック成功時
=== Claude Code コード品質チェック ===
ℹ 対象ファイル:
- src/components/Button.tsx
ℹ Claude Codeによる品質チェック中...
=== チェック結果 ===
## 品質チェック結果
### src/components/Button.tsx
✅ **総合評価**: ⭐⭐⭐⭐⭐
**良い点:**
- TypeScript の型定義が適切
- props の検証が実装されている
- アクセシビリティ対応済み
**改善提案:**
🟢 低: コメントを追加するとより保守性が向上します
**判定**: [COMMIT_APPROVED]
✓ 品質チェックが完了しました
✓ コミットを継続します
品質問題検出時
=== Claude Code コード品質チェック ===
ℹ 対象ファイル:
- src/utils/api.ts
ℹ Claude Codeによる品質チェック中...
=== チェック結果 ===
## 品質チェック結果
### src/utils/api.ts
❌ **総合評価**: ⭐☆☆☆☆
**問題点:**
🔴 高: エラーハンドリングが不十分（15行目）
🔴 高: APIキーがハードコーディングされている（8行目）
🟡 中: 型定義が any になっている（12行目）
**改善提案:**
1. try-catch でエラーハンドリングを実装
2. APIキーは環境変数から取得
3. 適切な型定義を追加
**判定**: [COMMIT_BLOCKED]
⚠ 品質チェックで問題が検出されました
✗ 品質問題によりコミットを自動的にキャンセルしました
ℹ 問題を修正してから再度コミットしてください
効果：Vibe Coding がより安全に
導入前後の比較
導入前:
- 手動レビューに依存
- 見落としによるバグ混入
- 後からの修正コスト
導入後:
- 自動品質チェック
- コミット前の問題検出
- 一貫した品質基準
実際の効果
- セキュリティ問題の早期発見: XSS脆弱性や機密情報漏洩リスクを事前に検出
- 型安全性の向上: any型の乱用や型不整合を指摘
- エラーハンドリングの改善: 例外処理の漏れを自動検出
- レビュー時間の短縮: 基本的な品質問題が事前に解決
まとめ
Claude Code を使ったコミット時品質チェックにより、Vibe Coding の利点を活かしながら品質を担保できるようになりました。
今後の改善点
- チェック速度の最適化
- プロジェクト固有ルールの設定
- チーム共有の品質基準策定
AI 時代の開発において、「速さ」と「品質」を両立させる仕組みとして、Claude Code 品質チェックは有効な選択肢だと考えています。
Discussion