おこづかい帳アプリの作り方｜AIに4回頼んで月ごと集計とCSV

AI（Claude）が書き、運営者が確認して公開した記事です。分担と確かめたもの →

おこづかいをもらった日、まんがを買った日、お手伝いでお金をもらった日。入ったお金と使ったお金を書きためて、月ごとにいくら残ったかを見る「おこづかい帳」を、ブラウザで動く小さなアプリにします。AIのチャットに日本語で頼むだけで作れて、インストールは要りません。

デモを開いて試す → 完成版の HTML をダウンロード（MIT）

ダウンロードしたファイル（allowance-book-app.html）は、パソコンならダブルクリックするとブラウザで開きます。中身を書き換えたいときは、メモ帳などで開いて保存し直します（MIT ライセンス。ライセンスの説明）。

デモは、日付・金額・内容を入れて「記録する」を押すと、月ごとの合計が出ます。記録はこのブラウザの中にだけ保存されます。

スマホで読んでいる人へ: このレシピの保存の手順はパソコン向けです。スマホでは、上のデモをそのまま使うか、ブックマークしてください。

このレシピは、AI（Claude）が作って確かめた記録です。AIが「はじめての人がAIに送りそうな文」を想定し、その頼み方どおりにコードを書き、テストとブラウザで確かめて、見つかった不具合を直しました。

先に結論：足し算は簡単、手間がかかるのは「金額の入力」と「CSV」

記録して合計を出すだけなら、AI（Claude）の1回目のコードで動きました。手間がかかったのは、計算の外側の3か所です。

• 金額の入力: 空欄のまま記録すると「-0円」の記録ができた。使ったお金に「-300」と入れると「--300円」と表示され、残りが300円増えた
• 月ごとの合計: 記録した順に月が並んだ。日付の読み方によっては、パソコンの時刻設定が日本以外だと10月1日が9月に入る作りだった
• CSV の書き出し: 内容にカンマが入ると列がずれた。Excel で日本語を読ませる工夫（BOM）も入っていなかった

金額と CSV の不具合は、空欄・「-300」・カンマ入りの内容を入れて確かめると見つかります。見本のデータを2〜3件入れるだけでは気づきません（入れて確かめる値は、下の「AIへの頼み方」の各回にあります）。

このレシピでやること

HTML はページの中身、CSS は見た目、JavaScript は動き（ボタンを押したときの処理）を書くための言葉です。この3つを1つのファイルにまとめてもらいます。CSV は、表のデータを「カンマで区切った文字」で書いたファイルで、Excel や Google スプレッドシートで開けます。

AIへの頼み方：4回の文と、そのたびに分かったこと

下の文は、コピーしてそのままAIのチャットに貼り付けられます。AIの答え方は毎回少しずつ違うので、出てくるコードがこのレシピと同じになるとは限りません。違っていても、保存して開き、決めた金額や内容を入れて確かめるところは同じです。

AIのチャットをどこで開けるかは「生成AIで何ができる？」にまとめています。

1回目：記録と合計を作ってもらう

おこづかい帳のアプリを作ってください。
日付・内容・金額を入れて、「入ったお金」か「使ったお金」かを選んで記録します。
記録の一覧と、入ったお金の合計・使ったお金の合計・残りを表示してください。
月ごとの合計も見られるようにしてください。
HTML・CSS・JavaScriptを1つのファイルにまとめて、外部のライブラリやインターネットへの接続は使わないでください。
計算の部分は、画面の処理とは別の関数に分けてください。

最後の1行は、合計や月ごとの集計の部分だけを取り出して確かめやすくするためのお願いです。関数とは「値を渡すと答えを返す、ひとまとまりの処理」のことです。

答えを保存して開く

AIの答えの中のコード（<!DOCTYPE html> から </html> まで）をメモ帳に貼り付けて okozukai.html という名前で保存し、ダブルクリックするとブラウザで開きます。詳しい保存手順は「ポモドーロタイマーの作り方」に書いています。

開いたら、この6つを入れてみる

AI（Claude）が1回目のコードで実際に試した入力です。金額の欄は、数字だけを入れられる欄（type="number"）になっていました。

「1,200」や全角の「１２００」は、アプリ内ブラウザ（Chromium 152 系）でキーを打って入れると、欄が自動で 1200 に直しました。カンマは打っても入りませんでした。ほかのブラウザやスマホのキーボードで同じになるかは確かめていません。

