😇

Supabaseに裏切られても、泣きながらVercel公開した話

に公開
zennfes2025ai
zennfes2025free
tech

〜Googleスプレッドシート直結で観光AIアプリを完成させるまで〜

はじめに

こんにちは。普段はノーコード寄りで開発を楽しんでいる腐女子です。
今回、EngineerDrivenDay2025 に参加し、福岡の文化「三社詣り」を題材にした観光支援アプリを開発しました。

結果的に Supabaseに裏切られ、さくらに締め付けられ、Convexに殴られ、最後に神社名に見放されるという、泣きの連続。
でも最終的に Googleスプレッドシート直結 × Vercel でアプリを公開できました。

この記事では、その過程を「失敗談＋解決策」としてまとめます。

アプリの概要

アプリ名は 「福岡観光コンシェルジュ」。
機能はシンプルですが、観光体験に直結するよう設計しました。

  • 神社データベース
    Google Sheets → 公開CSVを直読み
  • AIコンシェルジュ
    Gemini API を使って自然な会話応答
  • 天気連動
    Open-Meteo APIでリアルタイム天気表示
  • UI
    Next.js + TailwindCSS、執事風アイコンで親しみやすさ

👉 実際のアプリはこちら：
https://v0-ai-sable-five.vercel.app/

苦労と学び

1. Supabaseに裏切られた

最初は「バックエンドはSupabaseでいける！」と思ったのですが……。
CSVをアップロードするとカオス状態に。

  • IDが勝手にズレる
  • 読み込みボタンを押しても反応しない
  • データ参照できない

結局「Supabaseの便利さは小規模には逆に重い」と学びました。

2. さくらサーバーに締め付けられた

日本政府が推奨する安心インフラ「さくら」。
でもセキュリティが強固すぎて、外そうとしても自動でONに戻る。
結果：安全だけど「開発できない」状態に。

3. Convexに殴られた

「SupabaseがダメならConvexだ！」と導入を試みました。
しかし…

  • CLI必須
  • GitHub連携必須
  • VSCode必須
  • Next.js構成と食い違い

深夜に「なんでsrcフォルダないん！？」と叫ぶ私。
ノーコード勢には荷が重すぎると痛感しました。(いちおう使えるとこまでは頑張った)

4. 神社名に見放された

完璧に整えたCSV。
全てID化して準備万端のはずが、ハッカソン前日の夜に神社名だけ表示されない。
エンジニアカフェで泣き叫ぶ腐女子の図。

解決策：Google Sheets直結

最終的な解決策はシンプル。

async function fetchCSV(url: string) {
  const res = await fetch(url, { cache: "no-store" })
  const text = await res.text()
  const [header, ...rows] = text.trim().split("\n")
  const keys = header.split(",").map(h => h.trim())
  return rows.map(r => {
    const values = r.split(",").map(v => v.trim())
    const obj: Record<string, string> = {}
    keys.forEach((k, i) => (obj[k] = values[i] ?? ""))
    return obj
  })
}

Googleスプレッドシートを 「リンクを知っている全員に公開」＋CSV形式で取得 すれば、そのままDB代わりに使えます。
この方式に切り替えてからは安定稼働。更新も即時反映できました。

技術スタック

  • フロントエンド: Next.js (App Router) + TypeScript + TailwindCSS
  • データ: Google Sheets (CSV公開)
  • AI: Gemini API
  • 天気: Open-Meteo API
  • デプロイ: Vercel

ノーコード中心の私でも、「最小構成で動くもの」を仕上げられたのは大きな学びでした。

まとめ

Supabaseに裏切られ、さくらに締め付けられ、Convexに殴られ、そして神社名に見放され…。
それでも 泣きながら進めば、推し＝アプリは完成する。

これが今回の一番の学びです。

👉 アプリはこちらから触れます：
https://v0-ai-sable-five.vercel.app/

おわりに

  • 小規模でスピード優先なら、Google Sheets直結は意外と最強
  • バックエンドを無理に入れるより「動くものを出す」のが正解
  • 泣きながらでも進めば完成する

同じように「Supabaseに裏切られた人」や「Convexで泣いた人」に、少しでも役立てば嬉しいです。

Discussion