ククデ会 プロンプト集
====================================
各ブロックを選択してコピーし、Claude Code に貼り付けて使う。


■ LEVEL 1 ｜ ブラウザ経由でデプロイ
参考: https://vibecodingnotes.com/handson-cloudflare-static-upload/

[最初のページを作る]
public/index.html を作って。
Hello World と表示するだけのシンプルなHTML。

[修正①（派手に）]
文字を大きくして、中央に寄せて。
派手にして。

[修正②（日本語訳を足す）]
Hello Worldの下に日本語訳「こんにちは世界」を足して

[修正③（クリックで拡大）]
文字をクリックすると拡大するようにして


■ LEVEL 2 ｜ Wrangler でデプロイ
参考: https://vibecodingnotes.com/handson-cloudflare-wrangler/

[Wrangler にログイン（初回）※ターミナルで実行]
npx wrangler login

[修正④（再デプロイ前）]
現在時刻も表示して！

[Wrangler でデプロイ（プロジェクト名は自分のものに置き換える）]
public フォルダの中身を、Cloudflare Pages のプロジェクト「プロジェクト名」に、本番（main ブランチ）として wrangler でデプロイして

[Wrangler でデプロイ（裏で動くコマンド）]
npx wrangler pages deploy ./public --branch=main --project-name=プロジェクト名

[修正してから…]
流れ星も出して

[…再デプロイ（さっきの wrangler コマンドが動く）]
デプロイして


■ LEVEL 3 ｜ Git と GitHub
参考: https://vibecodingnotes.com/guide-git-basic/

[練習用ファイルを作る]
README.md を作って、内容は「# 私の最初のリポジトリ」だけにして。

[リポジトリの初期化]
git init

[初回コミット（ステージング→コミット）]
git add README.md
git commit -m "最初のコミット"

[本文を足す]
README.mdに「Git の練習用リポジトリ。」という本文を足して

[コミット（言い方いろいろ①）]
コミットして

[川柳を足す]
Claude Code を題材にした川柳を1つ作って、README.md に足して

[コミット（言い方いろいろ②）]
コミット

[タイトルに日付を足す]
README.md の1行目のタイトルに、今日の日付を足して

[コミット（言い方いろいろ③）]
commit

[変更履歴を見る（コマンド）]
git log

[変更履歴を見る（言葉で）]
変更履歴を表で見せて

[前の状態に戻す]
README.md に川柳を足す前のコミットに戻して

[gh のインストール※ターミナルで実行]
brew install gh

[gh のバージョン確認※ターミナルで実行]
gh --version

[gh で GitHub にログイン※ターミナルで実行]
gh auth login

[GitHub にリポジトリ作成＆push（言葉で）]
GitHubに非公開のリポジトリ git-test を作って、今のフォルダの内容をpushして

[GitHub にリポジトリ作成＆push（裏で動くコマンド）]
gh repo create git-test --private --source=. --remote=origin --push

[日々の運用：本文を足す]
カフェオレについての200文字の短文をREADME.mdに足して

[push（言い方いろいろ①）]
プッシュして

[煽りコピーを足す]
AI使う人でGitHub使ってないとやばい！的な煽りコピーを3つREADME.mdに足して

[push（言い方いろいろ②）]
push

[書いて push まで一気に]
タコライスのレシピを100文字でREADME.mdに書いてpush


■ LEVEL 4 ｜ データベース（データ共有型Webアプリ）
参考: https://vibecodingnotes.com/handson-cloudflare-d1-webapp/

[① ベース名を決める（CLAUDE.md に記録）]
このプロジェクトのベース名は my-bbs です。これを CLAUDE.md に記録してください。
- アプリ名・プロジェクト名・GitHubリポジトリ名 = ベース名
- D1データベース名 = ベース名のうしろに -db を付けた名前
これ以降、私のプロンプトの <ベース名> はベース名に、
<D1データベース> は「ベース名-db」に読み替えて作業してください。

[② データベースの作成（D1作成）]
D1データベース <D1データベース> を作って

[② データベースの作成（D1作成）]
npx wrangler d1 create <D1データベース> を実行してください。

[② データベースの作成（テーブル設計）]
このアプリに必要なデータベースのテーブル設計を提案してください。
【匿名一行掲示板】
- 名前登録なし、初めて投稿したときに会員番号が払い出される（1, 2, 3...の連番）
- 同じブラウザから投稿した人には毎回同じ会員番号が使われるようにする
- 画面には「会員1号」「会員2号」と表示する
- 投稿内容は1行のテキスト

[② データベースの作成（マイグレーションファイル）]
このスキーマでマイグレーションファイルを作成してください。
ファイルは migrations/0001_init.sql に保存してください。

[③ プロジェクト設定ファイルの作成（wrangler.jsonc）]
このプロジェクト用の wrangler.jsonc を作って。
Cloudflare Pages プロジェクトで、公開ディレクトリは public。
D1データベース <D1データベース> を binding 名 DB で使う。
マイグレーションは migrations フォルダ。
compatibility_date は今日の前日の日付にする。
database_id は d1 create で表示された値を入れる。

[④ バックエンド（API）の作成]
スキーマ作成時に提示した仕様と、
先ほど設計したスキーマを使って、
Pages Functions で API を作って。
D1 の binding 名は DB。

[⑤ フロントエンド（UI）の作成]
これまでのDB定義、API定義を参考に
フロントエンドを public/index.html として作成してください。

[⑥ ローカルでの動作確認]
本番DBではなくローカルのD1で動作確認したい。
ローカルのD1にマイグレーションを適用してから、ローカルサーバーを起動して

[⑦ 本番反映（デプロイ＆マイグレーション）]
本番DBにマイグレーションを適用してから、
wrangler で Cloudflare に直接デプロイして

[⑧ 修正と反映（再デプロイ）：修正]
ユーザーごとに投稿の背景色を変えてほしい

[⑧ 修正と反映（再デプロイ）：反映]
デプロイして


※ ①作業フォルダの準備 は Finder での操作のため、コピーするプロンプトはなし（手順は上記の参考リンクへ）。