夏休みにバイブコーディングデビューしました

理想の形に「育てる」工程がバイブコーディングの一番楽しいところ！～増えすぎた推し活グッズの管理アプリを自分で作ってみよう【仕上げ編】

［第3回（最終回）］AIに改善点を挙げさせて自分だけの道具に育て上げる

柳谷智宣

2026年8月14日 10:00

動くようになったアプリを自分好みに育てていく

　趣味で集めているモノが増えてくると、自分が何を持っているのかわからなくなる。これらをアプリで管理できればよいのだが、市販のアプリでは対応できないことが多い。欲しいアプリがないなら「バイブコーディング」で作ってしまおう。

　第2回までで、今回作成したウイスキーコレクションの管理アプリはかなり「使える道具」になってきた。手元のボトル写真をまとめて登録してみると、ずらりと並んでいい感じ。眺めているだけでもちょっと楽しい。

　ところが、実際に毎日使い始めると「ここがこうだったらよいのに」が次々と湧いてくる。市販のアプリなら要望フォームに投稿し、採用されるかどうかわからないまま待つしかない。

　しかし、このアプリを作ったのは自分だ。気になったところをそのまま言葉にして投げれば、数分後には直っている。

　実はここからがバイブコーディングのいちばん楽しいところだ。作って終わりではなく、使いながら少しずつ自分の形に寄せていける。最終回はこの「育てる」工程を紹介する。

不便になりそうな点をAI自身に挙げてもらう

　数十本のウイスキーを登録して数日使ってみると、アプリは問題なく動くのだが、なんとなく使いにくい場面が出てきた。

　しかし、非エンジニアだとそれを機能の要望として言葉にするのは難しいもの。プログラミングの知識がないと、そもそも何ができるのかがわからないためだ。こういうときは、不満を挙げる作業もAIに手伝ってもらえばよい。

【プロンプト】

このまま登録本数が増えたときに特に不便になりそうな点を3つ挙げてください。まだ実装はしないでください。

　ここでは「まだ実装はしないでください」と添えるのがポイント。これを書かないと、Coworkは挙げた途端に直し始めてしまうことがあるためだ。

　返ってきたのは3点。自分では気が付いていないものも含めて挙がってきた。

　1つ目は、一覧を開くのに時間がかかるようになること。カードの表示枠は190ピクセルしかないのに、photosフォルダーの元写真をそのまま読み込んでいるという。27本で約88MB、300本なら1GB近くを、画面を開くたびに読む計算になる。2つ目は、データを戻せるのが直前の状態までということ。書き出したファイルは毎回同じ名前で上書きするので、控えは常に最新の1つしかない。3つ目は、いまの検索と絞り込みだけでは目当ての1本にたどり着きにくくなること。数字まで添えられていると、放っておくとまずいことが理解できる。

使い込んだ状態のアプリとデータを分析して不便になりそうなポイントを列挙してくれた

　ただし、挙がってきた案をすべて実装する必要はない。

　自分の使い方に必要なものだけを選び、残りは見送ってもよい。第1回でチャットに相談したときと同じで、選択肢を出すのはAI、決めるのは人間だ。今回は、影響が大きそうな写真の重さと、データの保存方法を先に片付けることにした。

　ひとつだけ気になったのが写真の件だ。

　第2回でせっかく自動縮小をやめさせて撮ったままの画質で保管できるようにしたのに、また勝手に縮小されては困る。念のためにAIに確認すると、元の写真には手を触れず、一覧に表示するための縮小版を別に作るという説明だった。それなら問題はない。気になったことは、遠慮せずその場で確認しておく方がよい。

実装の前に何をするのか説明してもらう

　このままAIに「では実装して」と言えば、コーディングが始まってしまう。

　しかし、バイブコーディングとはいえ、どんな機能を追加するのかは最低限把握しておきたい。いきなり実装はさせずに、何をするつもりなのかを先に聞いておこう。初心者なら「非エンジニアにもわかるように説明して」と入れておくとよい。

【プロンプト】

では表示が重くなる件と、データを戻せなくなる件について、改善をお願いします。まずは、それぞれ何をするのか非エンジニアにもわかるように教えてください。

　表示が重くなる件の対策は4つで、一覧用の縮小版を別に用意すること、画面に映っている分だけ読み込むこと、検索の反応を軽くすること、最初は60本だけ並べることだった。データの対策は2つで、書き出すファイル名に日時を入れて控えが上書きされないようにすることと、読み込む前に何がどう変わるかを表示することだった。

