Open30

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

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

このスクラップについて

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

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

プロジェクトのセットアップ

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

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

ディレクトリ

ワークツリーを作成することを考えたら 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
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

Biome セットアップ

コマンド
pnpm add --save-dev --save-exact @biomejs/biome
package.json(追加分)
{
	"scripts": {
		"lint": "biome check --write"
	}
}
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

CLAUDE.md の作成

コマンド
claude
claude
/init
claude
CLAUDE.md を日本語に翻訳してください。
claude
# Git コミットメッセージは日本語で書いてください。

コピペすると CLAUDE.md に反映されないので注意が必要。

claude
わかりやすいメッセージを添えて変更をコミットしてください。
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

Git ワークツリーを使ってみる

claude
エンドポイントの分析ドキュメントを作成するタスクを実行したいと考えています。
現在のディレクトリと同じ階層に適切なブランチ名で Git ワークツリーを作成してください。

下記のコマンドを実行してくれた。

コマンド
git worktree add \
      /Users/susukida/workspace/life-planning/endpoint-analysis-docs -b \
      endpoint-analysis-docs
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

ファイルを追加変更したら必ずコミットしてもらう

# ファイルの追加や変更を行ったら、わかりやすいメッセージを添えてコミットしてください。
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

分析してもらう

ライフプランニングのシミュレーションを実行する API エンドポイントを作成したいと考えています。

- このエンドポイントは内部の状態を変更することはありません。
- このエンドポイントはバージョンが変わる可能性があります。
- このエンドポイントはライフプランニングの前提条件について構造的な入力を受け付ける必要があります。
- このエンドポイントはライフプランニングの結果として 1 年ごとの様々な予測値を出力します。

このエンドポイントの HTTP メソッドやパスネーム、クエリ、リクエストボディ、レスポンスなどを考えて、Markdown ファイルにまとめて docs/analysis ディレクトリ内に適切なファイル名で保存してください。

設計までしてくれたが、ちょっと詳細すぎる。

もっとシンプルに始めたいのでプロンプトを工夫しよう。

また、コミットもしてくれなかったので CLAUDE.md を見直そう。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

もう一度チャレンジ

ライフプランニングのシミュレーションを実行する API エンドポイントを作成したいと考えています。

- このエンドポイントは内部の状態を変更することはありません。
- このエンドポイントはバージョンが変わる可能性があります。
- このエンドポイントはライフプランニングの前提条件について構造的な入力を受け付ける必要があります。
- このエンドポイントはライフプランニングの結果として 1 年ごとの様々な予測値を出力します。

下記について考えてください。

- HTTP メソッドは何にするべきか?
- パスネームはどうするべきか?
回答
⏺ HTTPメソッド: POST
  - 構造的な入力を受け付けるため、リクエストボディが必要
  - シミュレーション実行という処理を表現するのに適している

  パスネーム: /api/v1/life-planning/simulation
  - /api - API エンドポイントであることを明示
  - /v1 - バージョニング対応
  - /life-planning/simulation - リソースと処理内容を明確に表現
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

CLAUDE.md の見直し

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 コミットメッセージは日本語で書いてください。
-- ファイルの追加や変更を行ったら、わかりやすいメッセージを添えてコミットしてく
ださい。
+- タスク完了後、ファイルの追加や変更を行った場合はわかりやすいメッセージを添え
てコミットしてください。
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

ブランチを削除してもらう

プロンプト
endpoint-analysis-docs ブランチを削除してください。

試行錯誤の結果、ワークツリーとブランチを削除してくれた。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

そろそろ承認が面倒になってきた

ケース次第では自動運転モードに切り替えたいがどうしようか。

プロンプト
Claude Code で承認不要でタスクを進めてもらうにはどうすれば良いでしょうか?
回答
⏺ Claude Code では、設定ファイル(settings.json)で権限を事前に設定すること
  で、特定のタスクについて承認を不要にできます:

  {
    "permissions": {
      "defaultMode": "allowEdits",
      "allow": [
        "Bash(*)",
        "Edit(*)",
        "Write(*)"
      ]
    }
  }

  また、claude --resume を使用して前の会話を再開すると、以前の実行文脈を維
  持したまま作業を続行できます。

  完全な自動実行モードは現在提供されていませんが、上記の権限設定により多く
  のタスクを事前承認できます。

https://docs.anthropic.com/ja/docs/claude-code/settings

プロンプト
そちらの内容で ~/.claude/settings.json に作成してもらえますか?
~/.claude/settings.json
{
  "permissions": {
    "defaultMode": "allowEdits",
    "allow": [
      "Bash(*)",
      "Edit(*)",
      "Write(*)",
      "Read(*)",
      "Glob(*)",
      "Grep(*)",
      "LS(*)",
      "MultiEdit(*)",
      "TodoWrite(*)",
      "TodoRead(*)"
    ]
  }
}

なんか怖いがこれで良いか?

やっぱり削除しておこう。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

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
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

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
  の詳細が自動的にコンテキストとして含まれるため便利です。
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

install-github-app

https://docs.anthropic.com/ja/docs/claude-code/github-actions

https://azukiazusa.dev/blog/claude-code-action-github-integration/

なんと GitHub 上でも Claude Code を使えるようだ、ぜひ使ってみよう。

claude
/install-github-app

API Key が必要なのかな?

質問
月額 10 ドルの Claude Pro プランを使用していますが、Claude Code GitHub Actions を使用することはできますか?その場合は従量課金になりますか?

従量課金になるとのことだ。

https://zenn.dev/aokkey/articles/7dca9b62cca467

Maxプランでの自動化/ヘッドレス利用を明示的に禁止するものはない 個人プロジェクト・適度な規模なら問題なし

https://zenn.dev/aokkey/articles/7dca9b62cca467

現状では Pro / Max プランで GitHub Actions を使うのは頑張る必要があるようだが、近いうちに公式でサポートされるそうな感じもあるのでその時まで楽しみに待っていよう。

ただ、こちらのわかりやすい記事を見てみるとやってみたい気持ちも湧いてくる。

https://note.com/akira_papa_ai/n/n0e158a650c4a

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

プルリク対応を依頼

プロンプト
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
    }'

なかなか良いものができた気がする。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

色々と細かい調整をお願いする

https://hono.dev/examples/zod-openapi を参考にして Zod でバリデーションを行うようにしてください。
https://hono.dev/examples/swagger-ui を参考にして Swagger UI を統合してください。
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

レビュー

Claude Code でも Copilot でもレビューができる。

Claude Code のレビューは日本語でもできるので助かる。

指摘があった場合にはコピペして対応してもらう。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

イシューを登録してもらう

これまで Claude Code がタスク実行中に GitHub にイシューを登録していたが、メンターさんより「GitHub のイシューも Claude Code に登録してもらえるよ」と教えてもらった。

後からどんなものか試してみたいが、もし予想以上に優れている場合は人間の存在価値はなんなのだろうかという気になってしまう。