Claude Code ではじめてのバイブコーディング

このスクラップについて
このスクラップでは Claude Code を使ってはじめてバイブコーディングする試行錯誤の過程を記録していく。

作成するテーマ
前々から作成したいと考えていたライフプランニングの API を作成してみよう。

プロジェクトのセットアップ
最初の基本的なセットアップは手動でやった方が良さそうな気がするので行っていこう。

ディレクトリ
ワークツリーを作成することを考えたら 2 階層にした方が良いかも。
cd ~/workspace
mkdir life-planning
cd life-planning
pnpm create hono@latest life-planning -it cloudflare-workers -p pnpm
mv life-planning main
cd main

Biome セットアップ
pnpm add --save-dev --save-exact @biomejs/biome
{
"scripts": {
"lint": "biome check --write"
}
}

Vitest セットアップ
pnpm add -D vitest
{
"scripts": {
"test": "vitest run"
}
}

最初のコミット
git init
git add .
git commit -m "最初のコミット"

CLAUDE.md の作成
claude
/init
CLAUDE.md を日本語に翻訳してください。
# Git コミットメッセージは日本語で書いてください。
コピペすると CLAUDE.md に反映されないので注意が必要。
わかりやすいメッセージを添えて変更をコミットしてください。

Git ワークツリーを使ってみる
エンドポイントの分析ドキュメントを作成するタスクを実行したいと考えています。
現在のディレクトリと同じ階層に適切なブランチ名で Git ワークツリーを作成してください。
下記のコマンドを実行してくれた。
git worktree add \
/Users/susukida/workspace/life-planning/endpoint-analysis-docs -b \
endpoint-analysis-docs

ファイルを追加変更したら必ずコミットしてもらう
# ファイルの追加や変更を行ったら、わかりやすいメッセージを添えてコミットしてください。

分析してもらう
ライフプランニングのシミュレーションを実行する API エンドポイントを作成したいと考えています。
- このエンドポイントは内部の状態を変更することはありません。
- このエンドポイントはバージョンが変わる可能性があります。
- このエンドポイントはライフプランニングの前提条件について構造的な入力を受け付ける必要があります。
- このエンドポイントはライフプランニングの結果として 1 年ごとの様々な予測値を出力します。
このエンドポイントの HTTP メソッドやパスネーム、クエリ、リクエストボディ、レスポンスなどを考えて、Markdown ファイルにまとめて docs/analysis ディレクトリ内に適切なファイル名で保存してください。
設計までしてくれたが、ちょっと詳細すぎる。
もっとシンプルに始めたいのでプロンプトを工夫しよう。
また、コミットもしてくれなかったので CLAUDE.md を見直そう。

もう一度チャレンジ
ライフプランニングのシミュレーションを実行する API エンドポイントを作成したいと考えています。
- このエンドポイントは内部の状態を変更することはありません。
- このエンドポイントはバージョンが変わる可能性があります。
- このエンドポイントはライフプランニングの前提条件について構造的な入力を受け付ける必要があります。
- このエンドポイントはライフプランニングの結果として 1 年ごとの様々な予測値を出力します。
下記について考えてください。
- HTTP メソッドは何にするべきか?
- パスネームはどうするべきか?
⏺ HTTPメソッド: POST
- 構造的な入力を受け付けるため、リクエストボディが必要
- シミュレーション実行という処理を表現するのに適している
パスネーム: /api/v1/life-planning/simulation
- /api - API エンドポイントであることを明示
- /v1 - バージョニング対応
- /life-planning/simulation - リソースと処理内容を明確に表現

CLAUDE.md の見直し
diff --git a/CLAUDE.md b/CLAUDE.md
index 8515443..f925824 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -49,6 +49,5 @@
- 生成された`CloudflareBindings`型を使用: `new Hono<{ Bindings: CloudflareBindings }>()`
## コミットガイドライン
-
- Git コミットメッセージは日本語で書いてください。
-- ファイルの追加や変更を行ったら、わかりやすいメッセージを添えてコミットしてく
ださい。
+- タスク完了後、ファイルの追加や変更を行った場合はわかりやすいメッセージを添え
てコミットしてください。

ブランチを削除してもらう
endpoint-analysis-docs ブランチを削除してください。
試行錯誤の結果、ワークツリーとブランチを削除してくれた。