画像の件について、何をするつもりなのかを先に説明してもらった

　ブラウザーやプログラミングの知識がないと完璧に理解することは難しいが、それでも変なことはしていなさそうだとわかる。この「変なことはしていなさそう」が確認できれば、非エンジニアとしては十分だ。

　準備ができたら実装に入る。ここで両方まとめて頼まないのがコツだ。1つずつ頼めば、うまく動かなかったときに原因を絞り込める。まずは「では表示が重くなる件を解決してください」と伝えた。すぐに計画が立てられ、処理がスタートする。

　数分で修正は完了。「Thumbs」という新しいフォルダーができていて、中に登録済みウイスキー27本分の縮小版が入っている。一覧で読み込む写真の合計が88.0MBから1.13MBへ、約78分の1になったという。元の写真の入ったフォルダーはそのままで、カードをクリックして詳細を開けば、これまで通りフル画質で表示される。

一覧の見た目はこれまでと変わらないが、カードではThumbsフォルダーの縮小版を読み込むようになった

　報告には、動作確認の結果も添えられていた。27本の登録データを複製して324本ある状態を作り、負荷をかけて試したという。改善後は、起動時にいきなり324本すべてを表示するのではなく、まず60本だけを並べ、写真も一覧用の縮小版だけを読み込むようになった。

　検索も、例えば「アードベッグ」と入力すると、1文字ごとに画面を更新して6文字で計6回描き直していた処理を、入力が一段落したところで1回だけ更新するように変更されていた。自分では用意しにくい大量データでのテストまでやってくれるのはありがたい。

エラーが出たら画面をそのまま貼って報告する

　続けて「では、データを戻せなくなる件を解決してください」と入力した。こちらも数分で完成の報告が返ってきた。

　ところが、index.htmlを開くと、空っぽの画面にエラーが表示された。登録本数も0本になっている。「起動に失敗しました。ブラウザーを変えてお試しください」という見慣れないメッセージだ。こういうときは、エラー画面をそのままキャプチャーしてCoworkに貼り付け、「エラーが出ました」と伝えるだけでよい。

起動に失敗した画面。この画像をそのまま貼り付けて報告すればよい

　すると、すぐに原因を突き止めてくれた。作業の途中でデータ置き場の管理番号が古いままになっていたとのこと。要するにAI自身の直し忘れだ。登録データそのものは無事だということで、数分で修正版が届き、開き直すと27本がそのまま表示された。

　AIがコードを書いてくれるとはいえ、こうしたミスは珍しくない。動かなくなることも多々ある。そんなときも慌てずに状況を報告して対処を頼めばよい。むしろ、エラーが出たときにどう伝えるかを覚えることの方が、バイブコーディングでは役に立つ。

　次に、データの書き出しを試すとファイル名が変わっていた。「whisky-data-20260810-1350.json」という具合に、末尾が書き出した日時になっている。書き出すたびに別の名前になるので、前の控えが上書きされずに済む。登録データを何日か前の状態に戻したければ、その日時のファイルを読み込めばよいというわけだ。

バックアップファイルに日時が付いて世代管理できるようになった

　また、読み込むときの確認画面もブラッシュアップされている。以前は「いま登録されている27本を置き換えます」としか出なかったが、選んだファイルの書き出し日時と入っている本数、いまの登録本数、そして読み込むと何本増えるか減るかまで表示されるようになった。

　試しに古い控えを選んでみると「7本減ります」と警告が出た。ここでキャンセルすれば変更は適用されない。バックアップは取るときより戻すときにこそ事故が起きがち。地味だが、ありがたい改善だ。

写真の下ごしらえもアプリの機能にしてもらう

　これで一通りの改善が終わった。以後、ウイスキーを追加するときは、photosフォルダーにリネームした写真を入れ、Thumbsフォルダーに縮小版を入れ、アプリから登録すればよい。

　とはいえ、日々追加するのにこの手間は面倒だ。そこで、この写真の下ごしらえ自体もアプリの機能にしてもらうことにした。

【プロンプト】

写真を追加するたびに手動でリサイズやリネームをするのは面倒なので、アプリに写真を準備するための機能を追加してください。写真をまとめて渡したら、ファイル名を前にやってもらったのと同じ撮影日の連番に変えて、一覧用の縮小版も作って、まとめてダウンロードできるようにしてください。元の写真の画質は落とさないでください。

