「無料でポーカーを」フリーロールマップをClaude Codeと作った話

• URL: https://zenn.dev/yydev/articles/986b3089292d36
• 日付: 2026-06-23
• Tier: Tier 3
• 要旨: ポーカーのフリーロール開催店舗を地図で探せるサイトを Google Maps API × Supabase × Claude Code で開発。AdvancedMarker の mapId 必須やキー制限、RLS で SELECT のみ public にする設計が要点。Claude Code とは「速く書く」より「気持ちよく使える着地」を意識した協働。

詳細

ポーカーのフリーロール（参加費 0 円トーナメント）開催店舗を地図上でまとめて探せる「フリーロールマップ」を開発。技術構成は Vite + React、Google Maps JavaScript API（@vis.gl/react-google-maps）、Supabase（PostgreSQL）、Vercel ホスティング、Claude Code 開発支援。AdvancedMarker は mapId が必須で渡さないとマーカーが表示されずエラーも出にくくハマりやすい。フロント露出 API キーは HTTP リファラー制限と API 限定が必須。Supabase は RLS を有効化し SELECT のみ public にしておかないと anon key で全テーブル書き換え可能になる。Claude Code との開発フローでは（1）いきなり実装させずスキーマと要件を言語化させ設計を会話で固める、（2）動くものを見て UX の違和感を率直に伝え直すループを速く回す、（3）つまずきは丸投げせず仮説を添えて原因切り分けを速める、を意識。AdvancedMarker/Map ID 使用で Maps JavaScript API の動的マップ扱いになり課金が跳ねるため、キー制限と請求アラートを初日に設定すべきだった。住所しかない店舗は Geocoding で lat/lng を補完。