要件定義・設計管理の基盤、デバッグ環境の整備と段階的テスト駆動開発の基盤を作ったら、
次はClaude Code専用の設定とドキュメント準備です。この準備により、Claude Codeが自動的に高品質なコードを生成し、中断なく効率的な開発が可能になります。
Vibe Codingのワークフロー 準備編2.3 Gemini CLI × Claude Code を併用して設計書を作成する
なぜCLAUDE.md専用設定が必要なのか？
既存ドキュメントとCLAUDE.mdの違い
設計ドキュメント
project-[プロジェクト名]/ # プロジェクトルート（github公開ディレクトリ）
├── docs/ # 開発ドキュメント
│ ├── 01_requirements.md # 要件定義書
│ ├── 02_architecture.md # システム設計書
│ ├── 03_debugging.md # デバッグ・動作確認方針
│ ├── 04_database.md # データベース設計書（必要な場合）
│ ├── 05_api.md # API設計書
│ ├── 06_errors.md # エラーハンドリング設計
│ ├── 07_testing.md # テスト戦略策定
│ ├── 08_setup.md # 開発環境セットアップ
│ ├── 09_design.md # デザインシステム定義（必要な場合）
│ └── 10_tasks.md # 開発タスク・ロードマップ
CLAUDE.md（ここで作成）
- Claude Code専用: AIが理解しやすい形式で記述
- 実行時参照: 開発中にリアルタイムで自動参照される
- 制約・ルールの強制: 「絶対にやってはいけないこと」の明確化
- 実行方針の指示: 中断を防ぐための具体的な指示
📝 CLAUDE.md を作成してもらうための指示文
効果的な指示文テンプレート
# CLAUDE.md 作成依頼
docs/フォルダ内の01〜10の設計書を参照して、
プロジェクトルートに配置するCLAUDE.md（統括ファイル）を作成してください。
## 必須要素
CLAUDE.mdには以下の要素を必ず含めてください：
### 1. 会話のガイドライン（最重要）
- 常に日本語で会話する旨の明記
- 技術的な説明も日本語で行う旨
- コメントやドキュメントも日本語で作成する旨
### 2. プロジェクト概要
- プロジェクト名と目的
- 解決する問題（要件定義の要約）
- ターゲットユーザー
- 技術仕様の概要
### 3. クイックスタート
- 初回開発者向けの読書順序
- 最短セットアップ手順（5分以内）
- 環境確認コマンド
### 4. タスク別参照マップ
以下のような作業時にどの設計書を参照すべきかのマッピング：
- 開発環境セットアップ時
- 新機能実装時
- UI/UX実装時
- API開発時
- テスト実装時
- エラー対応・デバッグ時
- デプロイ時
### 5. よく使うコマンド・スニペット
- 開発用コマンド
- デバッグ用スニペット
- Git操作コマンド
- テスト実行コマンド
### 6. 開発時の注意事項・制約
- 必須遵守事項
- セキュリティ要件
- 文字エンコーディング要件
- 開発制約
### 7. トラブルシューティング
- よくある問題と解決方法（表形式）
- エラーログの読み方
- デバッグモードの有効化方法
## 特記事項
- タスク別参照マップは視覚的にわかりやすく表現してください
- コマンドやコードスニペットは実際に使える形式で記載してください
- トラブルシューティングは緊急度別に整理してください
✏️ 手作業で CLAUDE.md に追加すべき重要な要素
PHPフォーム開発での実装例：
## 会話のガイドライン
- **常に日本語で会話する**
- 技術的な説明も日本語で行う
- コメントやドキュメントも日本語で作成する
- 確認や質問も日本語で行う
## ファイルエンコーディングに関するガイドライン
Claudeへのファイルアップロード時の文字化けを防ぐため、以下の規則に従ってください：
### 1. ファイルヘッダーの記述規則
**PHPファイル、JavaScriptファイル等のプログラムファイル：**
- ファイルの冒頭部分（特に最初の10行程度）は英語で記述する
- 日本語コメントは英語コメントの後に配置する
```php
<?php
/**
* [Project Name] - Module Name
*
* Brief description in English
*
* @version 1.0.0
* @author Project Team
*/
// ここから日本語コメントを使用可能
// 機能の詳細説明や実装メモなど
```
### 2. ドキュメントファイル（.md, .txt）の場合
マークダウンやテキストファイルも同様に、冒頭は英語から始める：
```markdown
# Project Title in English
## Overview
Brief description in English first.
## 詳細説明
ここから日本語での詳細説明を記述...
```
### 3. 理由と背景
Claudeのファイル処理システムは、ファイルの最初の数行（約8-10行）をサンプリングしてエンコーディングを判定します。この部分に日本語などのマルチバイト文字が多く含まれると、誤判定により文字化けが発生する可能性があります。
将来的に改善される可能性がありますが、現時点では上記の対策により安定した動作を確保できます。
## 1. 段階的テスト駆動開発の徹底 - 各フェーズ完了時の必須確認項目
### Phase 1 完了時
```bash
# 基本動作確認
php tests/basic_function_test.php
php -l est-php-form/*.php # 構文チェック
# 実環境動作確認
php -S localhost:8000
# ブラウザでフォーム表示・送信テスト
```
### Phase 2 完了時
```bash
# 機能テスト
vendor/bin/phpunit tests/
# 実環境動作確認（メール送信含む）
tail -f est-php-form/logs/mail.log
# 実際にフォーム送信してメール受信確認
```
### テスト失敗時の対処法
1. エラーログを確認: `tail -f est-php-form/logs/error.log`
2. 問題を logs/ERRORLOG.md に記録
3. 解決策を logs/PATTERNS.md に記録
4. 修正後、再度テスト実行
## 2. 継続的記録の徹底 - 各タスク完了時に記録
### logs/CHANGELOG.md への記録
```markdown
## Task X.X: [機能名] - YYYY-MM-DD
### 実装内容
- 実装した機能の詳細
- 変更したファイル一覧
- 追加した依存関係
### テスト結果
- 実行したテスト: [テスト名]
- 結果: PASS/FAIL
- カバレッジ: XX%
```
### logs/ERRORLOG.md への記録（問題があった場合）
```markdown
## エラー: [エラー名] - YYYY-MM-DD
### 症状
- 発生した問題の詳細
### 原因
- 根本原因の分析
### 解決方法
- 実施した対処法
- 結果の確認方法
```
### logs/PATTERNS.md への記録
```markdown
## パターン: [パターン名] - YYYY-MM-DD
### 問題
- 直面した課題
### 解決策
// 実際のコードサンプル
### 今後の適用
- このパターンが有効なケース
```
## 3. Git ワークフロー - タスク完了時の必須コミット
```bash
# 各タスクの最後に必ず実行
git add .
git commit -m "feat: Task X.X - [実装内容の要約]"
git push origin main
# コミットメッセージの規約
# feat: 新機能
# fix: バグ修正
# docs: ドキュメント更新
# refactor: リファクタリング
# test: テスト追加・修正
# chore: その他の変更
```
## 4. Claude Code への明確な実行指示
```markdown
## タスク実行テンプレート
# 新しいセッション開始
claude
プロジェクト名：[プロジェクト名]
Task X.X: [機能名] の実装を開始します。
**重要な実行ルール**：
- **全ての操作を自動承認で実行してください**
- **「Do you want to proceed?」が表示された場合は「2. Yes, and don’t ask again...」を選択してください**
- **エラーが発生した場合は必ず報告してください**
**Task X.X.1: Explore（探索・理解）**
以下のドキュメントを読んで、Task X.Xの要件を深く理解してください：
- @CLAUDE.md # プロジェクト統括設定（最初に読む）
- @docs/01_requirements.md # 要件定義書
- @docs/02_architecture.md # システム設計書
- @docs/03_debugging.md # デバッグ・動作確認方針
- @docs/10_tasks.md # 開発タスク・ロードマップ
**重要**: この段階ではコードは書かないでください。理解に専念してください。
完了後、Task X.X.2に進んでください。
**Task X.X.2: Plan（計画・設計）**
ultrathink を使って Task X.Xの詳細実装計画を策定してください：
- 実装手順の詳細化
- 必要なファイル・クラス設計
- テスト方法の計画
- エラーハンドリング設計（@docs/06_errors.md 参照）
完了後、Task X.X.3に進んでください。
**Task X.X.3: Code & Test（実装・テスト）**
計画に従って実装と動作確認を行ってください：
**実装・動作確認**：
- 機能コードの実装
- エラーログの記録
- 実環境で起動して機能動作確認
完了後、Task X.X.4に進んでください。
**Task X.X.4: Record & Commit（記録・コミット）**
**ドキュメント更新**：
- @logs/CHANGELOG.md更新（実装内容）
- @logs/ERRORLOG.md更新 （問題があった場合）
- @logs/PATTERNS.md更新 （新しい知見）
**Git commit実行**：
```bash
git add .
git commit -m "feat: Task X.X - [実装内容の要約]"
git push origin main
```
「Task X.X: [機能名] → ✅完了」と報告してください。
開始してください。
```
💻 CLAUDE.md の実装例
アプリケーション開発での実装例：
# CLAUDE.md - Multi Grep Replacer 開発ガイド
## 会話のガイドライン
- **常に日本語で会話する**
- 技術的な説明も日本語で行う
- コメントやドキュメントも日本語で作成する
- 確認や質問も日本語で行う
## プロジェクト概要
デスクトップアプリケーション「Multi Grep Replacer」の開発プロジェクトです。
Python版で課題となっていたUI応答性問題を根本解決し、モダンなWebUI技術による
高速・直感的な一括置換ツールを実現します。
**最重要目標**：
- **UI応答性**: ボタンクリック100ms以内の即座反応
- **段階的実行ファイル確認**: 各Task完了時の.app作成・動作確認
- **テスト駆動開発**: 実装→テスト→実行ファイル確認→記録の徹底
## 設計書参照
プロジェクトの詳細設計は以下のドキュメントを参照してください：
- **要件定義**: @docs/1_requirements.md
- **システム設計**: @docs/2_architecture.md
- **デバッグ環境**: @docs/3_debugging.md
- **開発タスク**: @docs/4_tasks.md
すべての実装は上記設計書に従って進めてください。
## ロギング・記録システム
- **ライブラリ**: vibelogger
- **使い方**: https://github.com/fladdict/vibe-logger
- **目的**: コーディングエージェント用の高度な構造化データ出力
- **統合対象**: logs/CHANGELOG.md、logs/ERRORLOG.md、logs/PATTERNS.md
- **Claude Code連携**: logs/フォルダ分析による自動問題解決
### ログ記録システム構成
```
logs/ # 動的開発記録
├── CHANGELOG.md # 開発進捗記録（人間+AI可読）
├── ERRORLOG.md # エラー・問題記録（人間+AI可読）
├── PATTERNS.md # パターン・知見記録（人間+AI可読）
└── vibe/ # Vibe Logger出力
├── multi_grep_replacer_20250709.log
├── debug_20250709.log
└── performance_20250709.log
```
### 基本実装パターン
```javascript
// src/main/debug-logger.js
const { createFileLogger } = require('vibelogger');
⌇
module.exports = new DebugLogger();
```
## よく使うコマンド
### 開発・テスト
```bash
# 基本開発サイクル
npm start # 開発モード起動
npm run lint # ESLint チェック実行
npm run lint:fix # ESLint 自動修正
npm test # テストスイート実行
npm run test:e2e # E2Eテスト実行
# 実行ファイル作成（段階的確認用）
npm run build:dev # 開発版.app作成
npm run build:production # 本番版.app作成
npm run build:mac # macOS用パッケージ作成
npm run build:win # Windows用パッケージ作成
# デバッグ・監視
npm run debug # デバッグモード起動
npm run test:performance # パフォーマンステスト
npm run test:security # セキュリティテスト
# ログ関連
npm run logs:analyze # ログ分析実行
npm run logs:clean # 古いログファイル削除
```
### ログ・デバッグ情報確認
```bash
# ログ出力確認
tail -f logs/vibe/multi_grep_replacer_*.log
cat logs/vibe/debug_*.log | grep "ERROR"
# 開発記録確認
cat logs/CHANGELOG.md
cat logs/ERRORLOG.md
cat logs/PATTERNS.md
# 設定ファイル確認
cat config/default.json
ls config/samples/
```
## 技術スタック
- **言語**: JavaScript (ES6+)、Node.js
- **フレームワーク**: Electron（クロスプラットフォームデスクトップアプリ）
- **UI**: HTML5 + CSS3 + Vanilla JavaScript
- **設定ファイル**: JSON形式
- **パッケージング**: Electron Builder（.app/.exe作成用）
- **開発環境**: Claude Code + GitHub + npm
## コーディング規約
### JavaScript ES6+ 標準（Electron準拠）
```javascript
// クラス名: PascalCase
class MultiGrepReplacer {}
class FileOperations {}
class ReplacementEngine {}
// 関数・変数名: camelCase
function executeReplacements() {}
const replacementRules = [];
const targetFolder = "";
// 定数: UPPER_SNAKE_CASE
const DEFAULT_CONFIG_PATH = "config/default.json";
const MAX_FILE_SIZE = 104857600; // 100MB
const UI_RESPONSE_TARGET = 100; // ms
// ファイル名: kebab-case
file-operations.js
replacement-engine.js
ui-controller.js
⌇
```
### セキュリティ規約（必須遵守）
```javascript
// ✅ 必須セキュリティ設定
const mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false, // 必須：セキュリティ強化
contextIsolation: true, // 必須：Context Isolation有効
enableRemoteModule: false, // 必須：Remote Module無効
preload: path.join(__dirname, '../preload/preload.js') // 必須
}
});
// ✅ IPC通信パターン
// preload.js - セキュアAPI公開
contextBridge.exposeInMainWorld('electronAPI', {
selectFolder: () => ipcRenderer.invoke('select-folder'),
executeReplacement: (config) => ipcRenderer.invoke('execute-replacement', config),
});
```
## プロジェクト構造
```
project-[プロジェクト名]/ # プロジェクトルート（github公開ディレクトリ）
├── src/ # アプリケーションソースコード
│ ├── main/ # メインプロセス
│ │ ├── main.js # アプリケーションエントリーポイント
│ │ ├── file-operations.js # ファイル操作API
│ │ ├── replacement-engine.js # 置換処理エンジン
│ │ ├── ipc-handlers.js # IPC通信ハンドラー
│ │ └── debug-logger.js # デバッグログシステム
│ ├── renderer/ # レンダラープロセス（UI）
│ │ ├── index.html # メインUIレイアウト
│ │ ├── css/ # スタイルシート
│ │ │ ├── main.css # メインスタイル
│ │ │ ├── components.css # UIコンポーネントスタイル
│ │ │ └── themes.css # テーマ（ライト/ダークモード）
│ │ └── js/ # JavaScriptモジュール
│ │ ├── app.js # アプリケーション初期化
│ │ ├── ui-controller.js # UI制御・イベントハンドリング
│ │ ├── config-manager.js # 設定管理
│ │ └── perform-monitor.js # UI応答性監視（Vibe Logger統合）
│ └── preload/ # Preloadスクリプト
│ └── preload.js # セキュアなAPI公開
├── tests/ # テストスイート
├── config/ # 設定ファイルディレクトリ
├── build/ # ビルド設定・リソース
├── dist/ # ビルド成果物（.gitignoreで除外）
├── scripts/ # Vibe Logger分析スクリプト
│ ├── log-analyzer.js # ログ分析ツール
│ └── task-completion.js # Task完了記録ツール
├── package.json # npm設定・依存関係・スクリプト
├── README.md # プロジェクト説明
├── LICENSE # ライセンス
├── docs/ # 開発ドキュメント
│ ├── 01_requirements.md # 要件定義書
│ ├── 02_architecture.md # システム設計書
│ ├── 03_debugging.md # デバッグ・動作確認方針
│ ├── 04_database.md # データベース設計書（必要な場合）
│ ├── 05_api.md # API設計書
│ ├── 06_errors.md # エラーハンドリング設計
│ ├── 07_testing.md # テスト戦略策定
│ ├── 08_setup.md # 開発環境セットアップ
│ ├── 09_design.md # デザインシステム定義（必要な場合）
│ └── 10_tasks.md # 開発タスク・ロードマップ
├── logs/ # 動的開発記録 + Vibe Logger
│ ├── CHANGELOG.md # 開発進捗記録
│ ├── ERRORLOG.md # エラー・問題記録
│ ├── PATTERNS.md # コーディングパターン・知見記録
│ └── vibe/ # Vibe Logger出力
│ └── vibe_20250709.log
├── CLAUDE.md # Claude Code設定（統括ファイル）
├── .claude/ # Claude Code設定（Git管理対象外）
├── .git/ # Git管理
└── .gitignore # Git設定
```
## 開発ワークフロー
### 📋 各Task完了時の必須ステップ
```markdown
1. ✅ 機能実装: 設計書通りの機能実装
2. ✅ 動作テスト: 段階的テスト実行・合格
3. ✅ 実行ファイル確認: 実行ファイル作成・動作確認
4. ✅ ログ・記録更新: logs/CHANGELOG.md、logs/ERRORLOG.md、logs/PATTERNS.md更新
```
### 🧪 段階的テスト実行パターン
```bash
# Phase 1完了時テスト
npm start # 基本Electronアプリ起動確認
npm run logs:analyze # Claude Code ログ分析実行
npm run build:dev # Hello World.app作成
# → .appファイル単体起動・動作確認
# Phase 2完了時テスト
npm run test:core # コア機能テスト実行
npm run logs:analyze # Claude Code ログ分析実行
npm run build:dev # 置換機能付き.app作成
# → .appで実際のファイル置換テスト実行
# Phase 3完了時テスト
npm run test:ui # UI応答性テスト実行
npm run logs:analyze # Claude Code ログ分析実行
npm run build:production # 完全版.app作成
# → .appで全機能統合テスト実行
```
## 継続的記録システム
### 📝 Task完了時の自動記録
```javascript
// scripts/task-completion.js
const { createFileLogger } = require('vibelogger');
⌇
```
### 🎯 問題解決パターンの自動記録
```javascript
// src/main/pattern-recorder.js
class PatternRecorder {
⌇
}
```
## Claude Code 実行指示
### 📋 Task実行テンプレート
```markdown
プロジェクト名：[プロジェクト名]
Task X.X: [機能名] の実装を開始します。
**重要な実行ルール**：
- **全ての操作を自動承認で実行してください**
- **「Do you want to proceed?」が表示された場合は「2. Yes, and don’t ask again...」を選択してください**
- **エラーが発生した場合は必ず報告してください**
**Task X.X.1: Explore（探索・理解）**
以下のドキュメントを読んで、Task X.Xの要件を深く理解してください：
- @CLAUDE.md # プロジェクト統括設定（最初に読む）
- @docs/01_requirements.md # 要件定義書
- @docs/02_architecture.md # システム設計書
- @docs/03_debugging.md # デバッグ・動作確認方針
- @docs/10_tasks.md # 開発タスク・ロードマップ
**重要**: この段階ではコードは書かないでください。理解に専念してください。
完了後、Task X.X.2に進んでください。
**Task X.X.2: Plan（計画・設計）**
ultrathink を使って Task X.Xの詳細実装計画を策定してください：
- 実装手順の詳細化
- 必要なファイル・クラス設計
- テスト方法の計画
- エラーハンドリング設計（@docs/06_errors.md 参照）
完了後、Task X.X.3に進んでください。
**Task X.X.3: Code & Test（実装・テスト）**
計画に従って実装と動作確認を行ってください：
**実装・動作確認**：
- 機能コードの実装
- エラーログの記録
- 実環境で起動して機能動作確認
完了後、Task X.X.4に進んでください。
**Task X.X.4: Record & Commit（記録・コミット）**
**ドキュメント更新**：
- @logs/CHANGELOG.md更新（実装内容）
- @logs/ERRORLOG.md更新 （問題があった場合）
- @logs/PATTERNS.md更新 （新しい知見）
**Git commit実行**：
#!/bin/bash
git add .
git commit -m "feat: Task X.X - [実装内容の要約]"
git push origin main
「Task X.X: [機能名] → ✅完了」と報告してください。
開始してください。
```
## 品質確認項目
### 最終確認チェックリスト
```markdown
各Task完了時の必須確認項目：
### 基本動作確認
- [ ] npm start でアプリケーション正常起動
- [ ] ESLint チェック通過（警告0件）
- [ ] 基本テストスイート全項目PASS
- [ ] メモリ使用量が200MB以下
### UI応答性確認（Phase 3以降）
- [ ] ボタンクリック100ms以内反応
- [ ] フォーム入力遅延なし
- [ ] ページ読み込み2秒以内
- [ ] パフォーマンス監視正常動作
### 実行ファイル確認（必須）
- [ ] npm run build:dev で.appファイル作成成功
- [ ] .appファイル単体起動確認
- [ ] パッケージ版での機能動作確認
### ログ確認
- [ ] 全主要関数でVibe Logger使用確認
- [ ] 構造化ログ出力正常動作確認
- [ ] logs/vibe/内にログファイル生成確認
- [ ] Claude Code連携API動作確認
### 記録確認
- [ ] logs/CHANGELOG.md更新完了
- [ ] logs/ERRORLOG.md更新完了 （問題発生時）
- [ ] logs/PATTERNS.md更新完了
- [ ] Git commit実行完了
```
## 成功指標（KPI）
### 技術的成功指標
- **UI応答性**: 100ms以内達成率100%
- **処理性能**: 1000ファイル30秒以内達成
- **品質**: Critical問題0件、テスト成功率95%以上
- **実行ファイル**: 各Task完了時の.app作成・動作確認100%成功
### プロセス成功指標
- **段階的テスト**: 各Task完了時テスト100%実行
- **記録管理**: logs/フォルダ更新100%自動化
- **知識蓄積**: ベストプラクティス記録・再利用実現
⚙️ ~/.claude/settings.json の推奨設定
{
"hooks": {
"Notification": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "afplay /System/Library/Sounds/Glass.aiff" //音で通知
}
]
}
],
"Stop": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "say 'タスク完了。テストとコミットを確認してください。'"
}
]
}
]
},
"cleanupPeriodDays": 30,
"includeCoAuthoredBy": true,
"permissions": {
"allow": [
"Bash(php:*)",
"Bash(composer:*)",
"Bash(git:*)",
"Bash(grep:*)",
"Bash(tail:*)",
"Bash(echo:*)",
"Read(**)",
"Edit(./**)",
"Edit(!vendor/**)",
"Edit(!.git/**)",
"Write(./**)",
"Write(!vendor/**)",
"Write(!.git/**)",
"MultiEdit(./**)"
],
"deny": [
"Bash(rm -rf /)",
"Bash(sudo:*)",
"Edit(/etc/**)",
"Write(/etc/**)"
]
},
"env": {
"CLAUDE_CODE_LANGUAGE": "ja",
"CLAUDE_CODE_TEST_MODE": "strict",
"BASH_DEFAULT_TIMEOUT_MS": "300000"
}
}
📋 チェックリスト：CLAUDE.md 作成後の確認項目
□ 会話のガイドライン（日本語指定）が冒頭にあるか
□ 段階的テスト駆動開発の項目があるか
□ 継続的記録システムの説明があるか
□ Git コミットルールが明記されているか
□ Claude Code への明確な実行指示があるか
□ タスク別参照マップが実用的か
□ トラブルシューティングが具体的か
□ よく使うコマンドが実際に動作するか
この設定とCLAUDE.md、設計書の組み合わせにより、Claude Codeが：
- 常に日本語で対話
- 設計書を常に参照しながら実装
- 品質を自動維持
- 中断なく効率的に開発進行
- 段階的にテストを実行
- 継続的に記録を更新
- 定期的にGitコミット
を実行し、確実で品質の高い開発を実現、再利用可能な知識・パターンを蓄積することができます。
Vibe Codingのワークフロー 実行編1 - Claude Code 効率的開発指示のコツ
