2026年10月16日

「ChatGPTでWebアプリを作れたけれど、もっと便利にしたい！」

「学習時間をグラフで見える化したい！」

「登録した記録を後から編集できるようにしたい！」

そんな方に向けて、今回はChatGPTを使って、すでに完成したWebアプリを改良する方法を初心者向けに解説します。

「バイブコーディング超入門講座」第5回では、第4回で作成した「わたしの学習時間記録」をさらに進化させます。

学習日の記録、カテゴリ管理、日付・カテゴリ別の絞り込み、週間学習時間の棒グラフ、記録の編集機能などを、ChatGPTと一緒に追加していきましょう。

さらに、スマートフォンでも使いやすいデザインへの改善や、localStorageによるデータ保存、JSONバックアップ、エラーへの対処方法も紹介します。

プログラミング初心者でも取り組みやすいように、ChatGPTへ送る具体的なプロンプト例と動作確認の手順を掲載しています。

AIと会話しながら、既存のアプリを少しずつ改良する「バイブコーディング」を体験してみましょう！

こんにちは！

「バイブコーディング超入門講座」第5回へようこそ。

第4回では、ChatGPTを使って「わたしの学習時間記録」というWebアプリを作りました。

今回は、そのアプリを土台にして、次の機能を追加します。

• 学習した日付の記録
• 学習カテゴリの管理
• 日付・カテゴリによる絞り込み
• 週間学習時間の棒グラフ
• 登録済み記録の編集
• デザインの改善
• スマートフォン向けの表示調整

大切なのは、最初から作り直すのではなく、既存の機能を残しながら少しずつ改良することです。

この記事では、18枚のスライドに沿って、ChatGPTへのプロンプト例、操作手順、動作確認方法を解説します。

---

この記事で学べること

この記事を読み終えると、次のことができるようになります。

1. ChatGPTに既存アプリの改良を依頼できる
2. 学習日とカテゴリを追加できる
3. 記録を日付やカテゴリで整理できる
4. 学習時間を棒グラフで表示できる
5. 登録済みの記録を編集できる
6. アプリのデザインを改善できる
7. データを保護しながら改良できる
8. エラーが出たときにAIと一緒に解決できる

今回の準備物

• パソコン
• インターネット接続
• ChatGPT
• 第4回で作成した study-log.html
• HTMLファイルを編集できるテキストエディタ
• ChromeやEdgeなどのWebブラウザ

今回は、HTML・CSS・JavaScriptを1つのファイルにまとめる構成を維持します。

特別な開発ソフトを大量にインストールする必要はありません。

サンプルアプリについて

今回の記事には、第5回版のサンプルHTMLファイルも用意しています。

サンプルファイル：study-log-v5.html

このファイルには、日付・カテゴリ・絞り込み・週間棒グラフ・編集・JSONバックアップなどの機能が含まれています。

記事内のプロンプトを順番に試す方法と、サンプルアプリのコードを参考にする方法の、どちらでも学習できます。

ただし、サンプルは第4回のコードを直接改造したものではなく、第5回の完成目標に合わせて作成した独立した実装例です。

第4回の記録を引き継ぐ場合は、後述するバックアップとデータ移行の注意点を必ず確認してください。

---

準備編：アプリ改良の基本を学ぼう

① AIと一緒にアプリを進化させよう！

第5回のテーマは「アプリを育てること」

第4回では、ChatGPTにお願いして、新しいWebアプリを作成しました。

今回は、そのアプリに機能を追加していきます。

例えば、

「学習日を記録したい」

「英語の勉強だけを表示したい」

「1週間の学習時間をグラフにしたい」

といった希望をAIに伝えます。

ChatGPTは、その希望を実現するためのコードを提案してくれます。

このように、AIと会話しながらアプリを改良することも、バイブコーディングの大切な活用方法です。

今回の進め方

今回の作業は、次の順番で進めます。

1. 現在のアプリを確認する
2. バックアップを取る
3. ChatGPTに改良を依頼する
4. 新しいコードを保存する
5. アプリを動かす
6. 正しく動くか確認する
7. 必要に応じて修正する

一度にすべての機能を追加する必要はありません。

1つ追加したら、1つ確認する。

この習慣を身につけましょう。

---

② 第4回で作ったアプリを振り返ろう！