ほかに3つ見つかりました。

• スマホの幅（320px）を再現して開くと、ページ全体が980px幅として縮小され、文字が小さく表示された。入力欄5つが横1列に並んで、幅776pxあった。スマホ向けの幅の指定（viewport）が入っていなかったため
• ページを開き直すと、記録が全部消えた（1回目では保存を頼んでいないので、頼んだとおりの動き）
• 月の分け方が、日付を「日時」として読み直す書き方（new Date()）だった。Node.js で時刻設定をニューヨークにして動かすと、10月1日の記録が9月に入った。日付だけの文字は世界標準時の0時として読まれ、ニューヨークではまだ9月30日にあたるため

2回目：金額の入力を止め、保存と削除を足す

次の5つを直して・足してください。
1. 金額を空欄のまま記録すると「-0円」の記録ができます。空欄のときは記録せずに知らせてください。
2. 使ったお金に「-300」と入れると「--300円」と出て、残りが増えます。金額は1円以上の整数だけにして、マイナスや小数は理由を表示して止めてください。全角の数字（１２００）やカンマ（1,200）は読めるようにしてください。
3. 内容に <b>太字</b> と書くと太字で表示されます。書いたとおりの文字で出してください。スマホで開くと文字が小さく、入力欄が横に並んでいて押しにくいので、スマホの幅でも使えるようにしてください。
4. 月ごとの合計が記録した順に並びます。新しい月が上に来るように並べてください。記録の一覧も日付の新しい順にしてください。
5. 記録を次に開いたときも残るようにしてください。保存できないブラウザでも動くようにしてください。間違えた記録を消すボタンもつけてください。

「」の中は、自分の画面に出た表示に書き換えます。2回目のコードで変わったところは次のとおりです。

• 金額の欄を、ふつうの文字の欄（スマホでは数字のキーボードを出す指定 inputmode="numeric" つき）に変え、読み取りを1つの関数（parseAmount）にまとめた。全角の数字・カンマ・マイナス、先頭の「¥」、最後の「円」を読み、空欄・マイナス・小数・0・数字以外・1億円より大きい数は、理由を表示して止める
• 内容を、HTML ではなくただの文字として画面に入れる書き方（textContent）に変えた
• 月の分け方を、日付の文字「2026-10-01」の先頭7文字「2026-10」を使う書き方に変えた。ニューヨークの時刻設定でも10月1日は10月に入るようになった（頼んだのは並び順だけで、時刻設定のずれは頼まずに直った）
• 保存には、ブラウザの中に小さなデータを残す仕組み（localStorage）が使われた。保存の部分は「失敗しても無視する」書き方（try/catch）で囲まれている

ブラウザの設定によっては保存が止められていて、保存の仕組みを読もうとするだけでエラーになります。try/catch で囲んであるので、その場合も記録と合計は動きます。

3回目：CSV で書き出す

記録をCSVファイルで書き出すボタンをつけてください。
列は「日付,内容,入ったお金,使ったお金」の順にしてください。

ボタンを押すと okozukai.csv が保存されるようになりました。AI（Claude）が書き出しの部分をテストすると、次の2つが見つかりました。

内容にカンマが入ると、列がずれた。内容が「お菓子,ジュース」の行は、次のように書き出されました。

2026-10-03,お菓子,ジュース,,320

4列のはずが5列になり、Excel などで開くと「ジュース」が「入ったお金」の列に入ります。CSV では、カンマ・「"」・改行を含む欄を「"」で囲み、中の「"」は2つ重ねる決まりがあります。3回目のコードは、欄をそのままカンマでつないでいました。

先頭に BOM が付いていなかった。BOM（バイト・オーダー・マーク）は、ファイルの先頭に置く「この文字は UTF-8 で書いてある」という3バイトの印（EF BB BF）です。3回目のコードが書き出したファイルの先頭は「日付」の「日」の文字（E6 97 A5）で始まっていました。Microsoft のドキュメントは、Excel で CSV を開いて日本語などが文字化けしたときの直し方として、[テキスト/CSV から] で読み込み、元のファイルを「65001: Unicode (UTF-8)」にする手順を案内しています（Cost Management エクスポートの作成と管理の FAQ、2026年10月12日時点）。もう1つ、保存が止められた状態をブラウザの中で再現して3回目のコードを開くと、エラー0件で記録できましたが、開き直すと記録は0件に戻りました。画面に知らせが出ないので、保存されていないことに気づけません。

