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

バイブコーディングで習慣化アプリを試作した話｜日付の落とし穴

バイブコーディングで習慣化アプリを試作した話｜日付の落とし穴

バイブコーディングで、自分用の習慣化アプリを作れないか。そう考えたのは、市販の習慣アプリが続かなかったからです。機能が多すぎたり、通知がうるさかったりして、気づけば開かなくなっていました。

そこで今回、Claude Codeとのバイブコーディングで「習慣トラッカー」を試作しました。2回の指示で、チェック・連続日数・直近7日の記録が動く形になりました。ただ、初版には朝にボタンを押すと、前日の記録が消えるという、気づきにくい問題が潜んでいました。

この記事では、実際に使ったプロンプト、見つかった5つの問題、まだ決めきれていないことを正直にまとめます。

※バイブコーディングは、自然言語でAIにコードの生成・修正を頼みながら開発を進める方法です。今回は、生成されたコードを毎回動かして確かめながら進めました。

バイブコーディングで習慣化アプリは作れるのか

結論から言うと、小さな習慣トラッカーなら作れました。できたのは「習慣を登録し、毎日チェックし、連続日数と直近7日の記録を見る」ところまでです。

作ったのはHTMLファイル1つで動く最小限の試作で、通知やスマホ同期はありません。検証はPCのブラウザで、架空の習慣（「10分読書」など）を使って行いました。まだ毎日使い始めてはいないため、「本当に続くか」はこれから確かめる段階です。

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

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


習慣トラッカーを作ってください。

目的: 毎日の習慣をチェックし、続いている日数を見えるようにする
対象: 新しいHTMLファイル1つ（habit-tracker.html）。既存ファイルは変更しない
機能: 習慣の追加、「今日やった」ボタン、連続日数の表示、直近7日のチェック状況
保存先: ブラウザのlocalStorageのみ（外部サーバーへの通信は行わない）

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

入力欄と習慣のカード、7日分の丸が並ぶアプリができました。

これを、手元のPCだけで動く簡易サーバー（ローカルサーバー）経由でブラウザから開きます。私はClaude Codeデスクトップアプリの内蔵ブラウザを使いました。Python 3が入っている環境なら、ターミナルで次のように起動できます（`habit-app` はHTMLを置いたフォルダ名の例です。macOSでは `python3`、Windowsでは `python` や `py` の場合があります）。


cd habit-app
python3 -m http.server 8000 --bind 127.0.0.1

`–bind 127.0.0.1` は、同じPCからだけ開けるようにする指定です。ブラウザで `http://127.0.0.1:8000/habit-tracker.html` を開き、終わったらターミナルで `Ctrl+C` を押して止めます。Pythonがない、またはWindowsでうまくいかない場合は、Claude Codeに「habit-tracker.html をローカルで開く方法を教えて」と聞けば、環境に合わせた方法を案内してくれます。

架空の習慣で試すと、次の5つが見つかりました。

1. 空欄のまま習慣を追加できる。名前のないカードが残りました。

2. 名前に `ストレッチ` と書くと太字になる。入力がHTMLとして解釈されています。中身によってはスクリプトが動くおそれもある書き方です。

3. 同じ名前の習慣を二重に登録できる。

4. 今日まだチェックしていないと「0日連続」になる。前日まで3日続けていても、夜にチェックするまで0日のままです。三日坊主対策のはずが、かえってやる気をそぎます。

5. 前日にチェックした翌朝7時半に開くと、まだ何もしていないのに「チェック済み」と表示される。しかも、ボタンを押すと前日の記録が消えました。

5つ目は、昼間に短時間触るだけでは気づきにくい問題です。ブラウザの開発者向け機能（コンソール）で、ページ内の日時を「翌朝7時半」に差し替えるコードを実行して、初めて見つかりました。この差し替えはページを再読み込みすると元に戻ります。やり方が分からなければ、Claude Codeに「時刻を指定して表示を確認するテスト方法を教えて」と頼むのが早いです。

朝に記録が消えた原因は「日付の作り方」

原因は、`toISOString()` という関数で作った日時の「日付部分」を、そのまま「今日の記録」の目印に使っていたことです。MDNの説明によると、この関数は常にUTC（協定世界時）で日時を返します。

日本時間はUTCより9時間進んでいます。そのため、日本時間の0時以上9時未満は、UTCではまだ前日です。朝7時半に「今日の日付」を作ると前日の日付になり、アプリは「前日のチェック＝今日のチェック」と勘違いしていました。そこでボタンを押したので、前日の記録を外してしまったわけです。

昼や夜に試すだけでは、この問題は再現しません。日付を扱うアプリは、深夜〜早朝の時間帯も確かめる必要があると学びました。

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

5つの問題の修正に加えて、つけ忘れ対策、削除前の確認、データを見分けるためのidも頼みました。


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

