はじめに
ゼロベース予算法（Zero-Based Budgeting）に基づいたWebアプリ「ZeroBase家計簿」を個人開発しました．
収入をすべての支出・貯金カテゴリに割り振り，余剰ゼロを目指す予算管理手法です．
公開URL: https://zerobase-kakeibo.com
ゼロベース予算法とは
先月の収入を「食費」「家賃」「貯金」などの今月の支出・貯金カテゴリに全額割り当て，
収入 - 支出 - 貯金 = 0 になるよう管理する手法です．
旅行費や引っ越し費用などたまにある大きな支出に対しては，専用の貯金カテゴリを作って月々積み立てます．
こうすることで，突発的な支出を抑えることができます．
- 無意識な浪費を防げる
- 毎月の予算を意識的に設計できる
- 貯金を「余ったら貯める」から「最初に確保する」に変えられる
機能
- 月別予算管理: カテゴリごとに予算を割り当て
- 収入・支出記録: 取引履歴の管理
- 貯金カテゴリ: 累計貯金額のトラッキング
- 月別サマリー: 各月の収入・支出・累計貯金額を一覧表示
- Googleログイン: Clerkによる認証
経緯
ゼロベース予算に基づく家計簿といえば YNAB がアメリカなどの英語圏で人気があるようですが，日本ではあまり普及していません．日本語対応しているアプリが少なく，月額料金もかかるのはもとより，そもそも概念が浸透していない感じです．
そこで，日本語で，無料で，ゼロベース予算に基づく家計簿を気軽に試せるものがあるといいかと思いました．
モバイルアプリは審査があるのでWebアプリにしましたが，少し考えてみると，家計簿なのだから外にデータを保存するのはあまりいいことではないですね．
インストール不要でどのデバイスでも使えるという利点はあるのですが．
テスターが確保できそうならモバイルアプリを作るとしましょう．
技術スタック
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Next.js 16 (App Router), React 19, TypeScript |
| スタイリング | Tailwind CSS v4, shadcn/ui |
| 認証 | Clerk (Google OAuth) |
| バックエンド | Cloudflare Workers |
| DB | Cloudflare D1 (SQLite) |
| デプロイ | OpenNext.js for Cloudflare, Wrangler |
ハマったポイントなど
clerk を production mode にするとサイトが Internal server error に
clerkのkeyをcloudflare workersに登録したのに，サイトが開けなくてInternal server error になりました．
原因は，公開キーがビルド時に埋め込まれることを知らなかったことと，.env.localにある開発環境用のkeyを更新していなかったことでした．
clerkの認証が/loginで行われない
トップページから /login にアクセスしても認証が始まりませんでした．
clerkのダッシュボードからDNS設定が必要でした．認証はclerkのドメインではなく，自分のドメインのサブドメインから行われるため必要だそうです．
ClerkのダッシュボードでConfiure→Developers→Domainsで設定．初回は時間がかかりました．
アクセスをブロック: 認証エラーです
認証が始まったかと思えば，アカウントを選ぶ前にブロックされました．
ClerkのDevelopmentモードではClerkがデフォルトのGoogle OAuth認証情報を提供しますが，Productionモードでは自分でGoogle Cloud Consoleで認証情報を作成して設定する必要があるようです．
ClerkのダッシュボードでConfigure→SSO connections→Google→console.cloud.google.comでウェブ アプリケーション のクライアント ID作成（プロジェクトがなければ作成から）→id，secretをclerkにコピー．
開発環境で認証できなくなった
本番環境に移行した後，開発環境でclerkによる認証ができなくなってしまいました．
問題が本番用のkeyにするために開発用のkeyが削除されたことだということは分かりますが，どのようにkeyを管理すればいいのか分かりませんでした．
.env.localに開発用，.env.production.localに本番用のkeyを保管して解決しました．
貯金額の累計額が計算されない
表示する月以前の同じ名前の貯金カテゴリの割り当て額の和をとっているはずだが，複数月のデータを同時に初期化するとこれが計算されないバグが発生しました．
原因はPromise.allで初期化処理をしていたことで，同じ名前のカテゴリが複数作成されてしまったことでした．
順次実行で解決しました．
データベース設計
貯金額の累計を計算することにしたので，月ごとにデータを保管するのは非効率でした．
そこで，支出や貯金のカテゴリは別で管理して，収入・支出にそのidを持つようにした．
それによって累計額を計算しやすくなった．
まとめ・感想
Cloudflare Workers + D1を使うことでインフラコストほぼ無料で個人開発アプリを公開できました．
今回ほぼ初めてのWebアプリ作成・公開だったので，様々なところでハマりました．
だいたいはAIで解決するのですが，やはりというか，AIに情報を与えきれないデプロイまわりの問題や，自分の知識が足りない問題はAIでも解決が難しかったです．
特に設計の知識が足りないということは感じました．
データベース設計は全く分からず，Next.jsのapp routerも浅いです．
今後も勉強しつつ，個人開発を続けいていきます．