Vibecoding Notes
Claude Codeに指示するだけで、WebサイトやWebアプリを作って公開できる。そのためのハンズオン集。
Claude Code にざっくり依頼して、やりとりしながら承認していくだけでも、Web サイトや Web アプリは作れる。ただ、裏で何が起きているかを理解しておくと、詰まったとき・応用したいとき・コストや権限の判断が必要なときに自分で見当がつく。本サイトはその理解を後押しするのが目的。HTML だけの静的サイトから、データベースを使った Web アプリの公開までを扱う。想定するのは個人・小規模な用途で、大規模サービスや商用グレードのシステム構築は対象外。
想定環境: Mac（MacBook など）、Google アカウント、Claude Pro 以上、Claudeデスクトップアプリ
ロードマップ
AIと一緒にWebサイト・Webアプリを作って公開するまでの手順。順番に進めることを想定している。
- バイブコーディングの概要、対象範囲、必要な準備、使うツールとロードマップの進め方を整理する。
- HTMLファイルなどをブラウザからCloudflareへ手動アップロードし、静的WebサイトやWebアプリを公開する。
- Node.jsを準備し、Claude Codeで作ったWebアプリをWrangler（npx）でCloudflare PagesにCLIからデプロイする。前回作ったpages.devプロジェクトをそのまま引き継ぐ手順がメイン。
- Cloudflare Pages の Git連携で GitHub リポジトリとつなぎ、GitHubに変更を反映するだけで自動デプロイされる仕組みを作る。
- Cloudflare D1、Pages Functions、Cloudflare Pages の Git連携を使い、D1を使ったデータ共有型掲示板を作って公開する。
応用編
ロードマップを終えた後の応用編。学んだ素材で何を作れるか、新しい道具でどう効率化するかを扱う。
- 掲示板アプリに投稿の表示/非表示を切り替えられる管理画面を追加し、Basic認証とトークン認証（単一共有シークレット方式）でアクセス制限を設ける。
- 掲示板アプリに投稿の表示/非表示を切り替えられる管理画面を追加し、Cloudflare AccessでGoogle認証によるアクセス制限を設ける。
- 掲示板アプリに投稿の表示/非表示を切り替えられる管理画面を追加し、SimpleWebAuthn + D1 で実装したパスキー（WebAuthn）認証でアクセス制限する。合言葉も外部サービスも使わない、フィッシングに強いパスワードレス認証。
- Astro でブログを開設する。公式ブログテンプレートで雛形を作り、Cloudflare Pages の Git 連携で公開する。ローカルプレビューと自動デプロイまでを一気に。
- Astro で作ったブログを自分のブログとして使えるところまで育てる。サイト情報・記事の書き方（フロントマター・下書き・画像）・SEO（OGP / sitemap / RSS）・編集ワークフローなどを扱う。
- Cloudflare Workers + Workers Static Assets + D1 で「いいねカウントAPI」を作り、自分のサイトにスクリプトタグ1行で埋め込めるブログパーツとして使えるようにする。
- Cloudflare Workers AI を使い、翻訳・要約／カテゴリ分類／画像キャプション生成／画像生成／音声書き起こしの5つのAIデモを1つのサイトにまとめて作り、Wrangler で公開する。
- Cloudflare が出したオープンソースCMS「EmDash」の紹介。WordPress の代替として Cloudflare 上でブログ・サイトを運用できる。AIネイティブ（MCP連携）でClaude Codeからも管理できるのが特徴。導入・運営の詳細は安定後に追記予定。
セットアップ
開発環境やツールのセットアップ手順。ハンズオンで必要になったタイミングで参照。
- 作業ディレクトリの考え方、プロンプト入力のコツ(スラッシュコマンド、@参照、画像貼り付けなど)、ビューメニュー、セッション管理、CLAUDE.md など、Claudeデスクトップアプリを快適に使うための機能を整理する。
- macOSで brew install するためのHomebrew導入と基本コマンド。vibecodingで出てくる gh や qlmarkdown のインストール例も。
- Git をローカルで動かしてから GitHub につなげる。コミット・差分・巻き戻しを体験してから、GitHub にコミットを送る流れをまとめる。
- push→GitHub Actions→Cloudflareの仕組み、Secrets設定など、GitHub Actionsの共通知識をまとめる。
- Cloudflareでのドメイン取得、外部で取得済みドメインの使い方（Pages/Workersでゾーン化やCNAMEの違い）、Custom domains設定、動作確認、www統一までを進める。
リファレンス
補足資料と用語・概念のリファレンス。必要に応じて参照。
- Claude Codeで作ったWebアプリをCloudflare Pagesに公開する4つの方法（手動アップロード、Wrangler、Git連携、GitHub Actions）の違いと使い分けを整理する。
- Cloudflare Workers と Pages の関係、公式の方向性、URL体系・独自ドメイン・無料枠・Git連携の違いを整理し、使い分けの指針を示す。
- 一人完結型(ブラウザ保存)とデータ共有型(データベース)の違いを整理し、どちらから始めるかの判断基準を示す。
- データ共有型Webアプリに必要なフロントエンド、API、DBの役割とCloudflare構成を整理する。
- UI部品やレイアウトの名前を動く実例で確認し、AIへの指示語彙を増やす。
- 見出し・リスト・リンク・コードブロック・フロントマターなどMarkdownの基本記法と、プレビューする方法を整理する。
アーカイブ
ハンズオンでは扱わなくなった記事。参考程度に残している。
- GitHub ActionsとCloudflareのSecretsを設定し、pushだけで自動デプロイできる形にする。
- Cloudflare D1、Pages Functions、GitHub Actionsを使い、D1を使ったデータ共有型掲示板を作って公開する。
タツヲ (yto)