1. 名前が空（空白だけを含む）のときは追加できないようにし、メッセージを表示してください
2. 入力した文字がHTMLとして解釈されないよう、表示前にエスケープしてください
3. 同じ名前の習慣がある場合、追加前に確認してください
4. 日付は端末のローカル時刻で作ってください（toISOStringはUTCになるため使わない）
5. 今日が未チェックなら、連続日数は昨日から数えて「○日連続（今日はまだ）」と表示してください
6. 直近7日の丸をクリックして、つけ忘れた日の記録を付け外しできるようにしてください。未来の日付は記録できないようにしてください
7. 削除の前に、習慣の名前と記録の日数を表示して確認してください
8. 各習慣にidを持たせ、idのない古いデータには読み込み時に付与してください。既存の記録は変更しないでください

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

修正版で同じテストをやり直しました。空欄はメッセージが出て追加されず、`ストレッチ` は文字のまま表示されました。時刻を夜8時にすると「3日連続（今日はまだ）」と表示されました。前日までチェック済みの状態で翌朝7時半にすると、「3日連続（今日はまだ）」の未チェック表示になり、押すと前日の記録を残したまま「4日連続」になりました。1回目に保存したデータにもidが付き、そのまま操作できました。

まだ決めきれていないこと

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

**1日休むと連続記録が途切れる**。仕様どおりですが、次にやった日は「1日連続」から再スタートになり、なかなかつらいです。Lallyらの2009年の研究を紹介した記事によると、自動化の度合いが頭打ちになるまでの平均は約66日（個人差が大きい）で、1日抜けても大きな影響は見られなかったそうです。「直近7日で何日できたか」を主役にするか、まだ迷っています
**過去の丸を付け外しできるのは、自分に甘くもできる**。つけ忘れ対策として入れましたが、使い方次第です
1回目に追加した名前のない習慣は、修正後も残っています。既存データは自動では直らないため、手で削除が必要です
データの書き出し・読み込み（バックアップ）とスマホ表示は、まだ作っていない・確認していません
ページを開いたまま午前0時をまたいだときの表示も、まだ確かめていません

また、localStorageはブラウザ（プロファイル）と、開いたURLのオリジン（プロトコル・ホスト名・ポートの組み合わせ）ごとに保存されます。別のブラウザで開いたり、ポート番号や `localhost` と `127.0.0.1` を変えたりすると、以前の記録は見えません。毎回同じブラウザ・同じURLで開いてください。MDNによると、端末の空き容量が少ないときにブラウザがデータを消すこともあります（2026年11月時点の確認）。大事な記録なら、バックアップ機能を足してからのほうが安心です。

習慣化アプリを作るプロンプト例

ここまでの学びを1つにまとめたプロンプトです。習慣の内容や表示は、自分に合わせて書き換えてください。


習慣トラッカーを作りたいです。まず作業計画を提示し、私が確認してから実装してください。

目的: 毎日の習慣をチェックし、続いている日数と最近の達成状況を見えるようにする
対象: 新しいHTMLファイル1つ（habit-tracker.html）。既存ファイルは変更しない
保存先: ブラウザのlocalStorageのみ（外部サーバーへの通信は行わない）

必要な機能:
- 習慣の追加（前後の空白を除いて空なら不可・重複は確認）
- 習慣名は文字として表示し、HTMLとして解釈させない（読み込んだデータも同様）
- 「今日やった」ボタン、直近7日の記録（つけ忘れた日は付け外し可、未来の日付は不可）
- 連続日数（今日が未チェックなら昨日から数える）と、直近7日の達成日数
- 日付は端末のローカル時刻で作る（toISOStringは使わない）
- 全データのJSON書き出し・読み込み（読み込みは既存データの置き換え）。読み込み時は項目の型・idの重複・日付の形式を検証し、日付が実在しない・未来日を含むなど不正な場合は読み込みを中止して既存データを変更しない

削除や読み込みによるデータの置き換えを実行する前に、対象の習慣名、現在と読み込み後の習慣数・記録数などの影響範囲を表示し、私が確認してから実行する仕組みにしてください。キャンセル時は記録を変更しないでください。
実装後、架空のデータで試すテスト手順を提示してください。「深夜0時〜朝9時の時間帯でも日付が正しいか」「開いたまま0時をまたいだ場合」「再読み込み後も記録が残るか」「削除・読み込みをキャンセルしても変化しないか」の確認方法も含めてください。
不明点は推測せず、確認事項として列挙してください。

テストの習慣名は、実在の個人名などを避けた架空のもので十分です。

この記事のまとめ

小さな習慣化アプリなら、バイブコーディング2回の指示で動く形にできた
初版は空欄登録・HTML解釈・重複・0日表示など、5つの問題があった
一番怖かったのは、UTCで日付を作ったせいで朝に前日の記録が消える問題
日付を扱うアプリは、深夜〜早朝の時間帯もテストする
連続日数のリセットのつらさ、バックアップ、スマホ確認はまだこれから

コードを自分で書かなくても、「触って、気づいて、伝える」を繰り返せば試作は動きました。まずは架空の習慣を1つ登録して、翌朝にもう一度開いてみてください。

学習アプリについて

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

参考

[vibe コーディングとは（Google Cloud）](https://cloud.google.com/discover/what-is-vibe-coding?hl=ja)
[Date.prototype.toISOString()（MDN）](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
[How Long To Form A Habit? 66 Days Is A Rough Average（PsyBlog）](https://www.spring.org.uk/2023/01/form-a-habit.php)
[Storage quotas and eviction criteria（MDN）](https://developer.mozilla.org/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)