プロと実践！ ゼロから始めるバイブコーディング
FirebaseエミュレーターをClaude Codeに導入して開発を加速！ ログインも画像データ保存もAIが機能実装してくれた
［第6回］わからないことはどんどんAIに聞く姿勢が大切
2026年4月24日 09:00
「非エンジニアでもアプリを作りたい！」という思いから、生成AIを活用して自作アプリの開発（バイブコーディング）に挑戦するが、「公開の壁」に立ち尽くしてしまう筆者。
そこで、GMOインターネットグループの現役エンジニア、石丸智輝氏に教えを仰いだ。トラブルを乗り越えながらもフロントエンドを作り込み、Google AI Studioでの開発が終了、アプリの名前を「AiLA」に決定した。
開発に使うVisual Studio Codeとアプリの基盤となるFirebaseの準備を進め、いよいよAIコーディングアシスタント「Claude Code」をセットアップ。自分のPC（ローカル環境）でアプリを起動させるという、地味だが重要な開発の土台作りを行いつつ、「APIキーをチャットに直接貼るのはNG」という漏えいを防ぐためのセキュアな管理方法を学んでいった。
これは、素人とプロの二人三脚による、泥臭くもリアルな開発ドキュメンタリーである……
前回は、Visual Studio Code（以下、VS Code）にAIコーディングアシスタント「Claude Code」をセットアップし、APIキーのセキュアな管理方法を学びながら、ローカル環境でアプリを起動するところまで進めた。
今回は、ソースコードの変更を記録・保存する「Git」の操作を覚え、PC上でFirebaseのバックエンド機能を再現する「Firebaseエミュレーター」を導入。さらに、ログイン機能やデータベース保存、画像ストレージまでをAIに丸投げで実装していく。
本題に入る前に、まずは関連する最新動向に触れておきたい。
この連載では「Google AI Studio」でフロントエンドを構築し、そのコードをGitHub経由でVS Code＋Claude Codeに移行して開発を進める、という流れで進行しているが、連載の間にも開発ツールの進化は止まらない。
2026年3月19日、GoogleはGoogle AI StudioのビルドモードにFirebaseを統合し、プロンプトから認証・データベース・ストレージを備えたフルスタックアプリを一気通貫で構築・デプロイできる機能をリリースした。連載では手動で進めてきたFirebaseの設定作業が、将来的にはビルドモード上でほぼ自動化される可能性がある。
本連載においては引き続き、前回セットアップしたVS Code＋Claude Codeの環境で開発を進める。コードとAIチャットを同じ画面で扱えるこの組み合わせは、非エンジニアのバイブコーディングにも取り組みやすいためだ。上で紹介した新機能は今後試す機会もあるだろうが、まずはこの環境で土台を固めていく。
ソースコードを「セーブ」してGitHubにバックアップする
最初に取り組んだのは、Git操作だ。
ソースコードは前々回にGitHubへアップロード済みだが、前回のセットアップでローカル環境のファイルに変更が加わっている。石丸氏によると、エンジニアは機能の区切りや意味のある変更のまとまりごとに内容を記録し、GitHub上に保存していくのが一般的な開発フローだという。ゲームに例えれば、こまめにセーブポイントを作って、問題が起きたら巻き戻せるようにしておく運用だ。
「Gitの操作方法はいくつかありますが、今回はバイブコーディングなのでClaude Codeに任せましょう。チャット欄でGitの操作をしたいと伝えれば、Claudeが適切に解釈してくれます」（石丸氏）
Claude Codeのチャット欄に「Gitの操作を行いたいです。やり方を教えてください」と入力すると、選択肢が表示された。ここで覚えるべき操作は2つ。［コミット］がローカル環境で変更内容をセーブする操作、［プッシュ］がそのセーブデータをGitHub上にアップロードする操作だ。
「すべての変更をコミットしてください」と指示すると、Claude Codeが自動でGitコマンドを考えて「このコマンドを実行していいですか」と確認を求めてきた。内容を確認してYesを選択すると、コミットが完了する。
ただ、Claude Codeが自動で生成するコミットメッセージは、英語で出力される傾向がある。GitHubの画面で履歴を確認する際に内容がわからないと困るので、「コミットメッセージは日本語で書いてください」と指示しておいた。さらに、今後も毎回英語になるのを防ぐため、石丸氏のアドバイスに従い「CLAUDE.md」にルールを追加する。「Gitのコミットメッセージはすべて日本語で出力するように、ルールを追加してください」と指示すると、Claude Codeが指示書を更新してくれた。
「CLAUDE.mdは、Claudeがチャットを開始する際に最初に読み込むファイルです。ここに開発ルールを書き込んでおけば、コーディングスタイルなど守らせたいルールをClaudeが参照して開発を進めてくれます」（石丸氏）
続けて「プッシュしてください」と指示。GitHubのページを開くと、日本語のコミットメッセージとともに、変更されたファイルの差分が緑色でハイライト表示されていた。追加された行には「＋」マークが付き、どのファイルの何行目が変わったのかが一目でわかる。バイブコーディングではソースコードを細かく読むことはほとんどないが、変更の記録がきちんと残っているという安心感は大きい。
PC上にFirebaseの開発環境を丸ごと再現する
Git操作が済んだところで、いよいよ本格的な開発に入る。まず必要なのが「Firebaseエミュレーター」の導入だ。
第4回でFirebaseの認証やデータベースをクラウド上にセットアップしたが、開発中にクラウドへ毎回接続するのは効率が悪い上、不完全なコードが外部に影響を及ぼすリスクもある。そこで、Firebaseが提供するエミュレーター機能を使い、認証・データベース・ストレージといったサーバー機能をPC上にまるごと再現して開発を進めるのだ。
「ローカルで開発するときは、外部のクラウドサービスには接続せず、PC上でバックエンドの機能を再現して検証するのが一般的なやり方です。開発途中の不完全なものが外に出てしまうリスクを防げます」（石丸氏）
Claude Codeに「Firebaseエミュレーターを導入し、認証やデータベース、ストレージの開発環境をPC上に構築してください」と指示した。すると、見慣れないコマンドが次々と実行されていく。Firebaseを動かすために必要なNode.jsやJavaといったソフトウェアのインストールや設定ファイルの自動生成など、裏側ではかなりの量の作業が進んでいた。
石丸氏によると、こうした環境構築はドキュメントを読みながらコマンドを1つずつ確認・実行していく作業で、途中で詰まったりすると半日近くかかることも珍しくなかったという。それがAIへの一言の指示で完了するのだから、改めてバイブコーディングの威力を実感する。
ログインもデータ保存も、AIへの一言で次々と機能実装される
次は、エミュレーター上でログイン機能を実装する。
「Firebaseエミュレーターでログイン機能を実装してください」と指示すると、Claude Codeが勢いよくソースコードを書き始めた。またも見慣れない文字列が画面を流れていく。途中で何度か承認を求められるが、石丸氏に確認しながら［Yes］を選択していく。
しばらくすると実装完了の報告があり、動作確認の手順が表示された。アプリケーションを起動するには2つのコマンドを実行する必要があるとのこと。1つはFirebaseエミュレーター自体の起動、もう1つはウイスキーアプリ本体の起動だ。これもClaude Codeに両方のコマンドをまとめて渡すと、一括で処理してくれた。素人感覚だと、コマンドを1行ずつ入力するのかな、と思ったのだが、複数行まとめてコピーしてよい、というのには驚いた。
ブラウザーでアプリを開くと、以前にはなかったログイン画面が表示されていた。今回はFirebaseエミュレーター上で認証機能の動作を確認するため、まずはメールアドレスとパスワードでログインできる形を実装した。なお、正式なリリース版では、第4回で決めた通り、Googleログインを採用する予定だ。
別のブラウザーを開き、異なるアカウントでログインしてみたところ、こちらも成功。他のアカウントで登録したウイスキーのデータが表示されたが、これはユーザーごとのアクセス制御をまだ指示していないためだ。
続いて、ウイスキーのログデータをデータベースに保存する機能を実装する。
「ウイスキーのログデータをデータベースで保存し、取得できるようにしたい。Firebaseエミュレーター上で動作させてください」と指示。Claude Codeが再び作業を開始し、しばらくすると完了の報告が返ってきた。
ここで石丸氏の指示に従って動作確認を行う。ウイスキーの画像をアップロードして保存した後、別のブラウザーで同じアカウントにログインしてみる。すると、先ほど保存したログデータがきちんと表示された。ブラウザーのキャッシュではなく、Firebaseのデータベースに保存されていることが確認できた瞬間だ。
画像ストレージの追加でアプリの基本機能が揃う
データベースへの保存は成功したが、画像の保存にはもう1ステップ必要だった。
石丸氏の説明によると、銘柄名やコメントといった文字・数値データを扱う「データベース」と、画像ファイルを扱う「ストレージ」は別の仕組みだという。そこで「画像情報をストレージで保存できるようにしてください。Firebaseエミュレーターで実装してください」と指示すると、Claude Codeが実装を進めてくれた。
途中、画像のファイルサイズがエミュレーターの上限を超えるエラーが発生した。通常は、エラー内容をコピーしてチャット欄に貼り付けると対応してくれるのだが、今回のエラーメッセージはコピーできなかった。そこで、画面キャプチャーを撮り、その画像をアップロードして対応をお願いしたところ、さくっと画像を圧縮する仕組みを自動で導入して解決してくれた。
最終確認として、ウイスキーの画像をアップロードして保存し、別のブラウザーで表示を確認。サムネイル画像も含めて正常に表示された。エミュレーター上ではあるが、ログイン・データベース保存・画像ストレージという、アプリの基本機能が一通り揃った。
わからないことはどんどんAIに聞く姿勢が大切
今回も、筆者が行ったのはClaude Codeのチャット欄に日本語で指示を出し、承認を求められたら内容を確認して［Yes］を押すことだけだ。Git操作、環境構築、ログイン機能、データベース連携、画像ストレージと、従来ならエンジニアでも時間がかかっていた工程が、わずか1時間ほどで完了した。
ただし、「これを素人が1人でできるか」と問われると、やはり難しいと感じる。「Firebaseエミュレーターを使う」という発想自体がそもそも出てこないし、エラーが出たときに何をどう伝えればよいのか判断に迷う場面もあった。そこで石丸氏にアドバイスしてもらった。
「アプリケーションの設計をしっかり生成AIに伝えてドキュメントに起こしておけば、どういう環境で構築すればよいかもAIが提案してくれます。Firebaseのような選択肢も、AIとの対話の中から出てくるはずです。簡単ではない領域に踏み込んでいるからこそ、わからないことはどんどんAIに聞く姿勢が大切です」（石丸氏）
なお、最後にClaude Codeの利用コストについても触れておきたい。
Claude Codeは本来、Claudeのサブスクアカウントを連携していれば、追加コストなしに利用できる。しかし、直前の別作業で利用が重なり、利用制限に達してしまったため、有料のAPIを利用することにした。今回、約1時間のセッションで消費した金額は5.5米ドル（約900円）だった。安いと感じるか高いと感じるかは人それぞれだが、ログインやデータベースの設定という、筆者では不可能な作業をしてくれたのだから、バイブコーディングのコスパは悪くないだろう。
次回は、ユーザーごとのアクセス制御や画面デザインの改善など、アプリとしての完成度を高める作業に取り組む予定だ。
（第7回へ続く）
著者プロフィール：柳谷 智宣
IT・ビジネス関連のライター。キャリアは26年目で、デジタルガジェットからWebサービス、コンシューマー製品からエンタープライズ製品まで幅広く手掛ける。近年はAI、SaaS、DX領域に注力している。日々、大量の原稿を執筆しており、生成AIがないと仕事をさばけない状態になっている。
・著者Webサイト：https://prof.yanagiya.biz/