そろそろ承認が面倒になってきた
ケース次第では自動運転モードに切り替えたいがどうしようか。
Claude Code で承認不要でタスクを進めてもらうにはどうすれば良いでしょうか?
⏺ Claude Code では、設定ファイル(settings.json)で権限を事前に設定すること
で、特定のタスクについて承認を不要にできます:
{
"permissions": {
"defaultMode": "allowEdits",
"allow": [
"Bash(*)",
"Edit(*)",
"Write(*)"
]
}
}
また、claude --resume を使用して前の会話を再開すると、以前の実行文脈を維
持したまま作業を続行できます。
完全な自動実行モードは現在提供されていませんが、上記の権限設定により多く
のタスクを事前承認できます。
そちらの内容で ~/.claude/settings.json に作成してもらえますか?
{
"permissions": {
"defaultMode": "allowEdits",
"allow": [
"Bash(*)",
"Edit(*)",
"Write(*)",
"Read(*)",
"Glob(*)",
"Grep(*)",
"LS(*)",
"MultiEdit(*)",
"TodoWrite(*)",
"TodoRead(*)"
]
}
}
なんか怖いがこれで良いか?
やっぱり削除しておこう。

良い記事を発見

Shift + Tab で自動承認モードになるようだ
ドキュメントのどこに書いているのだろう

GitHub リポジトリの作成
gh repo create --public life-planning
git remote add origin git@github.com:tatsuyasusukida/life-planning
git push --set-upstream origin main
gh repo view --web

イシューの作成
Write with Copilot を使ったら対話的に作成できたのですごく便利だ、素晴らしい。

ワークツリーの作成
git worktree add ../feature-1 -b feature/#1

Claude Code でイシュー対応できる?
Claude Code で GitHub の issue を指定して対応をお願いすることはできますか?
⏺ はい、Claude Code では GitHub issue を指定して対応できます。
MCP(Model Context Protocol)を使用:
@github:issue://123 を分析して修正案を提案してください
gh CLI を使用:
gh issue view 123 の内容を確認して対応してください
直接的な依頼:
GitHub issue #123 の内容を確認して実装してください
Claude Code は自動的に issue
の内容を取得し、コードベースを分析して適切な実装や修正を提案します。MCP
を使用すると、issue
の詳細が自動的にコンテキストとして含まれるため便利です。

install-github-app
なんと GitHub 上でも Claude Code を使えるようだ、ぜひ使ってみよう。
/install-github-app
API Key が必要なのかな?
月額 10 ドルの Claude Pro プランを使用していますが、Claude Code GitHub Actions を使用することはできますか?その場合は従量課金になりますか?
従量課金になるとのことだ。
Maxプランでの自動化/ヘッドレス利用を明示的に禁止するものはない 個人プロジェクト・適度な規模なら問題なし
現状では Pro / Max プランで GitHub Actions を使うのは頑張る必要があるようだが、近いうちに公式でサポートされるそうな感じもあるのでその時まで楽しみに待っていよう。
ただ、こちらのわかりやすい記事を見てみるとやってみたい気持ちも湧いてくる。

プルリク対応を依頼
https://github.com/tatsuyasusukida/life-planning/issues/1 の内容を確認して対応してください
curl -X POST http://localhost:8787/api/v1/life-planning/simulation \
-H "Content-Type: application/json" \
-d '{
"birthDate": "1987-08-27",
"startYear": 2020,
"endYear": 2025
}'
なかなか良いものができた気がする。

色々と細かい調整をお願いする
https://hono.dev/examples/zod-openapi を参考にして Zod でバリデーションを行うようにしてください。
https://hono.dev/examples/swagger-ui を参考にして Swagger UI を統合してください。

プルリクの作成をお願いした
https://github.com/tatsuyasusukida/life-planning/pull/2

Claude タスク実行中にイシュー登録
Copilot のチャットが便利だが、Cursor とかでも上手にやればもっと良い内容のイシューが登録できるのだろうか。

レビュー
Claude Code でも Copilot でもレビューができる。
Claude Code のレビューは日本語でもできるので助かる。
指摘があった場合にはコピペして対応してもらう。

イシューを登録してもらう
これまで Claude Code がタスク実行中に GitHub にイシューを登録していたが、メンターさんより「GitHub のイシューも Claude Code に登録してもらえるよ」と教えてもらった。
後からどんなものか試してみたいが、もし予想以上に優れている場合は人間の存在価値はなんなのだろうかという気になってしまう。