第4回のアプリでできること

前回作った「わたしの学習時間記録」には、次の機能がありました。

• 学習内容を入力する
• 学習時間を分単位で入力する
• 記録を一覧表示する
• 合計学習時間を計算する
• 不要な記録を削除する
• localStorageにデータを保存する
• JSONファイルでバックアップする
• JSONファイルからデータを復元する

ファイル名は、次のとおりです。

study-log.html

このアプリは、学習時間を記録するための基本的な機能を備えています。

使い続けると見えてくる課題

しかし、毎日使っていると、次のような不便さに気づくかもしれません。

「いつ勉強したのか分からない」

「英語の学習時間だけを確認したい」

「先週と今週の学習時間を比較したい」

「入力を間違えたときに修正したい」

こうした不便さが、アプリを改良するきっかけになります。

プログラミングでは、実際に使って問題を見つけ、改善することが重要です。

---

③ 今回追加する5つの便利機能

今回は、次の5つを中心に改良します。

1．学習日の記録

学習した日付を保存できるようにします。

例えば、「3月15日に英語を30分勉強した」と記録できます。

2．学習カテゴリの管理

学習内容をカテゴリ別に分類します。

カテゴリの例は次のとおりです。

• プログラミング
• 英語
• 数学
• 読書
• その他

3．週間学習時間の棒グラフ

月曜日から日曜日までの学習時間を棒グラフで表示します。

毎日の学習状況を視覚的に確認できます。

4．登録済み記録の編集

登録した学習時間や内容を、後から修正できるようにします。

5．デザインの改善

配色やボタンの大きさを変更し、スマートフォンでも操作しやすい画面を目指します。

今回作る機能と今後のアイデアを区別しよう

今回の必須機能は、上記の5つと、日付・カテゴリによる絞り込みです。

一方、カレンダー形式の表示、円グラフ、目標時間、リマインダーなどは、今後の機能追加アイデアとして扱います。

スライドに登場する画面イメージが、すべて今回の完成版に含まれるわけではありません。

---

④ 改良前にバックアップを取ろう！

バックアップが必要な理由

アプリを改良すると、予想外の不具合が発生することがあります。

例えば、

• 記録ボタンが動かなくなる
• 保存済みの記録が表示されなくなる
• 合計時間が正しく計算されなくなる
• デザインが崩れる

といった問題です。

改良前の状態を保存しておけば、問題が起きても元に戻しやすくなります。

手順1：HTMLファイルをコピーする

第4回で作ったファイルをコピーします。

元のファイル：

study-log.html

バックアップ用：

study-log-backup.html

第5回の作業用：

study-log-v5.html

元のファイルを直接上書きせず、コピーしたファイルを編集しましょう。

手順2：JSONバックアップを保存する

第4回のアプリを開き、JSONバックアップ機能を使って記録を保存します。

例えば、次の名前で保存します。

study-log-v4-backup.json

HTMLとJSONの違い

ファイル	保存する内容
HTML	アプリの画面・デザイン・処理
JSON	登録した学習記録

この2種類は、役割が異なります。

HTMLだけを保存しても、学習記録のバックアップにはならない場合があります。

必ず両方を保存しましょう。

localStorageに関する注意

localStorageは、ブラウザ内にデータを保存する仕組みです。

ただし、HTMLファイルを直接開く file:// 形式では、ブラウザによって保存の扱いが異なります。

ファイル名や保存場所、使用するブラウザが変わると、以前の記録が表示されないことがあります。

また、第4回と第5回でlocalStorageの保存キーが異なる場合、記録は自動的には引き継がれません。

そのため、今回はJSONバックアップを使ってデータを移行する方法を基本とします。

---

⑤ AIに機能追加をお願いするコツ

AIへの指示で大切なこと

新しいアプリを作る場合と、既存のアプリを改良する場合では、プロンプトの書き方が少し異なります。

既存のアプリを改良するときは、次の情報を伝えましょう。

1. 現在のアプリでできること
2. 新しく追加したい機能
3. 変更してほしくない機能
4. 保存データの扱い
5. 完成コードの出力形式
6. 動作確認の方法

最初にChatGPTへ送るプロンプト

あなたは、プログラミング初心者に
Webアプリ開発を教える先生です。

