プロと実践！ゼロから始めるバイブコーディング

あれもこれもと求めずフロントエンド完成！画面消失トラブルを打開するも、今度はGitHubとの連携バグが立ち塞がった

［第3回］脱“張りぼて”へ、フロントエンドを作り込む

柳谷智宣

2026年3月13日 09:00

　本連載では、プロのエンジニアによるアドバイスで伴走してもらいながら、いま話題の開発手法「バイブコーディング」を実践。初心者がつまずきやすいところなど、はじめの一歩から解説していきながら、オリジナルのウイスキー認識アプリの完成を目指す。

アプリのフロントエンドだけは形になった！

前回までは……

　「非エンジニアでもアプリを作りたい！」という思いから、生成AIを活用して自作アプリの開発（バイブコーディング）に挑戦するが、「公開の壁」に立ち尽くしてしまう筆者。

　そこで、GMOインターネットグループの現役エンジニア、石丸智輝氏に教えを仰ぎ、Google AI Studioでのアプリ開発をスタートした。AIに要望を伝えまくったところ、1時間もしないうちに、夢に見ていた「ウイスキー記録アプリ」が動作した。

　「すごい！これもう完成してますよね」と興奮する筆者に対し、石丸氏は冷静に告げる。

　「ブラウザーの更新ボタンを押してみてください」

　すると、データはきれいさっぱり消滅していた。そう、このプロトタイプはまだ「張りぼて」（フロントエンド）だったのだ。

　これは、素人とプロの二人三脚による、泥臭くもリアルな開発ドキュメンタリーである……

　今回は、スマートフォンでの動作を確認した後、Google AI StudioとGitHubを連携させて、ここまで作ったソースコードをアップロードし、データベース作成の下準備をする予定だ。

　Google AI Studioで作成したプロトタイプはフロントエンド（見た目と動作）だけだった。次のステップでは、GitHub経由で他のツールに移行するので、可能な限り、作り込んでおく必要があるとのこと。そこで、自分一人で作業していたのだが、トラブルが起きてしまった。商品名の見栄えを調整していたところ、画面が真っ黒になってしまったのだ。

UIを作り込んでいたら、いきなり画面が真っ黒になって直らなくなってしまった

トラブルが起きたら、セーブポイントにレストア

　ページをリロードしても、ブラウザーを再起動しても、状況が改善しない。どうしようもなかったので、石丸師匠に相談した。

「Google AI Studioに限らず、普段の開発でもエラーが出たり、動かなくなったりすることはよくあります。通常は、画面に表示されているエラー文やブラウザーに出ているメッセージがあれば、それも一緒にAIに渡すと原因を絞り込みやすいのですが、まずは『作成されたアプリケーションを確認すると、画面上に何も表示されません。原因を調査して修正してください』と、指示してみてください」（石丸氏）

　アドバイス通りに修正指示を出したところ、AIは調査と修正を行ってくれたのだが、それでも画面は真っ黒なままだった。

「どうしてもダメな場合は、正常に動作していたときのセーブポイントまで戻すことになります」（石丸氏）

　元に戻す＝レストアするには、まずGoogle AI Studioの右上のアイコンから［Open version history］をクリックする。プルダウンメニューからおかしくなる前のセーブポイントを選択して［Restore to version］をクリックすればよい。ちなみに、セーブポイント（snapshot）は［Save］ボタンを押すほか、大きな変更が加えられたときなどに自動で保存される。

「Open version history」から以前のバージョンにレストアする

　前回作業したセーブポイントにレストアしたところ、問題なく動作した。そこでもう一度、同じような指示でUIを改善したが、今度は問題なく対応してくれた。

元の状態に戻った

ようやくフロントエンド完成、アプリの名前は「AiLA」に

　筆者としては、欲しい機能を一通り追加したので、石丸氏に何か他にやっておいた方がよいことがあるか聞いてみた。

　すると、解析・登録画面のヘッダー画像にラベルを表示できるとよいのでは、との返答が。たしかに、ウイスキーのボトルは縦写真で撮ることが多く、ラベルがぴったりとヘッダーに収まることが少なかった。とはいえ、ラベルが写真のどこに位置するのかはまちまちなので、諦めていたのだ。

