非エンジニアがClaudeと作った勉強記録アプリ｜制作記 後編：使いながら直した3週間と、5か月後の今
前編（作り始めからスマホ対応まで）はこちら：非エンジニアがClaudeと作った勉強記録アプリ｜制作記 前編
前編では、プログラミング経験ゼロの私が「学習アプリ作りたいな」の一言から、勉強記録アプリ「AI Study Tracker」を作ってスマホでも見られるようにするところまでを書きました。
後編は、そこから毎日使い始めて出てきた不便と、それをどう直したかの話です。一度、動いていたものを自分で壊した話も入っています。最後に、5か月使った今どう感じているかを書きます。
この記事の要点
- 足した機能はどれも「使ってみて不便だと気づいた」ところから出てきた
- 良くするつもりで頼んだ変更でアプリが動かなくなり、バックアップから戻した
- 5か月経った今も毎日使っている。アプリの運用費はゼロ
使い始めて出てきた不便
前編の最後の形は、記録して、カレンダーで日付を絞り込んで、一覧で見る、というものでした。
毎日記録していくと、別のことが起きます。
ひとつは、やったことがどんどん埋もれることです。前に記録したプロンプト（AIへの指示文）を呼び起こしたいときに、どこに書いたか分からない。日付は覚えていないので、カレンダーからは辿れません。
もうひとつは、画面が縦に長くなることです。記録した文章が全部そのまま表示されるので、記録が増えるほど下にスクロールする距離が伸びていきます。
直した3つ
3週間で4回手を入れています。そのうち、はっきり形が変わった3つを出します。前編と同じで、「自分の言葉」は私がClaudeに打ち込んだそのままの文章です。
キーワード検索（4月20日）
自分の言葉：
2つ目は、過去に書いた記録がどんどん埋もれていって、後でこれ以上記録が増えていくと、あとで見返したい記事が探せなくなってしまうかなと思ってるんだ。だから記録を付ける際にキーワードを入力することで、後でキーワードで検索できるようにすると付けた記録があとで役に立つかなと思ってる
Claudeの対応：いつも通り、まず3つ聞かれました。キーワードの入力の形（カンマ区切りか自由記述か）、検索バーを置く場所、それと過去の記録をどう扱うか。私はこう答えています。
自由記述で単語を幾つかキーワードとして入れたい場合は,で区切るとかXみたいにハッシュタグで記録をつけるのも良いかもね。 過去の記録も検索出来るようにしたいね。本文中身の検索は今はいらないかな、それも含めると沢山検索に引っかかってきてしまう可能性があるので
この答えをもとに、Claudeが指示文を書いてくれました。記録の入力欄にキーワード欄を足すこと、タイムラインの上に検索バーを置くこと、複数のキーワードを入れたら全部に当てはまる記録だけを出すこと。
結果：
意図した通りに機能してます！ 検索を閉じる✗ボタンの位置が微妙にズレている感じもしますが、概ね大丈夫です
ひとつ採用しなかった案があります。キーワードをスペースで区切る形です。「Claude Code」のように、単語の間にスペースが入るキーワードがあるからです。これは私が気づいたのではなく、やりとりの中で出てきました。
記録のコピーボタン（4月27日）
自分の言葉：
過去の記録ごとに文章を丸ごとコピー出来る機能を追加したい ➔過去の記録をclaudeに読み込ませて、これまでの流れを把握してアドバイスを貰いたい時などに文章全体をコピーしたいと思う時がある
Claudeの対応：ここでも2つ聞かれました。コピーするのは本文だけか、キーワードやURLも含めるか。ボタンは「編集」「削除」の横でいいか。私は「本文だけ」「編集・削除の横」と答えました。
結果：
試しに一番上の記事をコピーしてみました。出来てます！
検索とコピーは組み合わせで効いています。「プロンプト」というキーワードを付けた記録を検索して、本文をコピーし、そのままAIに貼り付けられるようになりました。
読み込みの安定化（4月27日）
自分の言葉：
AI Study Trackerの読み込みが遅くて、最初開いた際に過去の記録などの情報が反映されなくて、2,3回再度読み込ませることで反映されたりするのは直せるの？
これは次の章で詳しく書きます。結果だけ先に言うと、この変更でアプリが動かなくなりました。
残りの機能
同じ3週間で、細かいものも3つ足しています。どれも理由は単純です。
- 長文の折りたたみ：記録した文章が全部出ると縦に長くなるので、過去の履歴がコンパクトにまとまるように
- ページ分け：記録が溜まると縦に長くなるので、1ページ、2ページと分かれるように
- トップへ戻るボタン：下までスクロールした後に、一番上へ戻れるように
学び：使ってみるまで、自分がどこで不便を感じるか分からなかった
一度壊した話
読み込みの安定化を頼んだのが4月27日です。正直に書くと、私はこのときのことをよく覚えていません。記録を見ると、こういうことが起きていました。
Claudeが原因を推測して、指示文を作ってくれました。「ログイン状態の確認が終わる前にデータを取りに行っていて空振りしているのではないか」という見立てで、直す内容は3つ。ログイン状態の確認を待ってからデータを取りに行くこと、待っている間は「読み込み中…」と出すこと、失敗したら自動で1〜2回やり直すこと。
指示文をClaude Codeに貼って、実装してもらいました。そして、こうなりました（リロードはページの再読み込みのことです）。
読み込み中になってそのままにしておいても画面変わらないね
あれから2,3回試したけど、20秒くらいすると画面が出るようになったね
ついには何回リロードしても表示されなくなったね。とても不安定な状態
良くするつもりで頼んだ変更で、前より悪くなりました。ここで私が出した指示はこれです。
状況が悪化しました。何回リロードしてもデータが表示されない状態です。まず `ai-study-tracker-firebase.backup-loading-20260427.html` をそのまま `ai-study-tracker-firebase.html` に上書きして元の安定した状態に戻してください。改善の再実装は戻してから別途相談します。Claude Codeは、壊れた版を broken-loading-20260427.html という別の名前で残してから、バックアップを上書きしました。ファイルの中身が元と一致しているかも確認しています。これで元通り動きました（当時のデータは64件、1215XP、Lv.4でした）。
このとき言われたのが、次はもっと小さい単位で進めましょう、ということでした。まず「読み込み中…」の表示だけ追加して、やり直しの処理は別にする。
私は「その次回やろうとしていることを今からやろう」と言って、同じ日にもう一度やっています。今度は2点だけ。「読み込み中…」の表示と、ログイン状態の確認が終わるのを待つ部分です。
結果は、改善はしたけれど完全には解決しませんでした。これ以上やると不安定になるリスクがあると思ったので、その日はそこで止めました。
今も、ちょっと読み込みが遅いです。開いた直後に過去の履歴がすぐ出ないことがあります。どこかで改善しなきゃいけないと思っています。
学び：変更して動かなくなったら、いったん戻す。今回は、直す内容を絞ってやり直したら改善した
つまずき所
ひとつ、聞いておいてよかったことがあります。アプリのファイルの中にFirebase（データ保存やログインに使うGoogleのサービス）につなぐための文字列が書かれていて、公開すると誰でも見られる状態になります。私はそれが心配になって聞きました。
返ってきたのは、今回のFirebase用の設定値は、接続先を知らせる住所のようなもので、見られても問題ないということ。実際にデータを守っているのは別の設定で、「ログインした本人しか自分のデータを読み書きできない」ようになっている、という説明でした。これはFirebase用の設定値の話で、AIサービスの秘密のAPIキーとは扱いが違います。細かい仕組みは私も分かっていません。
分からないまま公開するのは怖いので、気になったことはその場で聞くようにしています。
5か月後の今
4月に作って、9月の今も使っています。5か月間作業して、習慣化されています。
正直に書くと、本当に昔に作ったものはほとんど見返しません。ただ、数日前や昨日やったことは見返して、今日の作業に出てきます。そういうときには役に立っています。
何かしらいい方向に向いているのかもしれませんが、その辺は定かではありません。学習意欲は、やらないよりやった方がいいんじゃないかなとは思います。
勉強したことを日々貯めているという安心感はあります。いつでも呼び起こせるという安心感です。
今の数字はこうなっています。
- 記録：212件
- 経験値：4,320XP
- レベル：Lv.5 AIクリエイター
- 最長連続記録：29日
数字と費用
作った期間の記録も出しておきます。
3週間で、コミット（変更を記録として残す作業）が5回。ファイルは今も1枚のHTMLのままで、1,809行、92KBです。ビルド（コードを公開用に変換する作業）は必要ありません。ファイルをそのまま置けば動きます。
Claudeの利用料は別ですが、このアプリの運用には今のところお金はかかっていません。FirebaseもNetlifyも、個人で使う範囲は無料でした。
ただ、この後にやりたいと思っているAI連携をやると、費用の話が出てきます。AIのAPIは使った分だけ払う形（従量課金）が多く、無料で使える範囲があるものもあります。
次にやりたいこと
4つあります。
読み込みを速くする。今は時間がかかるので、サイトを開いたと同時に過去の履歴が反映されるようになればいいなと思っています。
AIとつなげる。自分が忘れていても、AIがここの記録を全部読んで過去の履歴を覚えていてくれると、今後の作業で役に立ちます。
見た目を直す。ビジュアル的な部分も多少改善できるといいなと思っています。
記録を掘り下げてもらう。AIのAPIキー（外部サービスを使うときの認証用の文字列）を使って、過去に記録した内容から過去を掘り下げてもらって、今後やることや学んだことの整理、やり残したことを導き出してもらう。
これができれば、ただの記録に終わらなくなります。
それでは、また次の記事で。六弦ライダーでした。
執筆時点の環境：Claude Code（モデルはOpus 5）／2026年9月