第4回で作成した学習時間記録アプリを改良したいです。

現在の機能：
・学習内容の入力
・学習時間の入力
・記録の追加と削除
・合計学習時間の計算
・localStorageへの保存
・JSONバックアップと復元

これらの機能を維持したまま、
新しい機能を1つずつ追加してください。

条件：
1. HTML・CSS・JavaScriptを1つのHTMLファイルにまとめる
2. 外部ライブラリは使用しない
3. 初心者にも分かりやすいコードにする
4. 既存データとの互換性に配慮する
5. 変更した内容を説明する
6. 動作確認の方法を説明する
7. 完成したHTMLコードを省略せずに出力する

現在のHTMLコードをこの後に貼り付けます。

まずコードを確認し、
現在の機能とデータ保存形式を説明してください。

この後に、第4回のHTMLコードを貼り付けます。

いきなり修正させない方法もおすすめ

最初は、コードを変更せずに内容を確認してもらうと安全です。

特に、localStorageの保存キーやJSONデータの形式を確認しておくと、後のデータ移行がスムーズになります。

---

機能追加編：アプリを便利にしよう

⑥ 学習日を記録できるようにしよう！

学習日を追加するメリット

これまでは、学習内容と時間だけを記録していました。

ここに日付を追加すると、

「3月15日に英語を30分」

「3月16日にプログラミングを60分」

というように、学習履歴を管理できます。

ChatGPTへの追加指示

現在の学習時間記録アプリに、
学習日を登録する機能を追加してください。

要件：
・日付入力欄を追加する
・初期値は今日の日付にする
・過去の日付も選択できるようにする
・記録一覧に日付を表示する
・localStorageにも日付を保存する
・既存の機能を維持する
・古い記録に日付がない場合は
  「日付未設定」として扱う
・日付がない記録に勝手に今日の日付を付けない

完成コードと動作確認手順を出力してください。

HTMLの日付入力欄

日付入力には、次のようなHTMLを使用できます。

<label for="studyDate">学習日</label>
<input type="date" id="studyDate">

type="date" を指定すると、対応するブラウザでは日付を選択するための操作画面が表示されます。

動作確認

次の操作を試しましょう。

1. 学習日を選択する
2. 学習内容を入力する
3. 学習時間を入力する
4. 記録を追加する
5. 一覧に日付が表示されるか確認する
6. 再読み込みしても日付が残るか確認する

これで学習日の追加は完了です。

---

⑦ 学習カテゴリを追加しよう！

カテゴリがあると整理しやすい

学習内容をカテゴリ別に管理できると、どの分野をどれくらい勉強したのかが分かりやすくなります。

今回は、次の5種類を用意します。

• プログラミング
• 英語
• 数学
• 読書
• その他

ChatGPTへの追加指示

学習時間記録アプリに、
カテゴリ選択機能を追加してください。

カテゴリ：
・プログラミング
・英語
・数学
・読書
・その他

要件：
・入力フォームに選択欄を追加する
・記録一覧にカテゴリを表示する
・localStorageにも保存する
・カテゴリごとに色分けする
・古い記録にカテゴリがない場合は
  「その他」として扱う
・既存機能を維持する

完成コードと動作確認手順を出力してください。

HTMLの選択欄

<label for="category">学習カテゴリ</label>

<select id="category">
  <option value="プログラミング">プログラミング</option>
  <option value="英語">英語</option>
  <option value="数学">数学</option>
  <option value="読書">読書</option>
  <option value="その他">その他</option>
</select>

動作確認

「英語」を選択して記録を追加し、一覧にも「英語」と表示されるか確認します。

ページを再読み込みしてもカテゴリが残っていれば成功です。

---

⑧ 日付・カテゴリ別に記録を整理しよう！

記録が増えたときに便利な機能

毎日学習を記録していると、一覧が長くなってきます。

そこで、次の機能を追加します。

• 日付の新しい順に並べ替える
• 日付の古い順に並べ替える
• カテゴリで絞り込む
• 指定した期間の記録だけを表示する

ChatGPTへの追加指示

学習時間記録アプリの記録一覧に、
並べ替えと絞り込み機能を追加してください。

