各ボックスの「コピー」ボタンを押すと、そのプロンプトがそのままコピーされる(手で選択しなくてよい=改行が壊れない)。Claude Code に貼り付けて使う。プロンプト本文はその場で書き換えられる(プロジェクト名などを自分のものに直してからコピーできる)。
テキスト版(印刷・全文コピー用):prompts.txt
参考: vibecodingnotes.com/handson-cloudflare-static-upload/
public/index.html を作って。 Hello World と表示するだけのシンプルなHTML。
文字を大きくして、中央に寄せて。 派手にして。
Hello Worldの下に日本語訳「こんにちは世界」を足して
文字をクリックすると拡大するようにして
参考: vibecodingnotes.com/handson-cloudflare-wrangler/
npx wrangler login
現在時刻も表示して!
public フォルダの中身を、Cloudflare Pages のプロジェクト「プロジェクト名」に、本番(main ブランチ)として wrangler でデプロイして
プロジェクト名 はブラウザでデプロイしたときの名前(<名前>.pages.dev の部分)に置き換える。
npx wrangler pages deploy ./public --branch=main --project-name=プロジェクト名
流れ星も出して
デプロイして
参考: 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 に川柳を足す前のコミットに戻して
brew install gh
gh --version
gh auth login
GitHubに非公開のリポジトリ git-test を作って、今のフォルダの内容をpushして
gh repo create git-test --private --source=. --remote=origin --push
カフェオレについての200文字の短文をREADME.mdに足して
プッシュして
AI使う人でGitHub使ってないとやばい!的な煽りコピーを3つREADME.mdに足して
push
タコライスのレシピを100文字でREADME.mdに書いてpush
参考: vibecodingnotes.com/handson-cloudflare-d1-webapp/
このプロジェクトのベース名は my-bbs です。これを CLAUDE.md に記録してください。 - アプリ名・プロジェクト名・GitHubリポジトリ名 = ベース名 - D1データベース名 = ベース名のうしろに -db を付けた名前 これ以降、私のプロンプトの <ベース名> はベース名に、 <D1データベース> は「ベース名-db」に読み替えて作業してください。
D1データベース <D1データベース> を作って
npx wrangler d1 create <D1データベース> を実行してください。
このアプリに必要なデータベースのテーブル設計を提案してください。 【匿名一行掲示板】 - 名前登録なし、初めて投稿したときに会員番号が払い出される(1, 2, 3...の連番) - 同じブラウザから投稿した人には毎回同じ会員番号が使われるようにする - 画面には「会員1号」「会員2号」と表示する - 投稿内容は1行のテキスト
このスキーマでマイグレーションファイルを作成してください。 ファイルは migrations/0001_init.sql に保存してください。
このプロジェクト用の wrangler.jsonc を作って。 Cloudflare Pages プロジェクトで、公開ディレクトリは public。 D1データベース <D1データベース> を binding 名 DB で使う。 マイグレーションは migrations フォルダ。 compatibility_date は今日の前日の日付にする。 database_id は d1 create で表示された値を入れる。
スキーマ作成時に提示した仕様と、 先ほど設計したスキーマを使って、 Pages Functions で API を作って。 D1 の binding 名は DB。
これまでのDB定義、API定義を参考に フロントエンドを public/index.html として作成してください。
本番DBではなくローカルのD1で動作確認したい。 ローカルのD1にマイグレーションを適用してから、ローカルサーバーを起動して
本番DBにマイグレーションを適用してから、 wrangler で Cloudflare に直接デプロイして
ユーザーごとに投稿の背景色を変えてほしい
デプロイして
①作業フォルダの準備 は Finder での操作のため、コピーするプロンプトはなし(手順は上記の参考リンクへ)。