Claude Code Opus 4.5に全部やらせて本番リリースまで完走した話
はじめに
前回の記事で、Claude Opus 4.5を使ってタイピング練習アプリ「Typimal」のコア機能を実装しました。
今回はその続編として、本番リリースまで完走した記録をまとめます。
課金機能、本番環境へのデプロイ、認証設定など、「リリース」に必要な作業をClaude Codeにどこまで任せられるのか試しました。
私はこれまで企業内での社内向けのPHPシステムはフルスクラッチで何度も作ってきたことがありますが、ここ数年はWeb開発からも離れていました。一般向け（BtoC）としてのリリースは初めてになります。
これまでに別のアプリ案をもって開発を続けているものはあるのですが、画像が思ったようなものが作成できなかったりして中々リリースにたどり着けませんでした。
今回、機能的にはシンプルで、かつClaude Opus 4.5やNano Banana Proといった大変優れたサービスがリリースされた幸運もあって、BtoCアプリ開発初心者の私が初回公開まで3日、および課金レベルまでの作りこみに1週間の合計10日間で正式リリースにこぎつけました。
前回からの差分
前回の時点で以下は完了していました
✅ タイピング練習のコア機能
✅ Clerkログイン（開発キー）
✅ Cloudflare Workersへのデプロイ
✅ モバイル向けUI
今回追加・対応したこと
| カテゴリ | 内容 |
|---|---|
| 課金 | Stripe買い切り課金の実装 |
| 本番環境 | Clerk本番キー設定、DNS・SSL証明書 |
| 本番環境 | Stripe本番キー設定、Webhook設定 |
| 機能追加 | デイリーチャレンジ機能 |
| 機能追加 | プレミアム向け練習ステップ増設 |
| 機能追加 | PC向けサイドバーレイアウト |
| 機能追加 | タイピング音（6種類切り替え） |
つまり、「動くプロトタイプ」から「お金を払える本番サービス」にする作業をClaude Codeに任せました。
※ 前記事の通り、キャラクター画像のみNano Banana Proで作成しています。適材適所！
アーキテクチャ
私が開発するアーキテクチャの基本セットはある程度決めています。
それも以前他のアプリを開発（未リリース）するにあたってClaudeCodeやGeminiと相談しながら決めたものです。
その中で取捨選択してこのアプリをつくるようClaude Codeへ指示して構築した構成
┌─────────────────────────────────────────┐
│ Cloudflare Workers │
│ (Next.js 14 on OpenNext) │
├─────────────────────────────────────────┤
│ tRPC API (型安全なRPC) │
├──────────────┬──────────────────────────┤
│ Clerk │ Stripe │
│ (認証) │ (課金) │
├──────────────┴──────────────────────────┤
│ Neon (PostgreSQL) │
│ + Drizzle ORM │
└─────────────────────────────────────────┘
選定理由
- 大前提: 収益が得られることが確約しているわけではないため、基本的に費用は最小限に抑えること。下記は無料で使え、今のところドメイン、生成AIぐらいしか発生していません
- Cloudflare Workers: エッジで動作、コールドスタートが速い、無料枠が大きい
- Neon: サーバーレスPostgreSQL、Cloudflareとの相性が良い
- tRPC: フロントエンドとバックエンドで型を共有、APIの型安全性
- Clerk: 認証のマネージドサービス、Webhook対応
- Stripe: 買い切り課金に対応、Webhook検証が堅牢
認証フロー設計
Claude Codeと相談しながら設計したユーザーフロー
[初回訪問]
│
▼
[ゲストモード] ← localStorageに進捗保存
│
│ ログインボタン
▼
[Clerkログイン] → Webhook → DBにユーザー作成
│ ＋ゲストデータ移行
│
│ プレミアム購入
▼
[Stripe Checkout] → Webhook → DBのisPremium更新
│
▼
[プレミアム会員] ← 全ステップ解放、広告非表示
ポイント
- ゲストでも遊べる（会員登録のハードルを下げる）
- ログイン時にゲストデータを引き継ぐ
- 課金は買い切り（サブスクではない）
デプロイ
ハマったポイント①：WindowsでビルドできずWSL必須
OpenNext for Cloudflareのビルド時にsharp（画像最適化）がWindowsで動作せず、エラー。Claude Codeの提案でWSL環境に切り替えて解決。
ハマったポイント②：wrangler deployとwrangler pages deployの違い
Claude Codeがwrangler pages deployを使ってしまい、意図せずPagesプロジェクトが作成された。
| コマンド | 用途 |
|---|---|
npx wrangler deploy |
Workersにデプロイ（正解） |
npx wrangler pages deploy |
Pagesにデプロイ（間違い） |
TypimalはWorkersを使う構成なので、間違えて作成されたPagesプロジェクトは削除した。
人間が介入したこと
| 作業 | Claude Code | 人間 |
|---|---|---|
| コード生成 | ✅ | - |
| ブラウザテスト | ✅ | ✅ |
| 設定ファイル作成 | ✅ | - |
| デプロイコマンド実行 | ✅ | - |
| Clerkダッシュボード操作 | - | ✅ |
| Stripeダッシュボード操作 | - | ✅ |
| DNSレコード設定 | - | ✅ |
| 本番キーの取得・入力 | - | ✅ |
| 間違いの指摘 | - | ✅ |
| 最終的な意思決定 | - | ✅ |
Claude Codeに任せられる範囲
- コード生成、設定ファイル作成、大まかな動作テスト
- CLI操作（ビルド、デプロイ）
- エラー時の自己修正
人間が必要な範囲
- 外部サービスのダッシュボード操作
- 秘密鍵の取得・管理
- 間違いの検知と指摘
- 人間が見た時の違和感の検知、細かな調整
総括
Claude Code Opus 4.5の所感
前バージョン（Sonnet 4.5以前）と比べて明らかに改善された点
-
コンテキスト維持
「Compacting conversation…」後も作業内容を(ある程度)覚えている -
自己修正能力
エラーが出ても原因を特定して勝手に修正できる -
テスト作成・実施
テスト項目を全てのページに対して詳細に作らせ、その内容をすべてクリアするまでplaywright-mcpでブラウザでの自動テスト・修正実施。キャプチャもとらせて後から私も確認 -
ドキュメント生成
デプロイガイドなども作成してくれる
Agent-driven開発の限界
- 外部サービスのGUI操作は人間がやるしかない
- 間違いを100%防げるわけではない（特にデプロイ系、外部サービスの内容）
- 最終的な品質保証は人間の責任
最後に
Typimalは公開中です。遊んでみてください。
フィードバック・バグ報告歓迎です。
Discussion