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へ手動アップロードし、静的WebサイトやWebアプリを公開する。
WranglerでCloudflareに公開する
Node.jsを準備し、Claude Codeで作ったWebアプリをWrangler（npx）でCloudflare PagesにCLIからデプロイする。前回作ったpages.devプロジェクトをそのまま引き継ぐ手順がメイン。
Webアプリの2つのタイプ
一人完結型(ブラウザの中)とデータ共有型(ブラウザの外)の違いを整理し、共有型で必要になる3つのデータの置き方と、どちらから始めるかの判断基準を示す。
D1でデータ共有型Webアプリを作る
Cloudflare D1 と Pages Functions でデータ共有型の掲示板を作り、wrangler で直接、または Git連携で Cloudflare に公開する。
Basic認証でサイトに鍵をかける
Cloudflare Pages のサイトに Basic 認証をかける。ミドルウェアはサイト全体で動かし、鍵をかける範囲はコードで判定する。合言葉はファイルに書かず Cloudflare に預ける。
ソーシャルログインで寄せ書きを作る
寄せ書きアプリを題材に、Google・GitHub・X・Facebook などのソーシャルログイン（OAuth 2.0 / OIDC）を Hono と @hono/oauth-providers で自前実装する。Cloudflare Access の per-seat 課金に縛られず、無料・人数無制限でユーザー登録・投稿・ログアウトを作る。
開発の基礎
Cloudflare に限らず、どのプロジェクトでも使う土台。ロードマップを進めていて必要になったら読む。
Markdownの基本
見出し・リスト・リンク・コードブロック・フロントマターなどMarkdownの基本記法と、プレビューする方法を整理する。
Git と GitHub の基本
Git をローカルで動かしてから GitHub につなげる。コミット・差分・巻き戻しを体験してから、GitHub にコミットを送る流れをまとめる。
作業メモをリポジトリに残す
調査や検討の経緯を GitHub リポジトリの中に Markdown で残し、AIエージェントと共有する方法。notes/ ひとつから始めて、必要になったら索引や決定ログを足す。
安全ルールのスキルを入れる
危ないコードを書かせてしまう心配は、いまの Claude ならあまり要らない。残るのは「頼まなかったものは作らない」ほうで、認証がそれにあたる。公開の直前に外から何が見えるかを Claude 側に確かめさせるスキルの入れ方。
公開後にセキュリティを点検する
公開したWebアプリの URL を渡して、Claude に外から点検してもらう。認証なしでデータベースや API が呼び出せないか、管理画面に入れないか、課金が無防備でないか。頼み方と、返ってきた報告の読み方。
応用編
ロードマップを終えた後の応用編。学んだ素材で何を作れるか、新しい道具でどう効率化するかを扱う。
Git連携でCloudflareに公開する
Cloudflare Pages の Git連携で GitHub リポジトリとつなぎ、GitHubに変更を反映するだけで自動デプロイされる仕組みを作る。
管理画面をBasic認証で守る
掲示板アプリに投稿の表示/非表示を切り替えられる管理画面を追加し、Basic認証（合言葉ひとつの単一共有シークレット方式）でアクセス制限を設ける。
管理画面 + Cloudflare Accessで守る
掲示板アプリに投稿の表示/非表示を切り替えられる管理画面を追加し、Cloudflare AccessでGoogle認証によるアクセス制限を設ける。
ログインキーでユーザーアカウント管理
寄せ書きアプリを題材に、ログインキー（UUID）だけで本人を見分けるアカウント管理を作る。メールもパスワードも使わず、別の端末でもキーを入れれば同じ自分として続けられる。鍵のハッシュ保存・ヘッダ認証・端末側でのキー保存まで含めてゼロから作る。
パスキーで複数ユーザーのアカウントを作る
寄せ書きアプリを題材に、パスキー（WebAuthn）＋リカバリコードで複数ユーザーのアカウント認証を自前で作る。ユーザー名レス・複数パスキー・リカバリコードのハッシュ保存と単回消費まで、仕様に沿って安全に実装する。
Astroでブログを作って公開する
Astro でブログを開設する。公式ブログテンプレートで雛形を作り、Cloudflare Pages の Git 連携で公開する。ローカルプレビューと自動デプロイまでを一気に。
Astroブログを運営していく
Astro で作ったブログを自分のブログとして使えるところまで育てる。サイト情報・記事の書き方（フロントマター・下書き・画像）・SEO（OGP / sitemap / RSS）・編集ワークフローなどを扱う。
演習：一人完結型のアプリを3つ作る
サーバにデータを置かない「一人完結型」のWebアプリを3つ作る。手順は繰り返さず、作りながら出てくる判断を扱う。canvas と DOM の使い分け、保存という言葉の割れ方、localStorage が消える条件、そしてどこからデータ共有型が要るようになるか。
演習：D1でアンケート・ランキング・分担表
D1 の掲示板を作った流れをそのまま使って、診断アンケート・ランキング付きミニゲーム・当日の役割分担表を作る。手順は繰り返さず、仕様の書き方と、作るときに出てくる判断（同じ人の扱い・集計のしかた・不正対策の線引き・同時更新）を扱う。
イベントログでアンケートを作る
起きたことを記録するだけの置き場（Workers Analytics Engine）に回答を貯めて、あとからまとめて集計する。重複回答の排除は書き込み時ではなく集計時にやるので、状態を持たなくていい。最後に診断機能も足す。
いいねカウントAPIをブログパーツとして使う
Cloudflare Workers + Workers Static Assets + D1 で「いいねカウントAPI」を作り、自分のサイトにスクリプトタグ1行で埋め込めるブログパーツとして使えるようにする。
いいねAPIをブックマークレット・Chrome拡張から使う
LAPで作ったLike APIを、ブックマークレットとChrome拡張機能の2通りから呼び出す。ブックマークレットはlike.jsを再利用し、拡張機能はcontent.jsから同じAPIを直接呼ぶ。
AIエージェントでブックマークレットを開発する
AIエージェントは手元のファイルを読み書きできる。だからブックマークレットも、コードを1つ1ファイルで置き、そこから登録用のページを生成する形にすると、直すのも増やすのも任せられる。
Workers AI で5つのAIデモを作る
Cloudflare Workers AI を使い、翻訳・要約／カテゴリ分類／画像キャプション生成／画像生成／音声書き起こしの5つのAIデモを1つのサイトにまとめて作り、Wrangler で公開する。
Claude APIでAIアプリを作る
Claude API のキーを取り、課金の上限を先に設定してから、AI を1つ呼ぶだけの小さな Webアプリを作って公開する。必ず課金が発生するので任意。モデルは実際に試して決め、公開後にただ乗りされない守り方まで扱う。
EmDash（WordPress代替CMS）
Cloudflare が出したオープンソースCMS「EmDash」の紹介。WordPress の代替として Cloudflare 上でブログ・サイトを運用できる。AIネイティブ（MCP連携）でClaude Codeからも管理できるのが特徴。導入・運営の詳細は安定後に追記予定。
Remotionでプロンプトから動画を作る
React で動画を作るフレームワーク Remotion を Claude Code から動かす。インストールから、プロンプトだけで「動くタイトル」「複数シーンの動画」を段階的に作り、MP4 に書き出すまでをハンズオンで進める。
セットアップ
開発環境やツールのセットアップ手順。ハンズオンで必要になったタイミングで参照。
Claudeデスクトップアプリで使う
作業ディレクトリの考え方、プロンプト入力のコツ(スラッシュコマンド、@参照、画像貼り付けなど)、右上のパネル(ターミナル・ディフ・ブラウザ・ファイル)、セッション管理、CLAUDE.md など、Claudeデスクトップアプリを快適に使うための機能を整理する。
Homebrewをセットアップする
macOSで brew install するためのHomebrew導入と基本コマンド。vibecodingで出てくる gh や qlmarkdown のインストール例も。
GitHub ActionsでCloudflare自動デプロイ
push→GitHub Actions→Cloudflareの仕組み、Secrets設定など、GitHub Actionsの共通知識をまとめる。
独自ドメインを設定する
Cloudflareでのドメイン取得、外部で取得済みドメインの使い方（Pages/Workersでゾーン化やCNAMEの違い）、Custom domains設定、動作確認、www統一までを進める。
Windowsでのセットアップ
本サイトは Mac 前提だが、Windows でも進められる。Claude デスクトップアプリの Code から git・Wrangler・gh などの CLI を使えるようにする環境設定を1か所にまとめる。3つとも公式サイトのインストーラで入れ、入れ終わったらアプリを開き直す。
リファレンス
補足資料と用語・概念のリファレンス。必要に応じて参照。
Cloudflare Pagesへのデプロイ4つの方法
Claude Codeで作ったWebアプリをCloudflare Pagesに公開する4つの方法（手動アップロード、Wrangler、Git連携、GitHub Actions）の違いと使い分けを整理する。
Workers と Pages どちらを使うか
Cloudflare Workers と Pages の関係、公式の方向性、URL体系・独自ドメイン・無料枠・Git連携の違いを整理し、使い分けの指針を示す。Wrangler で新しく作ると Workers になる件も扱う。
データ共有型Webアプリの基礎知識
データ共有型Webアプリに必要なフロントエンド、API、データの置き場の役割とCloudflare構成を整理する。置き場はデータベースとは限らない。
AIへの指示に使えるUI用語集
UI部品やレイアウトの名前を動く実例で確認し、AIへの指示語彙を増やす。
アーカイブ
ハンズオンでは扱わなくなった記事。参考程度に残している。
管理画面 + パスキー認証で守る
掲示板アプリに投稿の表示/非表示を切り替えられる管理画面を追加し、SimpleWebAuthn + D1 で実装したパスキー（WebAuthn）認証でアクセス制限する。合言葉も外部サービスも使わない、フィッシングに強いパスワードレス認証。
D1でデータ共有型Webアプリを作る（GitHub Actions版）
Cloudflare D1、Pages Functions、GitHub Actionsを使い、D1を使ったデータ共有型掲示板を作って公開する。
GitHub ActionsでCloudflareに公開する
GitHub ActionsとCloudflareのSecretsを設定し、pushだけで自動デプロイできる形にする。
タツヲ (yto)