　注目してほしいのは「前にやってもらったのと同じ」という一言だ。細かい仕様を書き直さなくても、Coworkはこれまでのやりとりと作業フォルダーの中身を読み直し、同じ規則で名前を付けてくれる。付き合いが長くなるほど、指示は短くて済むようになるのだ。

　数分でヘッダーに［写真の準備］というボタンが増えた。クリックすると「写真の準備」ウィンドウがポップアップし、撮影した写真をまとめてドラッグ＆ドロップできるようになった。

アプリにリネームとリサイズをまとめて済ませる機能が追加された

　写真を放り込むと、いまの名前と新しい名前、撮影日が一覧で並ぶ。「IMG_4681.jpg」は「2025032301.jpg」になり、撮影日は2025年3月23日と表示された。写真に記録された撮影日時を読み取り、日付と連番を組み合わせた名前を機械的に割り当てている。手作業ではやりたくない類の仕事だ。

　［photos フォルダを指定する（任意）］を押してphotosフォルダーを選択しておくと、すでにある写真と番号が重ならないように調整してくれる。省略した場合は、登録済みのボトルの写真名だけを見て番号を決める仕組みだ。

　［まとめてダウンロード］を押すと、ZIPファイルがダウンロードされる。展開すると「photos」と「Thumbs」の2つのフォルダーが入っており、それぞれ名前を振り直した元の写真と、一覧用の縮小版が収まっている。あとは中身をcollectionフォルダーの同じ名前のフォルダーへコピーするだけだ。元の写真は変換していないので、画質は撮ったときのまま残る。

ダウンロードしたZIPを展開すると、リネームされた写真とサムネイルが入っている

　これで、写真を追加するたびに面倒な作業をする必要はなくなった。アプリにできることを増やせば、そのぶん自分の手間が減る。育てるというのはこういうことだ。

同じ手順でアンパンマングッズの管理アプリも作ってみる

　今回は筆者の趣味でウイスキーコレクションの管理アプリを開発したが、もちろん、別の趣味のグッズを管理するアプリも同様の手順で開発できる。試しに、ウイスキー管理アプリの機能を参照して、今度はアンパンマングッズの管理アプリを作ってもらった。

【プロンプト】

このアプリを元に、同じ仕組みのまま、アンパンマングッズを管理するアプリを新規に開発してください。記録する項目は、作品名、キャラクター名、グッズの種類、購入日、購入店、価格、メモ、写真です。配色は子ども向けの明るいものにしてください。検索、並べ替え、絞り込み、集計、書き出しと読み込みなど、いまある機能はそのまま使えるようにしてください。

　数分後、まったく別の見た目のアプリが完成した。

　上部の集計欄は登録数、合計金額、平均価格、キャラクター数に変わり、絞り込みも作品名、キャラクター、種類という新しい項目で動く。暗い茶系だった画面が、赤と黄色の明るい配色になっている。手元で育てたアプリが1つあれば、それが次のアプリの土台になるわけだ。

数分で別のグッズ管理に特化したアプリが完成した

ウイスキーと同じようにグッズの登録や管理ができる

本格的な開発に進みたくなったときの選択肢

　今回作ってきたのは、パソコンの中だけで完結するアプリだ。プログラムは「index.html」ひとつだけで、ブラウザーで開いて使い、写真も、書き出したバックアップも同じcollectionフォルダー配下に置いている。だからこそインストールも不要で、かつ短時間で開発できた。

　一方で「外出先のスマホからも見たい」、「家族と共有したい」となると、クラウドで動くWebアプリが必要になる。

　これもバイブコーディングで開発できるが、手順はここまでとは比べものにならないほど複雑になる。クラウドサービスのアカウント作成、データベースの設定、そして誰がどのデータを読み書きできるかを決めるアクセス制限まで、自分で用意しなければならない。この領域については、窓の杜の連載「プロと実践！ゼロから始めるバイブコーディング」で、現役エンジニアの指導を受けながら実践している。興味があればそちらを参照してほしい。

　より本格的なアプリを作りたくなったら「Claude Code」を使う手もある。

　「Claude Code」は、Claudeのデスクトップアプリなら、画面上部の「Code」タブから利用できる。今回のような、ひとつのHTMLファイルで動くアプリだけでなく、複数のファイルやライブラリを組み合わせた、より複雑なアプリの開発にも向いている。機能を増やしたり、外部サービスと連携したりして、さらに作り込みたくなったときの次の選択肢になる。