要件：
・日付の新しい順と古い順を選べる
・カテゴリ別に絞り込める
・開始日と終了日を指定できる
・カテゴリと期間を組み合わせて絞り込める
・絞り込みを解除するボタンを追加する
・該当する記録がない場合はメッセージを表示する
・全記録の合計と絞り込み結果の合計を区別する
・既存の機能を維持する

完成コードと動作確認手順を出力してください。

動作確認用の記録

次の4件を登録します。

日付	カテゴリ	学習内容	時間
3月12日	数学	問題集	45分
3月14日	英語	英単語	30分
3月15日	プログラミング	Webアプリ開発	60分
3月16日	英語	リスニング	25分

カテゴリで「英語」を選択すると、英語の2件だけが表示されるはずです。

英語の合計時間は、

30分 ＋ 25分 ＝ 55分

です。

全体の合計と絞り込み結果の合計

ここで注意したいのが、合計時間の意味です。

全記録の合計は160分です。

一方、英語で絞り込んだ場合の合計は55分です。

この2つを区別して表示すると、読者にも分かりやすいアプリになります。

---

⑨ 学習時間をグラフで見える化しよう！

グラフを追加する理由

学習時間が数字だけで表示されていると、日ごとの違いが分かりにくいことがあります。

グラフにすると、

「どの日にたくさん勉強したのか」

「学習時間が増えているのか」

を直感的に確認できます。

今回は棒グラフを使う

棒グラフは、数値の大小を比較するのに適したグラフです。

例えば、

曜日	学習時間
月	30分
火	60分
水	45分
木	90分
金	75分

というデータがあれば、木曜日の棒が最も高くなります。

ChatGPTへの追加指示

学習時間記録アプリに、
日別の学習時間を棒グラフで表示する機能を追加してください。

要件：
・HTML・CSS・JavaScriptだけで作る
・外部ライブラリは使用しない
・保存済みの学習記録から日別に集計する
・学習時間に応じて棒の高さを変える
・各棒に学習時間を表示する
・記録の追加・編集・削除で自動更新する
・記録がない場合もエラーにならない
・既存の機能を維持する

完成コードと動作確認手順を出力してください。

グラフで気をつけたいこと

棒の高さだけでなく、学習時間の数値も表示すると、正確な時間が分かります。

また、0分の日をどう表示するかも決めておきましょう。

---

⑩ 週間学習時間の棒グラフを作ろう！

今週の学習時間を確認する

次は、月曜日から日曜日までの1週間を表示する棒グラフを作ります。

例えば、次のようなデータです。

曜日	学習時間
月	60分
火	90分
水	45分
木	120分
金	80分
土	100分
日	70分

この場合、週間合計は565分です。

時間に直すと、9時間25分です。

ChatGPTへの追加指示

学習時間の棒グラフを改良し、
今週の学習時間を月曜日から日曜日まで
表示できるようにしてください。

要件：
・週の開始日は月曜日とする
・月曜日から日曜日まで7本の棒を表示する
・同じ日に複数の記録があれば合計する
・記録がない日は0分として表示する
・今週以外の記録は集計に含めない
・棒の近くに学習時間を表示する
・週間合計も表示する
・追加・編集・削除でグラフを更新する
・外部ライブラリは使用しない
・既存機能を維持する

完成コードと動作確認手順を出力してください。

動作確認のポイント

• 曜日が月曜日から日曜日の順番になっているか
• 同じ日の記録が正しく合計されているか
• 学習していない日が0分になっているか
• 今週以外の記録が混ざっていないか
• 記録を変更するとグラフが更新されるか

日付と曜日の対応は、必ず実際のカレンダーと照らし合わせて確認しましょう。

---

⑪ 記録を後から編集できるようにしよう！

編集機能が必要な理由

例えば、60分勉強したのに、間違えて30分と登録してしまったとします。

これまでは、記録を削除して登録し直す必要がありました。

編集機能があれば、既存の記録をそのまま修正できます。

ChatGPTへの追加指示

学習時間記録アプリに、
登録済み記録の編集機能を追加してください。

要件：
・記録一覧に「編集」ボタンを追加する
・学習日、カテゴリ、学習内容、時間を変更できる
・保存とキャンセルの操作を用意する
・保存すると一覧と合計時間を更新する
・週間グラフにも変更を反映する
・編集結果をlocalStorageに保存する
・記録ごとに一意のIDを使用する
・他の記録を誤って変更しないようにする
・既存機能を維持する

