Vibecoding Notes
Claude Codeに指示するだけで、WebサイトやWebアプリを作って公開できる。そのためのハンズオン集。
Claude Code にざっくり依頼して、やりとりしながら承認していくだけでも、Web サイトや Web アプリは作れる。ただ、裏で何が起きているかを理解しておくと、詰まったとき・応用したいとき・コストや権限の判断が必要なときに自分で見当がつく。本サイトはその理解を後押しするのが目的。HTML だけの静的サイトから、データベースを使った Web アプリの公開までを扱う。想定するのは個人・小規模な用途で、大規模サービスや商用グレードのシステム構築は対象外。
想定環境: Mac（MacBook など）、Google アカウント、Claude Pro 以上、Claudeデスクトップアプリ
ロードマップ
AIと一緒にWebサイト・Webアプリを作って公開するまでの手順。順番に進めることを想定している。
バイブコーディングをはじめよう
バイブコーディングの概要、対象範囲、必要な準備、使うツールとロードマップの進め方を整理する。
CloudflareにHTMLをアップロードして公開する
HTMLファイルなどをブラウザからCloudflare（PagesまたはWorkers）へ手動アップロードし、静的WebサイトやWebアプリを公開する。
WranglerでCloudflareに公開する
Node.jsを準備し、Claude Codeで作ったWebアプリをWrangler（npx）でCloudflareにCLIからデプロイする。前回ブラウザで作ったPagesのプロジェクトやWorkerを、そのまま引き継いで更新する。
Basic認証でサイトに鍵をかける
Cloudflare Workers のサイトに Basic 認証をかける。守るパスだけを Worker のコードに通し、合言葉はファイルに書かず Cloudflare に預ける。
Webアプリの2つのタイプ
一人完結型(ブラウザの中)とデータ共有型(ブラウザの外)の違いを整理し、共有型で必要になる3つのデータの置き方と、どちらから始めるかの判断基準を示す。
D1でデータ共有型Webアプリを作る
Cloudflare D1 と Pages Functions（または Workers）でデータ共有型の掲示板を作り、wrangler で直接、または Git連携で Cloudflare に公開する。
ログイン方式の選び方
ログイン（認証）の方式を、作り方ではなく選び方で整理する。そもそもログイン機能は必要か、誰がログインするのか、方式ごとに何を預かり、ログインできなくなったときに誰が戻すのか。AI に頼む前に決めておくことをまとめる。
Cloudflare Accessでサイトに鍵をかける
Cloudflare Workers のサイト全体に Cloudflare Access をかけ、許可したメールアドレスの人だけが開けるようにする。ログインはメールに届くコードで済み、コードは1行も書かない。
ソーシャルログインで寄せ書きを作る
寄せ書きアプリを題材に、Google でログインするソーシャルログイン（OAuth 2.0 / OpenID Connect）を、Hono と @hono/oauth-providers で Cloudflare Workers に作る。Cloudflare Access の人数課金に縛られず、無料・人数無制限。Google に求める情報を最小限にする1行を足すと、メールも名前も受け取らない作りになった。
開発の基礎
Cloudflare に限らず、どのプロジェクトでも使う土台。ロードマップを進めていて必要になったら読む。
Markdownの基本
見出し・リスト・リンク・コードブロック・フロントマターなどMarkdownの基本記法と、プレビューする方法を整理する。
Git と GitHub の基本
Git をローカルで動かしてから GitHub につなげる。コミット・差分・巻き戻しを体験してから、GitHub にコミットを送る流れと、GitHub の最新を取り込む流れをまとめる。一歩先としてブランチ・プルリクエスト・コンフリクトも頼み方で体験する。
出先から GitHub のリポジトリを直す
GBA で手元の Mac と GitHub をつないだ次の一歩。出先では iPhone の Claude アプリからクラウドセッションで同じリポジトリを直し、戻ったら手元に取り込む。GitHub のつなぎ方、main に入れる頼み方と別のブランチに入ったときの流れ、手元に取り込むときと片付け、PC をつけっぱなしにする Remote Control をまとめる。
CLAUDE.md と AGENTS.md
Claude Code が起動のたびに読む指示ファイルは3つある。プロジェクトの CLAUDE.md、Codex などとも共有できる AGENTS.md、すべてのプロジェクトに効く ~/.claude/CLAUDE.md。置き場所と効く範囲の違い、AGENTS.md を CLAUDE.md から読み込む形、~/.claude/CLAUDE.md に書いた安全ルールはプロンプトでは消せないことがある話をまとめる。
作業メモをリポジトリに残す
調査や検討の経緯を GitHub リポジトリの中に Markdown で残し、AIエージェントと共有する方法。notes/ ひとつから始めて、必要になったら索引や決定ログを足す。
セキュリティを点検する
Webサイトやアプリのセキュリティを、AI に2回点検してもらう。人に URL を教える前にコード全体を内側から、公開したら URL を渡して外から。認証なしでデータベースや API が呼び出せないか、管理画面に入れないか、課金が無防備でないか。頼み方と、返ってきた報告の読み方。
応用編
ロードマップを終えた後の応用編。学んだ素材で何を作れるか、新しい道具でどう効率化するかを扱う。
演習：Webサイトを作る
複数ページのWebサイト、Claude Designでのデザイン、1回の依頼で作るWebアプリ、公開後の仕上げまで、静的なWebサイト・Webアプリづくりを演習する。
演習：一人完結型のアプリを3つ作る
サーバにデータを置かない「一人完結型」のWebアプリを3つ作る。手順は繰り返さず、作りながら出てくる判断を扱う。canvas と DOM の使い分け、保存という言葉の割れ方、localStorage が消える条件、そしてどこからデータ共有型が要るようになるか。
演習：D1でアンケート・ランキング・分担表
D1 の掲示板を作った流れをそのまま使って、診断アンケート・ランキング付きミニゲーム・当日の役割分担表を作る。手順は繰り返さず、仕様の書き方と、作るときに出てくる判断（同じ人の扱い・集計のしかた・不正対策の線引き・同時更新）を扱う。
Git連携でCloudflareに公開する
Cloudflare の Git連携（Workers または Pages）で GitHub リポジトリとつなぎ、GitHub に変更を反映するだけで自動デプロイされる仕組みを作る。
GitHub ActionsでCloudflareに公開する
GitHub Actions（Workers または Pages）で、GitHub に変更を反映するだけで Cloudflare に自動デプロイされる仕組みを作る。Git連携との違いと、ワークフローをエージェントに作らせる頼み方。
管理画面だけを Cloudflare Accessで守る
D1 の掲示板に投稿の表示/非表示を切り替える管理画面を追加し、管理画面と管理用の API の部分だけに Cloudflare Access をかける。掲示板そのものは誰でも見られるまま。
ログインキーでユーザーアカウント管理
寄せ書きアプリを題材に、ログインキーだけで本人を見分けるアカウント管理を、Cloudflare Workers と D1 で作る。メールもパスワードも使わず、別の端末でもキーを入れれば同じ自分として続けられる。キーのハッシュ保存やヘッダでの送信は、頼まなくても Claude Code が入れた。
パスキーで複数ユーザーのアカウントを作る
寄せ書きアプリを題材に、パスキー（WebAuthn）でログインするアカウント管理を、Hono と SimpleWebAuthn で Cloudflare Workers に作る。まずパスキーだけで作り、端末をなくした人の戻し方（運営者が D1 で戻す、リカバリコード）は、あとから足す章に分けた。
メールのリンクでログインする寄せ書きを作る
寄せ書きアプリを題材に、メールアドレスを入れると届くリンクでログインする機能（マジックリンク）を、Cloudflare Workers・D1・Email Service だけで作る。メールアドレスは保存せず、合言葉付きのハッシュだけを持つ。
Astroでブログを作って公開する
Astro の公式ブログテンプレートでブログを作り、Cloudflare Workers に公開する。プロジェクトの作成から公開、記事の追加と更新まで、Claude Code へのプロンプトだけで進める。
Astroブログを運営していく
Astro で作ったブログを自分のブログとして使えるところまで育てる。サイト情報・記事の書き方（フロントマター・下書き・画像）・SEO（OGP / sitemap / RSS）・デザインの変更などを扱う。
イベントログでアンケートを作る
起きたことを記録するだけの置き場（Workers Analytics Engine）に回答を貯めて、あとからまとめて集計する。重複回答の排除は書き込み時ではなく集計時にやるので、状態を持たなくていい。集計は Claude Code に頼むだけで、専用のトークンも集計ページも要らない。答え終わった人には診断結果も返す。
AIエージェントでブックマークレットを開発する
AIエージェントは手元のファイルを読み書きできる。だからブックマークレットも、コードを1つ1ファイルで置き、そこから登録用のページを生成する形にすると、直すのも増やすのも任せられる。
Workers AI で5つのAIデモを作る
Cloudflare Workers AI を使い、翻訳・要約／カテゴリ分類／画像キャプション生成／画像生成／音声書き起こしの5つのAIデモを1つのサイトにまとめて作り、Wrangler で公開する。
Claude Code から Codex を呼ぶ
Claude Code で作業している途中に、別の AI である Codex に用事を1つずつ頼む。違うモデルの目でレビューしてもらう（変更だけでなく、公開するファイル全体のレポートも）、意見を聞く、Claude Code にはできない画像生成を任せる。準備は Codex CLI を入れてログインするだけ。
Claude APIでAIアプリを作る
Claude API のキーを取り、課金の上限を先に設定してから、AI を1つ呼ぶだけの小さな Webアプリを作って公開する。必ず課金が発生するので任意。モデルは実際に試して決め、公開後にただ乗りされない守り方まで扱う。
EmDash（WordPress代替CMS）
Cloudflare が出したオープンソースCMS「EmDash」の紹介と導入・運営の流れ。WordPress の代替として Cloudflare 上でブログ・サイトを運用できる。AIネイティブ（MCP・スキル・CLI）で、作成から記事の公開まで Claude Code に頼んで進められる。
HyperFramesでHTMLから動画を作る
HTML で動画を書くフレームワーク HyperFrames を、Claudeデスクトップアプリの Claude Code から動かす。空のフォルダにプロンプトを1つ送るだけで、動くタイトル・複数シーンの動画・音声と字幕の付いた動画・撮った映像に字幕を重ねた動画を作り、MP4 に書き出す。
アーティファクトで限定公開のアプリ
Claude Code に頼んで作ったページを、claude.ai のアーティファクトとして公開する。作った時点で非公開で、招待した人だけが開ける。データベースも使えるので、役割分担表のような「決まった人たちだけで使うアプリ」を、Cloudflare を使わずに作れる。
セットアップ
開発環境やツールのセットアップ手順。ハンズオンで必要になったタイミングで参照。
Claudeデスクトップアプリを使う
作業ディレクトリの考え方、プロンプト入力のコツ(スラッシュコマンド、@参照、画像貼り付けなど)、右上のパネル(ターミナル・変更・ブラウザ・ファイル)、セッション管理、CLAUDE.md など、Claudeデスクトップアプリを快適に使うための機能を整理する。
Codex・Antigravityで進める
Claudeデスクトップアプリの代わりに、Codex（ChatGPT）や Google Antigravity（Gemini）のデスクトップアプリでハンズオンを進めるときの読み替え。作業フォルダの開き方、権限とモデルの設定、確認が出たときの押し方、アプリごとの注意をまとめる。
Homebrewをセットアップする
macOSで brew install するためのHomebrew導入と基本コマンド。vibecodingで出てくる gh や qlmarkdown のインストール例も。
独自ドメインを設定する
Cloudflareでのドメイン取得、外部で取得済みドメインの使い方（Pages/Workersでゾーン化やCNAMEの違い）、Pages・Workersへの独自ドメインの設定、動作確認、www統一、Google Search Consoleへの登録までを進める。
Windowsでのセットアップ
本サイトは Mac 前提だが、Windows でも進められる。Claude デスクトップアプリの Code から git・Wrangler・gh などの CLI を使えるようにする環境設定を1か所にまとめる。3つとも公式サイトのインストーラで入れ、入れ終わったらアプリを開き直す。
リファレンス
補足資料と用語・概念のリファレンス。必要に応じて参照。
Cloudflareへのデプロイ4つの方法
Claude Codeで作ったWebアプリをCloudflare（Pages / Workers）に公開する4つの方法（手動アップロード、Wrangler、Git連携、GitHub Actions）の違いと使い分けを整理する。
Workers と Pages どちらを使うか
Cloudflare Workers と Pages の関係、公式の方向性、URL体系・独自ドメイン・無料枠・Git連携の違いを整理し、使い分けの指針を示す。Wrangler で新しく作ると Workers になる件も扱う。
ブラウザに保存したデータは消える
localStorage は永続的な保存ではなく、使い続けているあいだ生きるキャッシュ。どの環境で・どういう条件で消えるかと、消えて困るときの3つの手を整理する。
データ共有型Webアプリの基礎知識
データ共有型Webアプリに必要なフロントエンド、API、データの置き場の役割とCloudflare構成を整理する。置き場はデータベースとは限らない。
AIへの指示に使えるUI用語集
UI部品やレイアウトの名前を動く実例で確認し、AIへの指示語彙を増やす。
アーカイブ
ハンズオンでは扱わなくなった記事。参考程度に残している。
管理画面をBasic認証で守る
掲示板アプリに投稿の表示/非表示を切り替えられる管理画面を追加し、Basic認証（合言葉ひとつの単一共有シークレット方式）でアクセス制限を設ける。
管理画面 + パスキー認証で守る
掲示板アプリに投稿の表示/非表示を切り替えられる管理画面を追加し、SimpleWebAuthn + D1 で実装したパスキー（WebAuthn）認証でアクセス制限する。合言葉も外部サービスも使わない、フィッシングに強いパスワードレス認証。
いいねカウントAPIをブログパーツとして使う
Cloudflare Workers + Workers Static Assets + D1 で「いいねカウントAPI」を作り、自分のサイトにスクリプトタグ1行で埋め込めるブログパーツとして使えるようにする。
いいねAPIをブックマークレット・Chrome拡張から使う
LAPで作ったLike APIを、ブックマークレットとChrome拡張機能の2通りから呼び出す。ブックマークレットはlike.jsを再利用し、拡張機能はcontent.jsから同じAPIを直接呼ぶ。
Remotionでプロンプトから動画を作る
React で動画を作るフレームワーク Remotion を Claude Code から動かす。インストールから、プロンプトだけで「動くタイトル」「複数シーンの動画」を段階的に作り、MP4 に書き出すまでをハンズオンで進める。
タツヲ (yto)