夏休みにバイブコーディングデビューしました
一度で思い通りに出来上がらないのはバイブコーディングではよくあること！ ～増えすぎた推し活グッズの管理アプリを自分で作ってみよう【ブラッシュアップ編】
［第2回］実際に動かして気づいたことをAIと相談しながら直していく
2026年8月13日 10:00
趣味で集めているモノが増えてくると、自分が何を持っているのかわからなくなる。これらをアプリで管理できればよいのだが、市販のアプリでは対応できないことが多い。欲しいアプリがないなら「バイブコーディング」で作ってしまおう。
第1回では、Claudeデスクトップアプリの「Cowork」を使って、筆者が管理に困っているウイスキーコレクションの管理アプリを作った。登録も編集も検索も動き、見た目もそれらしい。プログラミングができない筆者でも、30分足らずで形になった。扱うモノを読み替えれば他の趣味にも応用できるはずだ。
とはいえ、これで完成というわけでもない。
実際に使ってみると、あれこれ気になるところが出てくる。バイブコーディングの本番はむしろここからで、気付いた点をそのまま日本語で伝えて直してもらう作業を繰り返していく。今回は、コレクションの命綱になるデータの保存まわりを中心に、AIと相談しながらアプリを整えていく過程を紹介する。
動かしてみたら写真の保存先が違っていた
まずはアプリを起動して、登録や編集、検索、並べ替えを一通り試す。画面上では問題なく動いており、カードには写真もきちんと表示されている。
ところが、エクスプローラーでphotosフォルダーを開くと、中身は空のままだった。最初のプロンプトでは、写真をこのフォルダーへ保存するように頼んでいたはずだ。わからないことは、そのまま聞けばよい。
最初の依頼では、登録した写真をphotosフォルダーへ保存するように頼みました。しかし、ボトルを登録してもphotosフォルダーは空のままですが、なぜでしょう。
index.htmlをダブルクリックして開いたページは、ユーザーの許可なくパソコン内のフォルダーへファイルを書き込めないという。ブラウザー側のセキュリティ仕様で、ChromeでもEdgeでもFirefoxでも共通とのこと。そこで、確実に動く方法としてブラウザー内の保存領域へ画像を取り込む形が選ばれていたのだ。
ついでに、手元の写真が数GB規模になることも伝えてみる。すると、この方式のままでは危ないという答えが1000枚以上、返ってきた。
ブラウザー内の保存領域にはある程度の容量があるものの、長期保管先として頼るのは不安が残る。特にindex.htmlを直接開くfile: URLでは、保存領域の挙動がブラウザーによって異なり、仕様上も保証されていない。ブラウザーの閲覧データからサイトデータを削除すれば、保存内容も消える。バックアップするのも現実的ではない。
代わりに提案されたのは、写真の実体をphotosフォルダーに置き、アプリはファイル名だけを覚える方式だった。これならブラウザー内に持つのは文字データだけになり、容量の心配がなくなる。提案どおりに作り直してもらう。
作り直しは数分で終わった。
登録画面に［Photosフォルダーから選ぶ］ボタンが用意され、実際に写真をphotosフォルダーへコピーしてから登録すると、カードに写真が表示された。前回気になっていた自動縮小もなくなり、撮ったままの画質で保管できる。
文字データの保存先も同じ理由だった
写真の次は、銘柄名や価格、残量、テイスティングメモといった文字情報だ。
collectionフォルダーの中を探しても、それらしいデータファイルが見当たらない。それでいて、ブラウザーを閉じて開き直すと登録内容は残っている。写真と同じ状況に見えるので、こちらも聞いてみる。
最初の依頼では、入力したデータをcollectionフォルダー内のファイルへ自動保存するように頼みました。しかし、フォルダー内に登録データらしいファイルが見当たりません。どうなってますか？
案の定、理由は写真とまったく同じだった。
いまのindex.htmlをダブルクリックして起動する作りでは、ユーザーの操作や許可なしにフォルダー内のファイルへ自動保存することはできない。このままでは閲覧データを削除したり、パソコンを買い替えたりしたときに、コレクションの記録がまとめて消えてしまう。
どうすればよいか尋ねると、2つの案が提示された。
1つは、index.htmlをダブルクリックする今の形のまま、ボタン1つでフォルダーへバックアップを書き出す方法。普段の入力はブラウザー内へ自動保存し、書き出していない変更があるとヘッダーに警告が出る仕組みだ。
もう1つは、HTA（HTML Application）形式に作り直して完全に自動保存する方法。入力のたびにファイルが更新され、写真も自動でコピーされる。理想的に見えたが、制約が多かった。Internet Explorer由来の古いMSHTMLエンジンを使うため、いまの配色やレイアウトをそのまま再現するのが難しく、見た目が簡素になる。Windows専用になる上、実行に使うmshta.exeはマルウェアに悪用されてきた経緯があり、セキュリティ対策で実行を制限される場合もある。
どちらを選ぶかは何を優先するかで変わる。
筆者は見た目と手軽さを優先して前者を選んだ。こうして選択肢と制約を並べてもらえると、プログラミングに詳しくなくても自分で判断できるのでありがたい。
データを消してからの読み込みで戻せるかを確かめる
作り直しが終わったら、必ず自分で動かして確かめる。
ボトルを登録すると、画面上部に「未書き出しの変更があります」という赤い表示が出た。［フォルダーに書き出す］をクリックすると、whisky-data.jsonが保存される。
バイブコーディングでは、後でまとめてチェックして不具合が出ると、どこが原因なのかわからなくなる。実装のたびに動かして動作確認することをおすすめする。
まずはデータを書き出してから、ブラウザーの閲覧データからサイトデータを削除する。画面を更新すると、登録したボトルは1本も表示されなくなった。続いて［読み込む］をクリックし、先ほど書き出したwhisky-data.jsonを選ぶ。銘柄名も価格も残量もメモも、消える前の状態に問題なく戻った。
写真のファイル名もCoworkに整理してもらう
もう1つ気になったのが、写真のファイル名だ。
スマホやデジカメから取り込んだ写真は「IMG_0608.JPG」のような名前のままで、フォルダーを開いても何の写真なのかわからない。枚数が増えるほど探しにくくなるだろう。そこで、撮影日をもとにした連番へリネームすることにした。そうすれば、最新の写真を追加する際も埋もれずに済む。
手作業で大量のファイル名を変更していくのは手間がかかるが、そんなときも「Cowork」の出番だ。指定したフォルダーのファイルを直接扱えるのがCoworkの強みで、こうした整理はアプリの開発よりもむしろ得意分野なのだ。
「写真」フォルダーの写真を、撮影日のデータをもとに2026080801、2026080802のような連番のファイル名にリネームしてください。同じ日に複数枚ある場合は下2桁の連番で分けてください。
これで既存の写真のファイル名を自動で変更してくれる。今後追加する際は、ファイル名を日付の連番に変更してから、photosフォルダーに保存すればよい。
今回の流れを振り返ると、動かして気になった点を言葉で伝え、返ってきた説明と選択肢から選び、また動かして確かめる、という往復の繰り返しだ。一度で思い通りのものが出来上がらないのは、バイブコーディングではよくあること。専門用語を覚える必要も、コードを読む必要もなかった。
なかでもデータの保存まわりは、プログラミングに詳しくないとつまずきやすい。ファイルの保存や移動ぐらいは簡単だろうと思いきや、ブラウザーで動かすシンプルなWebアプリだと、そう単純にはいかない。Pythonなどでプログラムを組めば実装できるが、手軽な作り方には制約がついて回る。何ができて何ができないのかを、その都度教えてもらいながら覚えていくのも醍醐味だ。
今回の作業でバックアップの仕組みが入り、ブラウザー内の登録データが消えても復元できるようになった。あとは安心して、手持ちのボトルを片っ端から登録していける。
次回は、実際に作ったアプリを使い倒しながら、コレクション管理に役立つ高度な機能を実装していく。
（第3回へ続く）
著者プロフィール：柳谷 智宣
IT・ビジネス関連のライター。キャリアは26年目で、デジタルガジェットからWebサービス、コンシューマー製品からエンタープライズ製品まで幅広く手掛ける。近年はAI、SaaS、DX領域に注力している。日々、大量の原稿を執筆しており、生成AIがないと仕事をさばけない状態になっている。
・著者Webサイト：https://prof.yanagiya.biz/