完成コードと動作確認手順を出力してください。

なぜ記録ごとのIDが必要なの？

編集機能では、どの記録を変更するのかを正確に判断する必要があります。

例えば、同じ日に「英語30分」という記録が2件あるかもしれません。

学習内容だけで区別すると、別の記録を変更してしまう可能性があります。

そこで、各記録に一意のIDを付けます。

動作確認

次の記録を登録します。

• カテゴリ：プログラミング
• 学習内容：Webアプリ開発
• 学習時間：60分

次に編集ボタンを押し、学習時間を90分に変更します。

保存後、次の点を確認します。

1. 記録一覧が90分になっている
2. 合計時間が30分増えている
3. グラフにも変更が反映されている
4. 再読み込み後も90分になっている

すべて確認できれば成功です。

---

⑫ 追加した機能を動作確認しよう！

AIが作ったコードもテストが必要

ChatGPTが作成したコードは便利ですが、必ず正しく動くとは限りません。

そのため、機能を追加した後は動作確認を行います。

動作確認チェックリスト

確認項目	期待する動作
記録の追加	新しい記録が表示される
学習日	選んだ日付が保存される
カテゴリ	選択したカテゴリが表示される
並べ替え	日付順を変更できる
絞り込み	条件に合う記録だけ表示される
合計時間	正しい数値になる
週間グラフ	今週の学習時間が表示される
編集	登録済みの記録を変更できる
削除	指定した記録だけ削除される
保存	再読み込み後も記録が残る
JSON出力	バックアップファイルを保存できる
JSON復元	バックアップを読み込める

数字を使って確認する

次の3件を、同じ週の月曜日と火曜日に登録してみましょう。

曜日	内容	時間
月曜日	英語	30分
火曜日	プログラミング	45分
火曜日	読書	20分

全体の合計は、

30 ＋ 45 ＋ 20 ＝ 95分

です。

週間グラフでは、

• 月曜日：30分
• 火曜日：65分

となるはずです。

次に、英語30分を60分に編集します。

全体の合計は125分になります。

さらに、読書20分を削除すると、全体の合計は105分になります。

このように、答えが分かっているデータを使って確認する方法がおすすめです。

---

仕上げ編：使いやすく、安全なアプリにしよう

⑬ AIと一緒にデザインを変更しよう！

デザインもChatGPTに相談できる

アプリの機能が完成したら、見た目を改善しましょう。

例えば、

「全体を青色で統一したい」

「ボタンを丸くしたい」

「入力欄を見やすくしたい」

といった希望をAIに伝えます。

ChatGPTへの追加指示

学習時間記録アプリのデザインを改善してください。

希望するデザイン：
・明るく清潔感のある青色テーマ
・大きく読みやすい見出し
・角が丸いボタン
・余白を十分に取った入力欄
・カテゴリの色分け
・見やすい記録一覧
・統一感のある棒グラフ

重要：
・JavaScriptの機能は変更しない
・保存済みのデータを削除しない
・記録の追加・編集・削除機能を維持する
・localStorageの保存キーを変更しない

完成コードと変更点を出力してください。

デザイン変更は少しずつ進める

最初からすべてのデザインを変える必要はありません。

まずは背景色やボタンの色を変更します。

次に、文字の大きさや余白を調整します。

最後に、スマートフォンでの表示を確認します。

デザインを変更した後も、必ず記録の追加や編集が動くか確認してください。

---

⑭ スマートフォンでも使いやすくしよう！

スマートフォン対応が重要な理由

学習時間記録アプリは、パソコンだけでなくスマートフォンでも使えると便利です。

例えば、勉強が終わった直後に、その場で記録できます。

しかし、パソコン向けの画面をそのままスマートフォンで表示すると、文字が小さくなったり、表がはみ出したりすることがあります。

レスポンシブデザインとは？

レスポンシブデザインとは、画面の幅に応じてレイアウトを調整する仕組みです。

例えば、

• パソコンでは入力欄を横に並べる
• スマートフォンでは入力欄を縦に並べる
• ボタンを指で押しやすい大きさにする
• 横長の表をスクロールできるようにする

といった調整ができます。

ChatGPTへの追加指示

