Cowork 2026年11月3日 8分で読めます

バイブコーディングで読書記録アプリを作った話｜試作の記録

バイブコーディングで読書記録アプリを作った話｜試作の記録

バイブコーディングで、自分用の読書記録アプリを作れないか。そう考えたきっかけは積読でした。何を持っていて何を読み終えたのか分からない。市販のアプリは機能が多すぎたり、入力が面倒だったりして続かない。

そこで今回、Claude Codeとのバイブコーディングで、読書記録アプリを試作してみました。3回の指示で、本の状態を進めながら管理できる形になりました。PCのブラウザで、登録・絞り込み・状態変更・削除などの主要な操作を確認しています（JSONの書き出し・読み込みとスマホ表示は未検証）。この記事では、実際に使ったプロンプト、初版で見つかった5つの問題、直したあとも残った課題を正直にまとめます。

※バイブコーディングは、自然言語でAIにコードの生成・修正を頼みながら開発を進める方法です。Google Cloudの解説では、AIの出力をそのまま受け入れる進め方と、生成コードをレビュー・テストしながら進める進め方が区別されています。この記事は後者で、毎回動作を確かめながら進めました。

バイブコーディングで読書記録アプリは作れるのか

結論から言うと、小さな読書記録アプリなら作れました。今回できたのは「本を登録して、積読・読書中・読了で絞り込み、状態を進め、編集・削除できる」ところまでです。

ただし、作ったのはHTMLファイル1つで動く最小限の試作です。バーコード読み取りや、書籍情報の自動取得、スマホとの同期は作っていません。また、まだ日常的に使い始めてはいないので、「続けられるか」はこれから確かめる段階です。

1回目のプロンプトと、見つかった5つの問題

最初にClaude Codeのチャット欄に貼ったのは、次の内容です。


読書記録アプリを作ってください。

項目: タイトル・著者・状態（積読/読書中/読了）・読了日・評価（★1〜5）・メモ
対象: 新しいHTMLファイル1つ（book-tracker.html）
データの保存先: ブラウザのlocalStorageのみ（外部サーバーへの通信は行わない）
画面: 状態別の絞り込みタブと、状態ごとの冊数を表示してください

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

入力フォーム、絞り込みタブ、冊数表示、本の一覧が並んだアプリができました。見た目は十分それらしいです。

できたHTMLファイルを、手元のPCだけで動く簡易サーバー（ローカルサーバー）経由で、Claude Codeデスクトップアプリの内蔵ブラウザから `http://localhost:8765/` で始まるURLで開きました（ポート番号は環境によって変わります）。開き方が分からなければ、Claude Codeに「book-tracker.html をローカルで開く方法を教えて」と聞けば、環境に合わせて案内してくれます。そこへ架空の本（サンプルの本A・著者「架空太郎」など）を登録して試すと、次の5つが見つかりました。

1. 空欄のまま登録できる。一覧に「/ 積読」だけの謎のカードが残りました。

2. メモに `太字` と書くと、本当に太字で表示される。入力がHTMLとして解釈されています。今回は太字で気づきましたが、入力の中身によってはJavaScriptが実行されるおそれもある書き方です。自分用でも、文字として表示する対策が必要です。

3. 「積読」なのに読了日を入れられる。データとして矛盾した状態が保存されます。

4. 同じ本を二重登録しても何も言われない。

5. 登録後に状態を変えられない。編集も削除もできないので、積読の本を「読書中」に移すことすらできません。

読書記録アプリで一番使うはずの「状態を進める」操作がない。これに気づいたのは実際に触ってからでした。最初の指示に「何をしたいか」まで書かないと、こうした抜けが起きやすいと感じます。

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

見つかった問題をそのまま伝えました。


book-tracker.html を次のように修正してください。

1. タイトルが空のときは登録できないようにし、エラーメッセージを表示してください
2. 入力した文字がHTMLとして解釈されないよう、表示前にエスケープしてください
3. 状態が「読了」のときだけ読了日を入力でき、読了にしたら今日の日付を自動で入れてください
4. 同じタイトルと著者の本がある場合、登録前に確認してください
5. 各本に「次の状態にする」「編集」「削除」ボタンをつけてください
6. 削除の前に、対象のタイトルと著者を表示して確認してください
7. 全データをJSONで書き出す・読み込むボタンをつけてください。読み込みで今のデータを置き換える前に、現在の冊数とファイルの冊数を表示して確認してください

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

修正版で同じテストをやり直すと、空欄登録はエラーになり、`太字` は文字のまま表示されました。「積読」を選ぶと読了日の欄は入力できなくなり、ボタン2回で「積読→読書中→読了」と進めると、読了日に当日の日付が入りました。重複登録と削除の前には、確認ダイアログが出ます。

