概要

本ドキュメントは、AIエージェント（Claude）とVercelを活用し、シングルファイルの「不規則動詞クイズアプリ」を約15分で構築・公開した実践記録である。

本事例の本質は単なる高速実装ではなく、

「AIで作り、Vercelで“即使える状態”にする」こと

にある。

さらに、その構造を「プロジェクト・コンテキスト」として抽出し、将来的にGCP + Supabase構成へスケールさせる前提まで含めて整理する。

1. 背景と目的：娘の小テスト対策

本プロジェクトは「娘の小テスト対策」という身近な課題からスタートした。

求められた要件は以下の通り：

スマートフォンから即アクセス可能
記憶に定着する学習体験（入力式中心）
テストに間に合わせる即時提供

**「すぐ使える状態にできるかどうか」**が最重要

2. 実践：AI × Vercelによる高速開発

技術選定

HTML / CSS / Vanilla JS（シングルファイル）
Vercel（ホスティング + ドメイン + HTTPS + CDN）
GitHub連携

Vercelを「公開基盤」として利用

なぜVercelが重要なのか

pushするだけでURL発行
HTTPS自動対応
CDNで高速配信

開発完了 = 公開完了

コアロジック例

const ITEMS = [
  { base: "go", past: "went", pastParticiple: "gone" }
];

function checkAnswer(input, correct) {
  return input.trim().toLowerCase() === correct;
}

再現手順

HTML作成
GitHubにpush
Vercel連携
URLアクセス

デモ

3. コンテキスト抽出

- ITEMS
- SLOTS
- 判定ロジック

4. 今後の拡張

フロント：Vercel
API：GCP Cloud Run
DB：Supabase

結論

AIだけでは価値にならない
公開して初めて価値になる
Vercelがそのギャップを埋める

まとめ

AI → Vercel → コンテキスト → 拡張

最初から作り込まない