学習時間記録アプリを、
スマートフォンでも使いやすい
レスポンシブデザインにしてください。

要件：
・画面幅に合わせてレイアウトを調整する
・スマートフォンでは入力欄を縦に並べる
・ボタンを押しやすい大きさにする
・文字を読みやすくする
・記録一覧が画面からはみ出さないようにする
・必要に応じて表を横スクロールできるようにする
・棒グラフも小さな画面で表示する
・既存機能は変更しない

完成コードと確認方法を出力してください。

表示を確認する方法

ChromeやEdgeでは、開発者ツールを使ってスマートフォンに近い画面サイズを確認できます。

また、ブラウザのウィンドウ幅を狭くするだけでも、基本的な表示確認ができます。

ただし、画面をスマートフォン向けに調整することと、スマートフォンからアプリへアクセスできるようにすることは別の作業です。

実際にスマートフォンで使用する場合は、HTMLファイルの転送やWeb公開などの方法を検討しましょう。

---

⑮ データ保存とバックアップを確認しよう！

改良後のデータ形式を確認する

第5回では、学習日・カテゴリ・記録IDなどの項目を追加しました。

そのため、第4回と第5回では、保存するデータの形式が異なる場合があります。

例えば、第5回版では次のようなデータ構造が考えられます。

[
  {
    "id": "record-001",
    "date": "2025-03-15",
    "category": "プログラミング",
    "subject": "Webアプリ開発",
    "minutes": 90
  }
]

実際の項目名は、アプリのコードによって異なります。

古いデータを引き継ぐ際のルール

第4回のデータに新しい項目がない場合は、次のように扱う方法がおすすめです。

項目	古いデータへの対応
学習日	日付未設定として扱う
カテゴリ	その他として扱う
記録ID	一意のIDを新たに付ける
学習内容	元の値を維持する
学習時間	元の値を維持する

重要なのは、古い記録の内容を勝手に変更しないことです。

ChatGPTへの確認依頼

学習時間記録アプリの
データ保存とJSONバックアップ機能を確認してください。

要件：
・学習日、カテゴリ、学習内容、時間を保存する
・追加・編集・削除をlocalStorageに反映する
・JSONバックアップを書き出せる
・JSONファイルから復元できる
・不正なJSONは読み込まない
・復元前に現在の記録を置き換えるか確認する
・第4回のデータ形式を確認し、
  必要なら安全な変換処理を追加する
・日付がない記録には勝手に日付を設定しない
・既存機能を維持する

完成コードと動作確認手順を出力してください。

バックアップ復元の注意点

復元には、大きく分けて2つの方法があります。

1. 現在の記録をバックアップの内容で置き換える
2. 現在の記録にバックアップの内容を追加する

今回のサンプルアプリは、置き換え方式です。

復元すると現在の記録が置き換わるため、先に現在のデータをJSONで保存してください。

サンプルアプリでのデータ移行

今回用意したサンプルアプリは、次の項目を持つ記録を想定しています。

• subject
• minutes
• date
• category
• id

一部の古い項目名にも対応していますが、第4回で作ったすべてのJSON形式との互換性を保証するものではありません。

必ず、次の順番で確認してください。

1. 第4回のアプリからJSONを書き出す
2. JSONファイルを別の場所にも保存する
3. 第5回のサンプルアプリを開く
4. JSONを読み込む
5. 件数・学習内容・学習時間を確認する
6. 正しく復元できたら第5回形式で再度バックアップする

読み込みに失敗した場合は、元のJSONを変更せず、ChatGPTに形式の違いを確認してもらいましょう。

スライドについての補足

スライド⑮にはCSV形式のエクスポート画面も登場しますが、今回の必須機能とサンプルアプリではJSON形式のバックアップを使用します。

CSV出力は、今後の追加機能として検討できます。

---

⑯ エラーが出たらAIに修正をお願いしよう！

エラーは改良の途中で起こることがある

アプリを改良していると、次のような問題が発生する場合があります。

• 記録ボタンが反応しない
• カテゴリが保存されない
• 棒グラフが表示されない
• 編集した内容が反映されない
• 再読み込みすると記録が消えたように見える

そんなときは、ChatGPTに状況を具体的に伝えましょう。

悪い質問の例

アプリが動きません。
直してください。