3回目：古いデータだけボタンが効かなかった

ところが、1回目に登録した本だけ「次の状態にする」を押しても何も起きませんでした。

原因は、2回目の修正で各本に「ID」という識別番号を持たせるようになったことです。1回目に保存したデータにはIDがないため、ボタンがどの本を指しているか分からなくなっていました。

そこで、次のように頼みました。


初版で保存したデータにはidがないため、ボタンが効きません。
読み込み時にidがない本へidを付与してください。既存の本の内容は変更しないでください。

これで古い本も操作できるようになりました。データの形を変えると、過去に保存したデータが動かなくなることがある。小さなアプリでも起きるのは意外でした。

まだ残っている課題

正直に書くと、次の点は未解決、または未検証です。

1回目に登録された空欄の本や、「読書中なのに読了日あり」のデータは、修正後もそのまま残っています。既存データは自動では補正されないため、編集して保存し直すか、不要なら削除する必要があります
JSONの書き出し・読み込みは、まだ実際のファイルで試せていません。CodeXにコードを見てもらったところ、読み込み時の中身のチェックが「配列かどうか」だけで、評価がマイナスなどの不正な値やIDの重複は防げないと指摘されました（未修正）
スマホでの表示や使い心地も、まだ確認していません

また、localStorageはブラウザ（プロファイル）と、開いたURLのオリジン（プロトコル・ホスト・ポートの組み合わせ）ごとに保存されます。別のブラウザやポートで開くと、記録は見えません。毎回同じブラウザ・同じURLで開くようにしてください。HTMLファイルをダブルクリックで直接開いた場合の保存のされ方はブラウザによって異なるため、ローカルサーバー経由で開くほうが安心です。MDNによると、ブラウザは端末の空き容量が少ないときにサイトのデータを消すことがあり、プライベートブラウズでは終了時に消えるのが一般的です。大事な記録は、書き出したJSONで正しく復元できることを一度確かめたうえで、こまめに退避するのがおすすめです（2026年11月時点の確認）。

読書記録アプリを作るプロンプト例と確認手順

ここまでの学びを1つにまとめたプロンプトです。項目は自分の使い方に合わせて書き換えてください。


読書記録アプリを作りたいです。まず作業計画を提示し、私が確認してから実装してください。

目的: 積読・読書中・読了を管理し、状態を順に進められるようにする
対象: 新しいHTMLファイル1つ（book-tracker.html）。既存ファイルは変更しない
項目: タイトル（必須）・著者・状態・読了日・評価（★1〜5）・メモ
保存先: ブラウザのlocalStorageのみ（外部サーバーへの通信は行わない）

必要な機能:
- 状態別の絞り込みタブと、状態ごとの冊数表示
- 空欄チェック、表示前のエスケープ
- 読了にしたら読了日を自動入力。読了以外では読了日を入力不可
- 重複登録の確認、各本の「次の状態にする」「編集」「削除」
- JSONでの書き出し・読み込み。読み込み時は全件の項目・値・IDの重複を検証し、不正なデータは置き換え前に拒否する
- 将来データの形を変えても、古いデータを読み込めるようにする

削除・上書き・読み込みによるデータ置き換えなどの変更を実行する前に、対象と件数、影響範囲を表示し、私が確認してから実行する仕組みにしてください。キャンセルや検証失敗のときは、既存の記録を変更しないでください。
実装後、架空のデータで試すテスト手順も提示してください。「削除やJSON置き換えをキャンセルしても記録が変わらないこと」の確認も含めてください。
不明点は推測せず、確認事項として列挙してください。

テストには、実在の個人名などではなく架空のデータを使うと安心です。

この記事のまとめ

小さな読書記録アプリなら、バイブコーディングで3回の指示で動く形にできた
初版は「動く」けれど、空欄登録・HTML解釈・状態変更できないなど5つの問題があった
「何をしたいか（状態を進めたい）」まで最初に書くと、抜けを減らせそう
データの形を変えると、古いデータが動かなくなることがある
古い不正データの掃除、JSON読み込みの検証強化、スマホ確認はまだこれから

今回は、コードを自分で書かずに「触って、気づいて、伝える」を繰り返し、試作を動かせました。まずは架空の本を3冊登録するところから試してみてください。

学習アプリについて

「触って、気づいて、直す」流れを手を動かして学べる学習アプリ（app.maahsachi.com）を公開準備中です。公開したらこのブログでお知らせします。

参考

[vibe コーディングとは（Google Cloud）](https://cloud.google.com/discover/what-is-vibe-coding?hl=ja)
[Storage quotas and eviction criteria（MDN）](https://developer.mozilla.org/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)