🙆

「個人開発×Claude Code」ナポレオン開発日記 #6 本番リリース

に公開
Next.js
TypeScript
Vercel
Supabase
Claude
idea

🎉 ついに本番リリースしました！

こんにちは。
このシリーズでは、トランプカードゲーム「4人用ナポレオン」のWebアプリを個人開発していく過程を、日記形式でまとめてきました。

ついに、
👉 https://napoleon-game.vercel.app/
で本番リリースできました！

🕹️ アプリ概要

「ナポレオン」は、4人で遊ぶトリックテイキング系のカードゲームです。
よく知られているのは5人版ですが、ローカルルール盛り盛りのアプリです笑
今回のWeb版では、1人プレイ用のAI対戦モードを中心に実装しています。

  • ゲームロジック：TypeScript
  • バックエンド：Supabase
  • フロントエンド：Next.js 15（App Router）
  • ホスティング：Vercel

1ゲーム完結型で、手軽に遊べるようUIを最適化しました。

⚙️ 技術スタックと設計の工夫

今回の開発では、
「next.jsを使ったシンプルなアプリ」を意識しました。

主要技術

  • フレームワーク: Next.js 15（App Router）
  • 言語: TypeScript（strict mode）
  • バックエンド: Supabase（PostgreSQL + RLS + Server Actions）
  • スタイリング: Tailwind CSS
  • テスト: Jest + Playwright
  • コード品質: Biome（Linter + Formatter）
  • CI/CD: GitHub Actions + Vercel

状態管理の工夫

特にゲーム進行のステート遷移では、React Context + useReducerを組み合わせて実装しました。グローバルな状態管理ライブラリ（zustand等）は使わず、必要最小限の構成でシンプルに保ちました。

セキュリティ

SupabaseのRow Level Security (RLS) + Server Actionsを活用し、クライアント側からの不正操作を防止。AIゲームのカード配布もサーバーサイドで実行することで、カードの改ざんを防いでいます。

🗒️ 開発期間
約3ヶ月ほどで完了しました。
（最初にPRを作ったのが8月23日でした）

  • 最低限の動作確認ソースコード -> 2週間
  • リファクタリングやコード見直し -> 2週間
  • セキュリティや速度改善含めた諸々のSupabase改善 -> 1ヶ月
  • CI/CD周りの設定 -> 2週間
  • Vercel関連のリリース作業系 -> 2週間

💭 感想
Claude Codeを使いながらの開発ですが、小規模ながらもこのスピード感で開発出来るのはAIありきだと思いました。
小規模Webサービスを作るのが簡単になったと思います。
一方で、セキュリティ対策はきちんと行なっていきたいとも思いました。
今回のアプリは認証もなく、supabaseにゲーム状態を保存してるだけですが、IDやパスワードを入れるよくあるアプリの場合は小規模でもセキュアにしておきたいなと。

引き続き、UI改善などに取り組んでいき、マルチプレイヤー対戦機能を実装していきます。

Discussion