　アドバイス通りに、ラベル部分をヘッダーに表示するように指示したところ、すぐに改修してくれた。テストしたところ、ラベルが大きく表示されたのだが、他のボトルだとうまくいかない。

「修正内容を見ると、固定の位置を切り出すようなルールベースで実装されていますね。この実装では、写真ごとにラベルの位置が変わると意図した表示にならないことがあります。今回は、すでにウイスキー画像の認識でGeminiを使っているので、その延長でGeminiにラベル領域の座標を推定させて、そこを拡大表示する方法を試してみましょう。自動化できる分、手間を増やさずに見栄えを安定させやすいはずです」（石丸氏）

　こちらもアドバイス通りにプロンプトを入力したところ、想定通りに動作した。AIがラベルの場所を特定し、その座標を計算して自動でピンポイントズームしてくれるようになったのだ。ただし、GeminiのAPIを利用するので、実際に運用する際、コストが発生することは忘れないように、とのこと。

ヘッダー画像には写真からラベル部分を拡大表示するように改善

　さて、これでフロントエンドの作り込みができた。

　アプリを起動すると、ホーム画面が表示される。写真のアップロード方法はアルバムから選んでもよいし、カメラで撮影してもよい。下には「コレクション」として過去に撮影したウイスキーが一覧表示されるようにした。どのくらい表示するかは後で調整するつもりだ。

アプリの起動画面。履歴が出るといい感じに見える

　ウイスキーの分析結果画面はブラッシュアップされてきた。まだヘッダーにきちんとラベルが拡大されなかったり、データに間違いが含まれたりするものの、これは後で調整していくしかないだろう。特に、レアなウイスキーの場合、Web検索だけだと対応できないことも多い。ここも手動入力のブラッシュアップが必要だが、後回しにする。最初からあれもこれもと求めると進まなくなってしまうためだ。

　なかなかいい感じのアプリになった。石丸氏からすると、まだスタートラインに立った段階だと思うが、筆者としては手ごたえあり。生成AIの進化に感謝しかない。

　ちなみに、アプリの名前は「AiLA」にした。筆者がアイラ島のウイスキーが好きだということと、AIをもじりたかったため。特に意味はない。

ヘッダーにラベルがきちんと表示されるようになり大満足

スマートフォンでも動作確認、同僚や仲のよい人にも試してもらう

　次はスマートフォンで動作チェックしてみる。

　自分のスマホで確認するだけなら、スマートフォン側でも、PCと同じGoogleアカウントでGoogle AI Studioにログインし、対象のアプリを開けば動作を確認できる。

　試したところ、あっけなくiPhoneのSafariブラウザーで表示され、撮影も登録も行えた。データベースやSNS機能はないが、当初想像していたようなアプリが手元で動くのは感動もの。

スマートフォンでアプリを利用できた

「今回作ったアプリを、同僚や仲のよい人に試していただいてはいかがでしょうか。第三者に試してもらう場合は［Share App］から共有リンクを発行して送れば、相手の端末でもすぐ動かせます。実際に触ってもらうと、操作のわかりにくさや表示の崩れなど、自分では気づきにくい点のフィードバックが集まりやすく、改善の優先順位もつけやすくなります。なお、共有したアプリは、リンクを開いた人がコードも確認できるため、APIキーなどの機密情報は含めないようにしましょう」（石丸氏）

［Share App］をクリックして共有リンクを発行する

いざ、GitHubへ！しかし、行く手に連携バグが立ち塞がる……

　ここで、Google AI Studioの作業は終了。次は、認証やデータベースの機能を作成するために別のツールへ移行する。そのためには、これまで生成したコードをGitHubにアップロードする必要がある。

　GitHubは「Git」という仕組みを利用した世界最大級のソフトウェア開発プラットフォームだ。非エンジニアに説明するなら、「超高性能な『全自動バックアップ付き』の共同編集ホワイトボード兼保管庫」となる。さまざまな外部サービスと連携しており、自分で作ったコードや設定を持ち込んで作業を続けられるのだ。

　Google AI Studioの画面右上の［GitHubに同期］ボタンから［GitHubにログインして続行］をクリックする。ポップアップが開くので、Googleアカウントでログインすればよい。