はじめての「みんなで使えるアプリ」作り
Claude Code × Cloudflare 再現レシピ

手を動かす前に、これから何をするのかを1分だけイメージします。

これから作るもの

「ひとことを書き込むと、みんなに表示される掲示板」を作ります。複数の人が使う＝データを保存する場所（データベース）が必要なアプリです。

作業は大きく3ステップ

1. 準備… フォルダを作り、AIとデータベースを用意する
2. 実装… AIに中身（設計・ウラ側・画面）を作ってもらう
3. 公開… インターネットに出して、みんなが使えるようにする

作業する「箱（フォルダ）」を作って、道具（Claude Code）を開きます。

2-1. 作業フォルダを作る

デスクトップに claude というフォルダを作り、その中に my-bbs というフォルダを作ります。最終的にこうなればOKです👇

デスクトップ / claude / my-bbs

2-2. Claude Code を起動する

1. Claudeのデスクトップアプリを開く
2. メニューから Code を選ぶ
3. New session（新しいセッション） をクリック
4. 作業フォルダに、さっき作った my-bbs フォルダを指定する

2-3. ログイン状態の確認

ターミナル（Claude Codeの画面下や「ターミナル」アプリ）で、次のコマンドを貼って Enter。

npx wrangler whoami

 ⛅️ wrangler 4.x.x
────────────────────
Getting User settings...
👋 You are logged in with an OAuth Token, associated with
   the email you@example.com   ← ① メールアドレス

┌──────────────────────┬──────────────────────────────┐
│ Account Name         │ Account ID                   │
├──────────────────────┼──────────────────────────────┤
│ You's Account        │ a1b2c3d4e5f6...              │
└──────────────────────┴──────────────────────────────┘
   ↑ ② アカウント名

投稿を保存する「入れ物」をCloudflare上に1つ作ります。

npx wrangler d1 create my-bbs-db

「どんなデータをどう保存するか」をAIに設計してもらいます。

① まず仕様を伝えて、設計を提案してもらう

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

提案された設計を読んで、納得できたら次へ。わからない言葉は「これ何？」と聞いてOKです。

② 設計をファイルにしてもらう

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

「データベース」と「アプリ」を結びつける設定ファイル wrangler.jsonc を作ります。

次の呪文を貼ります。3番で控えた database_id を、呪文の中の「（3番のID）」と差し替えてから貼ってください（Claude Codeに「IDはこれです」と伝えてもOK）。

以下のテンプレートで wrangler.jsonc を作成してください。
プロジェクト名は「my-bbs」、データベース名は「my-bbs-db」、
compatibility_date は昨日の日付、
database_id には先ほど d1 create で表示されたIDを入れてください。

{
  "name": "my-bbs",
  "compatibility_date": "YYYY-MM-DD",
  "pages_build_output_dir": "./public",
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "my-bbs-db",
      "database_id": "（3番のID）",
      "migrations_dir": "migrations"
    }
  ]
}

投稿を「保存する」「読み出す」ための裏方プログラムを作ってもらいます。

匿名一行掲示板のAPIを functions/api/posts.js に作成してください。
投稿の一覧取得と新規投稿ができるようにしてください。
D1 の binding 名は DB、スキーマは先ほど設計したものを使ってください。

人が見て操作する画面 public/index.html を作ってもらいます。

これまでのDB定義、API定義を参考に匿名一行掲示板のフロントエンドを public/index.html として作成してください。
シンプルで読みやすいデザインにしてください。
スマートフォンでも使いやすいようにしてください。

公開する前に、まず手元（あなたのPCの中だけ）で動かしてみます。

① 手元のデータベースに設計を反映

npx wrangler d1 migrations apply my-bbs-db --local

末尾の --local は「手元だけ」という意味。まだ本番には触りません。

② ローカルサーバーを起動してもらう

wrangler のローカルサーバー（wrangler pages dev）を起動して

表示された http://localhost:8788 のようなURLをブラウザで開き、実際に投稿して動くか確かめます。

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

作ったコードを GitHub（コードの保管庫）に、非公開で保存します。

① 余計なファイルを除外する

.gitignore を作って .wrangler/ を除外してください

.wrangler/ は手元用の一時データなので、保存しなくてOKです。

② GitHubに保存（プッシュ）する

いちばんラクなのは、Claude Codeにまとめて頼む方法です。

GitHubに非公開のリポジトリ my-bbs を作って、今のフォルダの内容をpushして

自分でターミナルに打ちたい場合はこちら👇

git init -b main
git add -A
git commit -m "initial"
gh repo create my-bbs --private --source=. --remote=origin --push

いよいよ公開です。GitHubとCloudflareをつなぐと、以後はプッシュするだけで自動公開になります。

① 本番のデータベースに設計を反映（必須）

npx wrangler d1 migrations apply my-bbs-db --remote

② Cloudflareの画面でGitHubとつなぐ

1. Cloudflareダッシュボード を開く
2. 左メニュー Compute →　Workers & Pages
3. 右上 Create application をクリック
4. 「Looking to deploy Pages?」の Get started をクリック
5. Import an existing Git repository の Get started をクリック
6. （初回だけ）GitHubとの連携を「許可（Authorize）」する
7. リポジトリ一覧から my-bbs を選び、Begin setup

③ 公開の設定を入力する

次のとおり入力します。空欄のところは何も入れないでOKです。

1. Save and Deploy をクリック
2. Deployments の画面で進み具合を見守る（数分待つことも）
3. 完了したら、表示された ○○.pages.dev のURLを開いて動作確認！🎉

公開後の修正はとてもかんたん。直す → プッシュするだけで自動的に本番が更新されます。

① Claude Codeに修正をお願いする

例：「投稿の背景色を会員ごとに変えて」など、ふつうの言葉で頼めばOK。心配なら8番の方法で手元確認してから進めます。

② プッシュして反映する

コミットしてpushして

自分で打つ場合👇

git add -A
git commit -m "修正内容"
git push

npx wrangler d1 migrations apply my-bbs-db --remote