Cowork 2026年9月23日 6分で読めます

バイブコーディングで家計簿アプリを作った話

バイブコーディングで家計簿アプリを作った話

市販の家計簿アプリを何個も試しては、結局続かなかった。そんな経験はありませんか。

私も同じでした。カテゴリが勝手に決まってしまう、広告が多い、欲しい項目がない。そこで思い切って、バイブコーディング（自然言語でAIにコードの生成・修正を依頼しながら開発を進める方法）で、Claude Codeに自分専用の家計簿アプリを作らせてみました。この記事では、実際に使ったプロンプトと、一発では完成しなかったリアルな過程を公開します。

バイブコーディングで家計簿アプリは作れるのか

結論から言うと、シンプルな形の原型であればコード上では作れます。ただし「一言で理想通りに完成する」というより、「作っては試し、直してもらう」を数回繰り返す形になりましたし、実際に日常使いできるかどうかは、ブラウザでの動作確認を重ねてから判断する必要があります。

私が実際に試したのは、日付・支出/収入・カテゴリ・金額を記録できるだけの、ごく小さな家計簿アプリです。難しい機能は入れず、まずは「自分が続けられる最低限」を目指しました。

1回目のプロンプトで出てきたもの

最初に私が伝えたのは、次のような内容でした。


日付・支出/収入の種類・カテゴリ・金額を記録できる、シンプルな家計簿アプリを作ってください。

目的: 自分の支出と収入を記録して、収入合計・支出合計・収支差額を確認したい
対象: 新しいHTMLファイル1つで作ってください
データの保存先: ブラウザのlocalStorage（外部サーバーへの通信は行わない）
今回はまだ実装しないもの: グラフ表示や削除機能は次の指示で追加するので、今回は含めないでください

不明点があれば推測せず、確認事項として列挙してください。

数分ほどで、入力フォームと一覧表、収支合計を表示するページができあがりました。ここまでは想像していた通りでしたが、できあがったコードを読み返してみると、気になる点も出てきました。

入力を間違えても削除する仕組みがない
支出をカテゴリ別に見る仕組みがない
日付や金額が空のままでも登録できてしまう

「動きそうだけど、このままでは続けられなさそうだ」というのが正直な感想です。合計金額の計算部分は、コードから計算処理だけを取り出してNode.jsで簡単な金額のサンプルを動かし、支出とカテゴリごとの集計が意図した数字になることを簡易確認しました（再現手順を記録した正式なテストではありません）。一方、ブラウザ上でボタンをクリックして画面の見た目まで確認する作業は、今回の実行環境の都合でまだできていません。使用したClaude Code・Node.js・ブラウザの正確なバージョンも記録しておらず、環境によって細部の挙動が変わる可能性がある点はご了承ください。

2回目のプロンプトで改善したこと

そこで、気になった点をそのまま伝えました。


1件ずつ削除できるボタンをつけてください。
削除する前に、削除対象の内容を画面に表示し、削除してよいか確認できるようにしてください。
削除の対象は、このアプリ内に自分で入力したデータ1件のみです。既存のコードファイルやほかのファイルを削除する処理は追加しないでください。

カテゴリ別の支出が一目でわかるように、円グラフを追加してください（外部ライブラリやCDNは使わず、HTMLのcanvas要素だけで作ってください）。

日付か金額が空のとき、または金額が0以下のときは登録できないようにしてください。

不明点があれば推測せず、確認事項として列挙してください。

この指示で、確認つきの削除ボタン・カテゴリ別の円グラフ（canvas要素を使った簡易的なもの）・入力チェックが追加されました。コードを読んだ範囲では、1回目より「使えそうな形」に近づいた実感があります。

一方で、円グラフの配色が見やすいかどうかは実際にブラウザで表示して確認できていませんし、月をまたいだ集計にもまだ対応していません。「まだわからない」「試行中」という状態は、正直に書いておくべきだと感じました。

市販アプリと自作アプリの違い

市販の家計簿アプリには、カテゴリの自動仕分けや家計簿全体の資産管理など、便利な機能が揃っています。その点では自作アプリにかないません。

ただし自作の場合、自分が見たい項目だけをそのまま反映できるのが強みです。今回のように外部サービスを使わない形で作れば、広告なしにできますし、どのデータをどこに保存するかも自分で把握できます（今回はブラウザのlocalStorageのみに保存する前提でプロンプトを指定しました）。

読者が自分の家計簿アプリを作るためのプロンプト例

いきなり多機能を求めず、まずは最小限から始めるのがおすすめです。手順は、作業用フォルダを1つ作り、ターミナルで`cd “フォルダのパス”`（空白を含む場合はダブルクォートで囲む）と移動してから`claude`コマンドを起動し、以下のプロンプトを貼り付ける流れです。私が実際に使った最初のプロンプトを一般化したものです。


Claude Codeで、自分専用の家計簿アプリを作りたいです。

目的: 日々の支出・収入を記録して、収入合計・支出合計・収支差額を確認できるようにしたい
対象範囲: 今いる作業フォルダの中に、1つのHTMLファイルとして作成してください（ファイル名は提案してください）
最初のステップ: 日付・支出/収入の種類・カテゴリ・金額を入力するフォームと、入力した一覧を表示する部分だけを作ってください
データの保存先: ブラウザのlocalStorageのみ。外部サーバーへの通信、外部ライブラリやCDNの読み込みは行わないでください
今回は含めないもの: グラフ表示・削除機能・カテゴリの自動仕分けは、動作確認ができてから次の指示で追加します

実行前に、作成するファイル名・保存場所を教えてください。
不明点があれば推測せず、確認事項として列挙してください。

生成されたHTMLファイルは、Finder（Windowsの場合はエクスプローラー）からダブルクリックすればブラウザで開けます。ただし、ファイルを直接開く形（アドレスバーが`file://`から始まる状態）だと、ブラウザや設定によってはlocalStorageへの保存がうまく働かないことがあります。入力したデータが再読み込み後に消えてしまう場合は、「このフォルダをローカルサーバーで開く方法を教えてください」とClaude Codeに相談すると、簡易的な確認方法を提案してもらえます。

動作確認の際は、次のような点を1つずつチェックすると判断しやすいです。

データを入力して登録できるか
ブラウザを再読み込みしても、入力したデータが消えていないか
日付や金額を空のまま登録しようとしたとき、意図通り止まるか（この時点ではまだ実装していないなら、次のプロンプトで依頼する）

ブラウザやOS、Claude Codeのバージョンによって挙動が変わることもあります（本記事の内容は2026年9月時点で確認したものです）。うまく動かない場合は、金額や個人的な内容に加えて、ファイルパスに含まれるユーザー名やAPIキー・トークンのような情報も伏せたうえで、エラーメッセージを貼り付けて相談してみてください。