Vibe Codingのワークフロー 準備編2.1
- デバッグ環境の整備 -

AIを活用したコーディングで最も重要なのは、AIが理解できる形で問題を記録し、解決パターンを蓄積することです。エラーが発生したとき「なぜ起きたか」「どう解決したか」が明確に記録されていれば、AIは過去の文脈を理解し、より的確な提案ができます。

続いて、Vibe Codingで重要な「AIが理解できるログ」を実現するための、デバッグ環境整備と段階的テスト手法を詳しく解説します。

Vibe Codingのワークフロー 準備編1 - 要件定義・設計管理

Claude Codeで効率的に開発を進めるために最も重要なのは「事前準備」です。AIに曖昧な指示を出すと、意図しない方向に進んでしまい、大量の修正が必要になります。この記事では、実際のWordPressプラグイン開発を例に、Claude Codeで高品質なコ...  続きを読む

なぜデバッグ環境整備が重要なのか？

従来の開発で直面する問題

❌ 問題のある状況：
- 最終段階まで統合テストなし
- エラーメッセージが不明確（「エラーが発生しました」）
- 問題の原因と解決方法が記録されない
- 同じ問題を繰り返し解決する時間の浪費

デバッグ環境整備による改善

✅ 改善された状況：
- 各機能追加時の即座の動作確認
- 詳細なエラー情報と解決方法の記録
- 問題パターンの蓄積と再利用
- AIが過去の解決策を参照して提案

動的開発記録システムの構築

ディレクトリ構成

project-root/
├── logs/                      # 開発記録（Git管理推奨）
│   ├── CHANGELOG.md          # 開発進捗記録
│   ├── ERRORLOG.md           # エラー・問題記録
│   └── PATTERNS.md           # パターン・知見記録
├── docs/                      # 静的ドキュメント
│   ├── 01_requirements.md    # 要件定義
│   ├── 02_architecture.md    # システム設計
│   └── 03_debugging.md       # デバッグ方針
└── src/                       # ソースコード

CHANGELOG.md - 開発進捗の継続的記録

# 変更履歴

## 2024-09-24 - Phase 1 完了

### 実装内容
- 基本的なフォームバリデーション機能
- ESTFM_Request_Form クラスの実装
- エラーメッセージの日本語化

### 技術的決定
- 既存CSSフレームワーク（.magique系）の活用
- ID: lowerCamelCase、クラス: kebab-case の命名規則採用

### パフォーマンス
- フォーム送信処理: 平均200ms
- バリデーション処理: 50ms以内

### 次のステップ
- 日付選択機能の実装
- メール送信機能の統合

ERRORLOG.md - 問題と解決の記録

# エラー記録

## 2024-09-24 10:30
### 問題: 日本語文字化け
**症状**: フォーム送信時に日本語が文字化け
**原因**: ファイルエンコーディングがSJIS
**解決**: 
1. すべてのPHPファイルをUTF-8（BOM無し）に変換
2. header('Content-Type: text/html; charset=UTF-8')を追加
**予防策**: .editorconfigでcharset = utf-8を設定

## 2024-09-23 15:45
### 問題: セッション開始エラー
**症状**: "session_start(): Session cannot be started"
**原因**: 出力バッファリング前にスペースが出力
**解決**: <?php タグ前の空白を削除
**学習**: PHPファイルの最初と最後の空白に注意

PATTERNS.md - 再利用可能なパターン

# コーディングパターン

## フォームバリデーション
### 必須項目チェック
```php
protected function validate_required($value, $field_name) {
    if (empty($value)) {
        $this->errors[$field_name] = $this->_err_message('REQUIRED');
        return false;
    }
    return true;
}

段階的テストの徹底

段階的テストによる品質保証

## 段階的テストによる品質保証

### タスクの適切な分割

大きな機能を小さな検証可能な単位に分割することで、問題の早期発見が可能になります。

```markdown
# Task 2.1: 日付選択機能
## Task 2.1.1: 基本カレンダー表示
- [ ] jQuery UI Datepicker統合
- [ ] 日本語表示設定
- [ ] 基本動作確認

## Task 2.1.2: 曜日制限機能
- [ ] 設定ファイル作成
- [ ] beforeShowDay実装
- [ ] 月・水曜日の無効化確認

## Task 2.1.3: 除外日設定
- [ ] 夏季休暇期間の設定
- [ ] 年末年始の設定
- [ ] 除外日の表示確認

各フェーズの完了条件