これだけでは、原因を判断するための情報が不足しています。

良い質問の例

学習時間記録アプリでエラーが発生しました。

発生した問題：
記録ボタンを押しても、
新しい記録が一覧に表示されません。

直前に行った変更：
カテゴリ選択機能を追加しました。

エラーメッセージ：
ReferenceError: category is not defined

お願いしたいこと：
1. エラーの原因を初心者向けに説明する
2. 修正方法を提案する
3. 既存機能を維持する
4. 完成したHTMLコードを出力する
5. 動作確認方法を説明する

現在のコードは以下のとおりです。

この後に現在のHTMLコードを貼り付けます。

エラーを伝えるときの5つのポイント

1. 何をしようとしたか
2. どのような問題が起きたか
3. 直前に何を変更したか
4. エラーメッセージの内容
5. 現在のコード

この情報があると、AIが問題を調べやすくなります。

修正後も動作確認する

AIが修正したコードを出力しても、それだけで完成ではありません。

実際に動かして、問題が解決したか確認します。

さらに、他の機能が壊れていないかも確認しましょう。

---

⑰ 進化した学習時間記録アプリを完成させよう！

第5回で追加した機能を確認しよう

ここまでの作業で、学習時間記録アプリは大きく進化しました。

第5回の完成目標は次のとおりです。

機能	第4回	第5回
学習内容の登録	○	○
学習時間の登録	○	○
記録の削除	○	○
合計時間の計算	○	○
localStorage保存	○	○
JSONバックアップ	○	○
学習日の記録	―	○
カテゴリの管理	―	○
日付・カテゴリの絞り込み	―	○
週間棒グラフ	―	○
記録の編集	―	○
デザイン改善	―	○
スマートフォン向け表示	―	○

※ 第5回の機能は、記事の手順に沿って実装し、動作確認が完了した場合の完成目標です。

完成版の確認手順

最後に、次の操作を行いましょう。

1. 新しい学習記録を追加する
2. 日付とカテゴリを確認する
3. カテゴリで絞り込む
4. 週間棒グラフを確認する
5. 記録を編集する
6. 記録を削除する
7. ページを再読み込みする
8. JSONバックアップを保存する
9. バックアップから復元する

すべて正しく動けば、今回の完成目標を達成できています。

完成版のファイルを保存する

作成したHTMLファイルは、例えば次の名前で保存します。

study-log-v5.html

記録データのバックアップは、次のような名前にすると分かりやすくなります。

study-log-v5-backup.json

スライドのカレンダーや円グラフについて

スライド⑰には、カレンダー画面や円グラフなどのイメージも登場します。

これらは、今後の発展的な改良例です。

今回の必須実装は、週間棒グラフと記録編集などの機能です。

カレンダーや円グラフも追加したくなったら、今回学んだ方法を使ってChatGPTに相談してみましょう。

---

⑱ 今回のまとめ！次のステップへ進もう！

第5回で学んだこと

今回は、ChatGPTと一緒に学習時間記録アプリを改良しました。

主なポイントを振り返りましょう。

1．既存のアプリを改良する方法

最初から作り直すのではなく、第4回のアプリを土台にしました。

2．AIへの追加指示の出し方

追加したい機能と、維持したい機能を具体的に伝えました。

3．学習日とカテゴリの管理

いつ、何を勉強したのかを整理できるようにしました。

4．週間学習時間のグラフ表示

毎日の学習時間を棒グラフで確認できるようにしました。

5．記録の編集

入力を間違えた場合でも、後から修正できるようにしました。

6．デザインとスマートフォン対応

見た目を改善し、小さな画面でも使いやすい構成を学びました。

7．データ保護とエラー対処

バックアップを取りながら、安全に改良する方法を学びました。

次に挑戦したい機能

今回のアプリをさらに発展させるなら、次のような機能が考えられます。

• カレンダー形式で学習履歴を表示する
• カテゴリ別の円グラフを作る
• 月間学習時間を集計する
• 目標学習時間を設定する
• 学習を続けた日数を表示する
• リマインダー機能を追加する

これらは今回の必須機能ではありませんが、今後の学習テーマとしておすすめです。

次回のテーマ

次のステップでは、作成したWebアプリを他の人にも使ってもらう方法に挑戦できます。

例えば、