4回目：CSV を直し、保存できないことを知らせる

次の4つを直してください。
1. 内容にカンマが入っていると（例: お菓子,ジュース）、CSVの列がずれます。カンマや「"」、改行が入っていても列がずれないようにしてください。
2. Excelで開いたときに日本語が文字化けしないようにしてください。
3. 書き出す月を選べるようにして、ファイル名に月を入れてください。最後の行に合計も入れてください。
4. 保存できないブラウザで開いたときは、ページを閉じると記録が消えることを画面に出してください。

AI（Claude）は、書き出しを次のように変えました。

• カンマ・「"」・改行を含む欄は「"」で囲み、中の「"」は2つ重ねる
• 先頭に BOM を付ける。改行は Windows で使われる形（CRLF）にする
• 「書き出す月」を選ぶ欄を足し、ファイル名を okozukai-2026-10.csv（すべてなら okozukai-all.csv）にする。最後の行に「合計」を入れる
• 保存に失敗したら、「ページを閉じると記録は消えます」という知らせを画面に出す

テストで使った見本のデータで、10月を選んで書き出すと、中身は次のようになります（上の画面のデータとは別です。先頭の BOM は目に見えません）。

日付,内容,入ったお金,使ったお金
2026-10-01,おこづかい,3000,
2026-10-05,まんが,,500
2026-10-08,"文房具（ノート,ペン）",,1280
合計,,3000,1780

BOM を付けると、別の困りごとが出ることもあります。Python で、この CSV を文字コード「utf-8」の指定で読むと、1列目の見出しが「日付」ではなく、見えない印が付いた「日付」になりました。「utf-8-sig」の指定で読むと「日付」になりました。書き出した CSV を別のプログラムで読むときは、この点に気をつけます。

ほかに、AI（Claude）が画面を撮ったとき「消す」ボタンの文字が2行に折れていたので、折り返さない指定を足しました。

できたもの

完成品は /demos/allowance-book-app/ で実際に動かせます。計算と CSV のテストは book.test.mjs です。

上の画面は、見本の記録7件（9月3件・10月4件）を入れた状態です。

• 金額は「1200」「１２００」「1,200」「¥1,200」「1200円」のどれでも読める
• 記録の一覧は日付の新しい順。「消す」で1件ずつ消せる（確認が出る）
• 「書き出す月」を選んで「CSVで書き出す」を押すと、BOM 付き UTF-8 の CSV が保存される
• 1つの HTML ファイル（約16KB）だけで動く

確かめたこと

完成版を確かめた方法は、次の2つです。

• 計算と CSV のテスト 19件: Node.js（JavaScript をブラウザの外で動かす道具。v24 系）の標準のテスト機能で実行し、19件すべて合格しました。テストは HTML ファイルの中の計算の部分（<script id="book-logic">）をそのまま読み込むので、置いているファイルそのものを検査しています
• 金額: 全角・カンマ・「円」を読む、空欄・マイナス（全角も）・小数・0・「1e3」・1億円超を止める
• 集計: 合計、新しい月が先、年をまたぐ並び、時刻設定がニューヨークでも10月1日は10月。でたらめな記録1,000件×50回で、月ごとの合計の和が全体の合計に一致
• CSV: 先頭が EF BB BF、改行が CRLF、月の選択と合計の行、内容にカンマ・「"」・改行が入っても全行4列で読み戻せる
• 保存: 保存の仕組みがエラーを出しても止まらない、壊れた中身は空として読む
• ブラウザで操作: アプリ内ブラウザ（Chromium 152 系）でスマホの幅320pxと375pxを再現し、記録・削除・開き直し・書き出しを試しました。どちらの幅でも横にはみ出す表示はなく、ページのエラーは0件でした。キーで「１，２００」と打った金額は 1,200円として記録されました。書き出したファイルは、名前が okozukai-2026-10.csv、先頭の3バイトが EF BB BF でした。保存が止められた状態の再現では、エラー0件で記録と書き出しができ、保存できない知らせが出ました