## Phase完了チェックリスト

### 機能実装
- [ ] 設計書通りの実装完了
- [ ] コードレビュー実施
- [ ] コーディング規約準拠

### 動作確認
- [ ] 単体テスト作成・実行
- [ ] 統合テスト実施
- [ ] エッジケーステスト

### ドキュメント更新
- [ ] CHANGELOG.md更新
- [ ] エラーがあればERRORLOG.md記録
- [ ] 新パターンをPATTERNS.mdに追加

### 品質確認
- [ ] エラーハンドリング確認
- [ ] パフォーマンス測定
- [ ] セキュリティチェック

実践的なデバッグ手法

1. 構造化ログの活用（ライブラリ不要）

// シンプルな構造化ログ
function log_debug($operation, $message, $context = []) {
    $log_data = [
        'timestamp' => date('c'),
        'operation' => $operation,
        'message' => $message,
        'context' => $context,
        'backtrace' => debug_backtrace(DEBUG_BACKTRACE_IGNORE_ARGS, 2)[1]
    ];
    
    error_log(json_encode($log_data, JSON_UNESCAPED_UNICODE));
}

// 使用例
log_debug('date_validation', '日付バリデーション実行', [
    'date' => '2024-09-24',
    'weekday' => 2,
    'result' => 'blocked'
]);

2. エラー情報の詳細化

class ESTFM_Debug {
    public static function detailed_error($error_code, $context = []) {
        $error_info = [
            'code' => $error_code,
            'message' => self::get_error_message($error_code),
            'file' => __FILE__,
            'line' => __LINE__,
            'context' => $context,
            'suggestion' => self::get_suggestion($error_code),
            'timestamp' => date('c')
        ];
        
        // ERRORLOG.mdに追記する形式で出力
        $markdown = sprintf(
            "n## %sn### エラー: %sn**詳細**: %sn**提案**: %sn",
            $error_info['timestamp'],
            $error_info['code'],
            json_encode($context, JSON_UNESCAPED_UNICODE),
            $error_info['suggestion']
        );
        
        file_put_contents('logs/ERRORLOG.md', $markdown, FILE_APPEND);
        
        return $error_info;
    }
}

3. テスト駆動開発の実践

// tests/test_calendar.php
class TestCalendar extends PHPUnitFrameworkTestCase {
    
    public function test_weekday_restriction() {
        $controller = new ESTFM_Calendar_Controller();
        
        // 月曜日（1）は選択不可
        $result = $controller->validate_date('2024-09-23', [
            'disabled_weekdays' => [1, 3]
        ]);
        $this->assertFalse($result, '月曜日は選択不可であるべき');
        
        // 火曜日（2）は選択可能
        $result = $controller->validate_date('2024-09-24', [
            'disabled_weekdays' => [1, 3]
        ]);
        $this->assertTrue($result, '火曜日は選択可能であるべき');
    }
}

デバッグ環境整備の期待効果

Before（環境整備前）

問題発生 → 原因不明 → 試行錯誤 → 時間浪費 → 同じ問題を繰り返す

After（環境整備後）

問題発生 → 詳細ログ確認 → ERRORLOG.md参照 → 解決パターン適用 → 迅速解決

AIコーディングへの効果

1. 文脈の継続性: CHANGELOGによりAIが開発経緯を理解
2. 問題解決の効率化: ERRORLOGから過去の解決策を提案
3. 品質向上: PATTERNSによる一貫性のあるコード生成
4. 学習の蓄積: プロジェクト固有の知識が資産化

まとめ

デバッグ環境の整備は、単なるエラー対策ではありません。開発プロセス全体の可視化と知識の蓄積により、AIとの協働を最適化する仕組みです。

重要なのは：

• 継続的な記録（CHANGELOG, ERRORLOG, PATTERNS）
• 段階的なテストによる早期問題発見
• AIが理解できる構造化された情報
• 再利用可能なパターンの文書化

これらは特別なツールを必要とせず、どんなプロジェクトでも今すぐ始められる実践的な手法です。

---

Vibe Codingのワークフロー 準備編2.2 - Vibe Logger を活用したAI駆動開発のデバッグ環境整備 -

Claude CodeやGitHub Copilotなどを活用したAI駆動開発において、最も深刻な問題は「エラーが発生しました」という曖昧なメッセージで開発が停滞することです。❌ 従来の問題点：- 非構造化ログでAIが問題を理解できない- 最終段階まで実行ファ...  続きを読む