• Webアプリをインターネット上に公開する
• スマートフォンからアクセスする
• 家族や友人に共有する
• 公開時のセキュリティや注意点を学ぶ

といった内容です。

AIと一緒にアプリを作り、改良し、さらに活用していく。

これが、バイブコーディングの楽しさです。

---

第5回のよくある質問（FAQ）

Q1．第4回のアプリがなくても学習できますか？

はい。第5回のサンプルHTMLファイルを使えば、改良後のアプリを参考にできます。

ただし、既存アプリを改良する流れを理解するには、第4回から取り組むのがおすすめです。

Q2．第4回の記録は自動的に引き継がれますか？

必ずしも自動的には引き継がれません。

localStorageの保存キーやデータ形式が異なる場合があります。

第4回でJSONバックアップを作成し、第5回で読み込めるか確認してください。

Q3．古い記録に日付がない場合はどうなりますか？

今回の方針では「日付未設定」として扱います。

実際にはいつ勉強したのか分からないため、勝手に今日の日付を付けないようにします。

Q4．グラフを作るために専用のライブラリが必要ですか？

いいえ。

今回のようなシンプルな棒グラフであれば、HTML・CSS・JavaScriptだけでも作成できます。

Q5．ChatGPTが作ったコードは必ず正しく動きますか？

いいえ。

AIが生成したコードにも間違いが含まれる場合があります。

機能を1つ追加するたびに、実際に動作確認しましょう。

Q6．JSONバックアップを復元すると、現在の記録はどうなりますか？

アプリの仕様によって異なります。

今回のサンプルアプリは、現在の記録をバックアップの内容で置き換える方式です。

復元前に現在の記録もバックアップしておきましょう。

Q7．スマートフォンでも使えますか？

スマートフォン向けの画面表示に対応させることはできます。

ただし、パソコン内のHTMLファイルをスマートフォンで利用するには、ファイル転送やWeb公開などの準備が必要です。

Q8．第5回で最も重要なことは何ですか？

既存機能を維持しながら、1つずつ改良し、その都度動作確認することです。

この考え方は、学習時間記録アプリ以外にも応用できます。

---

おわりに

今回は、「バイブコーディング超入門講座 第5回」として、ChatGPTを使ったWebアプリの機能追加とデザイン改善を学びました。

第4回では、AIと一緒にWebアプリを作りました。

第5回では、そのアプリを自分の希望に合わせて改良しました。

アプリ開発は、一度完成したら終わりではありません。

実際に使ってみて、

「ここが不便だな」

「こんな機能があったら便利だな」

と感じたところを改善することで、少しずつ使いやすいアプリに育っていきます。

その改良をChatGPTと一緒に進められることが、バイブコーディングの大きな魅力です。

ぜひ、今回紹介したプロンプトを使って、自分だけの学習時間記録アプリを進化させてみてください。

最後までお読みいただき、ありがとうございました！

---

関連記事

• バイブコーディング超入門講座 第1回
  https://sicom-blog.com/vibe-coding-beginners-guide-2026/
• バイブコーディング超入門講座 第2回：はじめてのToDoアプリ制作
  https://sicom-blog.com/vibe-coding-beginner-lesson-02/
• バイブコーディング超入門講座 第3回：AIへのプロンプトの書き方
  https://sicom-blog.com/vibe-coding-beginner-03-prompt-tips/
• バイブコーディング超入門講座 第4回：AIと一緒にWebアプリを作ろう！
  https://sicom-blog.com/vibe-coding-lesson-04-chatgpt-web-app/

---

この記事のまとめ

• 第4回のアプリを土台に機能を追加した
• 改良前にHTMLとJSONのバックアップを取った
• 学習日とカテゴリを追加した
• 日付・カテゴリで記録を整理できるようにした
• 週間学習時間を棒グラフで表示した
• 登録済み記録の編集機能を追加した
• デザインとスマートフォン表示を改善した
• データ保存とバックアップを確認した
• エラーが出たときにChatGPTへ修正を依頼する方法を学んだ

バイブコーディングは、AIにアプリを作ってもらうだけではありません。AIと一緒に、自分のアイデアを少しずつ形にしていく方法です。

#バイブコーディング #ChatGPT #Webアプリ開発 #プログラミング初心者 #AIプログラミング