AI × Vercelで実現する高速プロトタイピングとコンテキスト抽出（＋拡張アーキテクチャ設計）

概要

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

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

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

にある。

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

---

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

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

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

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

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

---

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;
}

---

再現手順

1. HTML作成
2. GitHubにpush
3. Vercel連携
4. URLアクセス

---

デモ

---

3. コンテキスト抽出

- ITEMS
- SLOTS
- 判定ロジック

---

4. 今後の拡張

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

---

結論

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

---

まとめ

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

最初から作り込まない