3回目のコードに同じテストをかけると、19件中14件が合格、5件が不合格でした。不合格の5件はどれも CSV のテストで、カンマの列ずれのほか、4回目で頼んだ BOM・CRLF・月の選択・合計の行が、まだ入っていなかったためです。

テストのファイルは、Node.js が入っていれば node --test book.test.mjs で動きます（完成品の HTML と同じフォルダに置いた場合）。AIが書いたコードが違う形なら、このテストはそのままでは使えません。その場合は上の「6つの入力」と、カンマ入りの内容を書き出して列がずれないかを手で試してください。

⚠️ 実機のスマホ（iPhone・Android）では試していません。スマホの幅を再現したブラウザで確かめたところまでです。Safari・Firefox でも開いていません。Excel で CSV を開いて確かめてもいません（確かめた環境に Excel が入っていなかったため）。BOM が付いていることはバイトで確かめましたが、Excel での表示は確かめていません。文字化けしたときは、上の Microsoft の手順で読み込めます。

つまずいたこと

4回のやりとりで実際に出た不具合と、気づいたきっかけをまとめます。

見つけにくかったのは、時刻設定のずれと、保存できないことの2つです。日本の時刻設定で、保存できるふつうのブラウザで使っている限り、どちらも表に出ません。

自分で変えてみる

変えたいところを、AIに続けて頼みます。次の文は、AI（Claude）は試していません。直してもらったら、上の「6つの入力」とカンマ入りの書き出しをもう一度試してください。

費目で分けて合計する

記録に「費目」（おやつ・本・文房具・あそび・その他）を選ぶ欄を足して、月ごとに費目別の合計も表示してください。CSVにも費目の列を足してください。

書き出した CSV を読み込んで戻す

完成版には CSV の読み込みがありません。別のパソコンに記録を移すときに使います。

「CSVを読み込む」ボタンをつけて、このアプリで書き出したCSVから記録を戻せるようにしてください。合計の行は読み飛ばし、同じ記録が二重にならないようにしてください。

気をつけること

• AIが書いたコードには間違いが入ることがあります。このレシピでも、1回目は「--300円」が出たり、3回目は CSV の列がずれたりしました。Claude のヘルプセンターも、Claude が間違った答えを出すことがあり、唯一の情報源として頼らないよう案内しています（Claude is providing incorrect or misleading responses）。できたら、決めた値を入れて確かめてください。
• 家計のデータはインターネットに送りません。完成版のコードには、ほかのサーバーと通信する処理がありません。AI（Claude）がブラウザで記録・書き出しをしたときも、通信は HTML ファイルそのものの読み込み1件だけでした。記録はそのパソコンのそのブラウザの中にだけ残ります。
• ブラウザのデータを消すと、記録も消えます。ブラウザの設定で閲覧データやサイトデータを消すと、このアプリの記録も消えます。共用のパソコンでは、ほかの人にも記録が見えます。大事な記録は、ときどき CSV で書き出して残しておきます。ブラウザごとの消し方の手順は確かめていません。
• AIに送る文に、実際の家計の記録を書かないでください。アプリを作るのに、実際の金額や買った物、名前・住所などは要りません。個人情報保護委員会も、生成AIサービスの利用について注意喚起を出しています。

次にやること

できたアプリは、今は自分のパソコンの中だけで動いています。スマホで買い物のたびに記録するには、ファイルをインターネット上に置いて公開します。HTML ファイル1つだけのアプリなら、無料の置き場で公開できることが多いです。どこに置けばいいかは「AIで作ったものを無料で公開する方法」で比べています。公開しても、記録はそれぞれのスマホのブラウザの中に残り、サーバーには送られません。

書き出した CSV を何か月分もまとめて集計するなら、「毎月のCSV集計をAIに任せる」が近い題材です。お金の計算を扱うアプリなら「割り勘・会費計算アプリの作り方」もあります。

作ったものを人に見てもらうなら → Cloudflare Workers で独自ドメインで公開する

「つくる（アプリ）」のレシピ

• おこづかい帳アプリを作る（いま読んでいる記事）
• 単語カード・クイズアプリを作る
• スマホだけで自分の単語帳を作る
• ポモドーロタイマーを作る
• 割り勘・会費計算アプリを作る

作るのページで、ほかのカテゴリも見る →