ChatGPTで「執筆ハビットトラッカー」を作ってみた！（プロンプト付き）

ジャーナリング、note、小説、日記……。
毎日いろんなものを書いていると、時々「あ、これ忘れてた！」ってなりませんか？ 「あと何やるんだっけ……？」ってなりませんか？

わたしはなります！！

なので、バイブコーディングで「執筆ハビットトラッカー」を作ってみました。これを開けば、毎日何を書きたいのか、どれをやったのか、一目瞭然です。プロンプトを貼るので、よかったら使ってみてください。

▼こんなのができます（31日分まで、パソコンで1画面に収まります）

▼プロンプト（コピペでAIに投げればOKです）

以下の条件で、HTML・CSS・JavaScriptだけで動く、シンプルな「執筆ハビットトラッカー」のWebアプリを作ってください。

前提
1つの html ファイルだけで完結する形にしてください
初心者向けに、ファイルをそのまま保存してブラウザで開けば動くようにしてください
HTML、CSS、JavaScriptはすべて1ファイル内にまとめてください
ローカル環境で動作するようにしてください
データは localStorage に保存し、ブラウザを閉じても内容が残るようにしてください

必須機能
アプリ名は 「執筆ハビットトラッカー」
上部に 年 と 月 を入力する欄をつけてください
年月を保存できるようにしてください
初期化ボタン をつけてください
初期化ボタンを押したときは、実行前に confirm() で確認を表示してください
表は、縦軸がタスク、横軸が1〜31の日付 になるようにしてください
タスクは複数行持てるようにしてください
タスク行は追加できるようにしてください
タスク名は自由に編集できるようにしてください
タスク名は通常表示時はテキスト表示にして、ダブルクリックで編集モードに入るようにしてください
編集中に Enterで確定、Escapeでキャンセル できるようにしてください
タスク名を空欄にして確定した場合は、そのタスク行を削除する仕様にしてください
タスク名の下に補助テキストや説明文は表示しないでください
各マス目をクリックすると、水色の丸 がつくようにしてください
もう一度クリックすると、その丸が消えるようにしてください
丸の状態も localStorage に保存してください

見た目
シンプルでやさしい見た目にしてください
白ベースで、少しやわらかい印象にしてください
マス目は表形式で見やすくしてください
タスク列は左に固定、日付行は上に固定すると見やすいです
丸の色は水色にしてください
全体的に、手帳やハビットトラッカーのような、静かで使いやすい雰囲気にしてください

初期状態
初期タスクとして、以下の3つを入れてください
・ジャーナリング
・note
・小説
年と月は、最初は現在の年月を自動で入れてください

実装上の注意
ライブラリは使わず、素のHTML/CSS/JavaScriptだけで作ってください
できるだけコードを読みやすくしてください
コメントを適度に入れて、初心者にも分かりやすい形にしてください

出力形式
完成したコードを、最初から最後まで省略せずに、1つのコードブロックで全文出力してください
その後に、初心者向けに以下を簡単に説明してください
・どう保存するか
・どう開くか
・どこを変えると見た目や初期タスクを調整できるか

ハビットトラッカー上の記録は、ブラウザを閉じても保存されます。
なので、完成後のURLをブックマークしておくと便利です！

▼ちなみに、最初はこんなのを作りました

▽プロンプトをまとめると大体こんな感じ。

HTML、CSS、JavaScriptだけで動く、シンプルな自分用ことばメモアプリを作ってください。
機能は「入力欄」「追加ボタン」「一覧表示」「削除ボタン」だけで大丈夫です。
初心者向けに、ファイルをそのまま保存してブラウザで開けば動く形にしてください。
ブラウザを閉じても消えない保存機能もほしいです。

最初は、どこにどう保存してどうブラウザで開くか分からなかったので、ChatGPTに「ブラウザで開けません。保存の仕方が問題ですか？」と雑に聞きました。これだけで懇切丁寧に教えてくれます！

▼かんばんタスク管理アプリも作りました（使ってないけど）

というわけで、バイブコーディング、楽しいです！
わたしは日中、パソコンがお供なので、「スマホアプリあるけどいちいち開かないんだよな……」みたいなツールは、できればパソコンに移していきたいです。スマホデトックスにも寄与しそうだし。

この記事がどなたかのバイブコーディングデビューにつながりますように！

▼こんな記事もあります

▼初めて来た方へ