BudgetBookの設計と公開デモ｜収支と口座残高を分けて考える

家計簿で「今月いくら使ったか」が分かっても、「家計全体のお金がどう動いたか」は別の問題です。銀行から財布へ現金を移したとき、それを支出として数えると数字が合わなくなります。BudgetBookは、日々の取引と口座間の振替を分け、収支と残高の両方を確認できるように作った家計簿です。

収支と振替を分ける理由

買い物や給与などは、日付、口座、カテゴリ、金額を持つ取引として記録します。口座間でお金を移すときは、移動元と移動先を持つ振替として扱います。銀行口座から財布へ1万円を移しても、家計全体の収入や支出は変わりません。変わるのは二つの口座の残高です。

残高は開始残高と、その後の取引・振替から求めます。カードや借入などの負債口座も資産口座と分けて表示します。月の収支だけを見る場合と、資産・負債まで含めて見る場合では、答えたい問いが違います。月次画面と年間画面を用意したのは、その違いを行き来して確かめるためです。

予算と締めを、数字の根拠にする

予算は支出の区分ごと、月ごとに設定し、実績、残額、消化率を比べます。0円は割合の分母として扱わず、予算未設定を表します。前月の予算を暗黙に引き継がないので、表示中の月にどの設定が使われたかを追えます。

個人用の本体には月次締めと残高照合があります。締めは集計時点を記録し、照合は帳簿と実際の残高の差を見る機能です。過去の取引を後から編集すると、以降の月にも影響します。日付を移す編集では移動先だけでなく、元の日付が締め済みの月に属していないかも確認します。画面上の入力チェックだけでなく、更新と集計の処理で数字の意味を守る設計にしました。

個人用アプリはDjangoで入力、認証、集計を組み立て、HTMXで必要な画面部分を更新します。複数の画面で同じ集計の前提を使い、表示によって数字が食い違わないようにしています。

公開デモで試せること

最初はDjangoで作った画面を静的HTMLにした閲覧専用の紹介でした。その後、架空の4人家族のデータで取引の追加・編集・削除、口座間振替、月別予算の変更を試せるデモにしました。変更した内容はブラウザのsessionStorageに置き、サーバーには保存しません。同じタブでの再読み込みや画面移動では変更を維持しますが、長期保存用のバックアップではありません。ブラウザのセッション復元で状態が残る場合もあるため、確実にやり直すときは「データをリセット」を使ってください。収支、年間集計、資産・負債、支出内訳、予算は、その変更を使って再計算します。

医療・保険・税務、締め・照合、ローン戦略などの画面は初期サンプルの閲覧に限られ、デモ内の編集は反映されません。公開版にはDjangoの実行環境や個人用データベースを置かず、Cloudflare Workersから静的ファイルを配信しています。サンプルの書き出しも、一時的なデータベースに生成した架空のデータから必要な項目だけを取り出しています。

同じ数字になるかを確かめる

ブラウザの集計は、Djangoが同じサンプルから求めた結果と比較しています。振替で家計全体の収支が変わらないこと、締め済み月をまたぐ編集を防げること、予算0円や月の切り替えを正しく扱えることも確認しました。数字の意味を保ったまま、触って理解できるデモにするためです。

まず取引を一つ追加し、月の収支と口座残高の変化を見比べてみてください。次に振替を試すと、残高が移っても家計全体の収支は増減しないことを確認できます。

体験デモ： https://budgetbook-demo.nuconeko-garden.com/
ソースコード： https://github.com/NucoNekoSan/budgetbook-demo
作品紹介： https://nuconeko-garden.com/works/