Googleが全てのバイブコーディングアプリを駆逐した(Firebase Studio)

AGIに仕事を奪われたい
この記事は約19分で読めます。

11,311 文字

Google just destroyed all vibe-coding apps (Firebase Studio)
Work 30% faster with Vectal: start a business with AI Agents? Go here: DEVs, I'M HIRING!...

Googleは世界最高のAIモデルであるGemini 2.5 Proを取り、実質的に何でも構築できるVIPコーディングアプリに変えましたが、不思議なことに誰もこれについて話していません。このアプリはFirebase Studioといい、無料で非常に使いやすいです。お見せしましょう。
まず、firebase.studioにアクセスすると、このページにリダイレクトされます。最初のチェックボックスをクリックし、「確認」をクリックします。ここから構築を始めることができます。
私はDrawやMyroのような、シンプルなウェブベースの描画ボードを作りたいと思います。「AIでプロトタイプ作成」をクリックします。これが画面の様子です。アプリの計画、つまりアプリの設計図が作成されました。「whiteboardly」と名付けられています。機能はフリーハンドツール、シェイプツール、テキストツールなどです。素晴らしいですね。
さらにスタイルガイドラインも提供されています。色、レイアウト、アイコンなど。この概要が気に入ったので、「このアプリをプロトタイプ化」をクリックします。これでFirebase Studioはバックエンドからフロントエンドまで、アプリ全体を構築しています。
Firebase Studioを本当に理解するには、Google Firebaseを理解する必要があります。Firebaseとは何かというと、アプリ構築を支援するバックエンドサービスを提供するGoogleのサービスです。データベース、認証、分析、ホスティングなど、アプリのバックエンドに必要なものを提供しています。
Firebase Studioとは何でしょうか?Studioの部分は、好きなアプリをバイブコードできるGoogleの新製品です。つまり、Firebaseはこれらすべての認証、データベース、ホスティングなどのバックエンドサービスであり、Firebase Studioは新しいAIバイブコーディングアプリです。簡単に言えば、Firebase Studioはフロントエンドを担当し、これによりフルスタックのソリューションとなります。
Firebase Studioに戻ってみましょう。アプリが表示され、右側にFirebase Studioが行ったことが全て見えます。多くのファイルを作成しましたが、実際にはそれほど多くはなく、アプリをクリーンに保っています。また、AIの機能を持たせるためにGeminiをアプリに追加することも提案しています。それはすぐに行いますが、まずアプリが機能するか確認しましょう。
描画、円、四角形、三角形などのボタンがありますが、機能はまだ完全には動作していないようです。これはプログラミングに最適なモデルであるGemini 2.5 Proをまだ接続していないためです。これを行う方法をお見せします。これは少し分かりにくい部分です。
右上にある「コードに切り替え」というボタンをクリックします。これでコードエディタ部分に移動し、プロトタイパーよりも多くの変更を加えることができます。完全な初心者ならプロトタイパーで作業を続けられますが、AIについて真剣で、多くの機能を持つアプリを構築したいなら、このようにコードエディタに切り替えるとよいでしょう。
重要なのは、どのモデルを選択するかを実際に制御できることです。ここでGemini 2.5 Proを選択する必要があります。これは現在、プログラミングに最適なモデルで、拡張思考機能付きのClaude 3.7 Sonnetよりも優れています。Gemini 2.5 Pro experimental 0325を選択すると、Google AI studioからGemini APIキーを取得する必要があることがわかります。
初めての場合は深呼吸して慌てないでください。複雑そうに聞こえますが、実際は非常に簡単です。このリンクをクリックしてAI studioを開きます。ここで「APIキーを作成」をクリックするだけです。Google Cloud Projectsのいずれかに割り当てる必要があります。私のスタートアップであるVectal AIを選択し、APIキーを作成します。できました。APIキーは誰とも共有しないでください。パスワードのように扱ってください。このビデオをアップロードする前に私のものは削除します。
コピーをクリックし、Firebase Studioに戻ってここに貼り付けます。これでGemini 2.5 Proを選択できるはずです。確かに表示されました。Gemini 2.5 Proが選択されていることを確認してください。
ウェブをここにドラッグすることをお勧めします。これでGeminiチャットボットと会話しながらウェブアプリを見ることができます。「メイン機能がまだ動作していません。描画アイコンなどのアイコンをクリックしても、ホワイトボードにペイントが描画されません。これを修正してください」と言います。
重要な違いは、コーディングに最適なAIモデルを使用して修正していることです。この変更だけで、ほとんどの人がスキップするこの変更だけで、Firebase Studioは3倍良くなります。
Geminiが問題を特定したようです。page.tsxでツールバーが適切に設定されていないようです。いくつかの変更が提案されました。ただ「ファイルを更新」をクリックします。もしこれがよりリスクの高い変更であれば、注意深く確認しますが、まったく新しいアプリなので、すべての変更を受け入れることでバイブコードすることができます。
これが実際に機能するか見てみましょう。戻ってウェブアプリをリロードします。リロード後、いくつかの新しいアイコンが表示されています。線の太さとカラーピッカーがあります。赤色を選んでみましょう。太さも設定できます。これで描画できるようになっただけでなく、線の太さを選択し、異なる色に変更することもできます。
描画の問題は解決されましたが、消しゴムをテストしてみましょう。消しゴムは動作しませんね。「消しゴムがまだ動作していません。修正してください」と言います。
いくつかの変更が行われました。3つのものが修正されました。いくつかの線を描いて消しゴムをテストしてみましょう。消しゴムはまだあまり機能していないようです。あ、「ファイルを更新」をクリックしていませんでした。すべての変更後にクリックする必要があります。つまり、このアプリはcursor agentのようにエージェンティックではありません。しかし、Firebase Studioはつい3、4日前に登場したばかりであることを覚えておいてください。これは今後さらに良くなるでしょう。そして、世界最高のコーディングAIモデルによって動作していることは間違いなく強力な兆候です。
もう一度試してみましょう。これは私のミスでした。変更を適用していませんでした。さて、今はもっと太いブラシを使うことができます。これは良いですね。この太さは消しゴムにも適用されます。素晴らしい、とても良いです。
見ての通り、Gemini 2.5 Proは私が指示するすべての機能とバグ修正を一発で実現しています。これは本当に素晴らしいAIモデルであり、だからこそ発売されたときにすぐにVectalに追加したのです。
紹介したいことの一つは、私たちが先日リリースした「バックグラウンドエージェント」という新機能です。他のタスク管理アプリにはないものです。Vectal.aiにいる時、あなたのタスクが表示されます。例えば「ドバイで新しいLLCを設立する」というタスクがあります。ここに新しいボタン「ベクタルエージェントを有効化」があります。これをクリックすると、ベクタルエージェントはこのタスクに対して自律的に作業を開始します。
クリックして推論の開始を見ることができます。これには数分かかります。最初に推論から始まり、ウェブ検索や要約などを行います。最も良いことは、複数のタスクで同時にこれを有効化できることです。例えば「AIスタートアップの新しいランディングページを作成する」というタスクがあります。「ベクタルエージェントを有効化」をクリックすると、このタスクに対しても推論が始まります。常にタスクに適応し、ユーザーとして何もする必要はありません。ベクタルエージェントを有効化し、休憩に行ったり、散歩に行ったり、他の作業をしたりしている間に、それらのタスクに取り組み始めます。
Vectalのバックグラウンドエージェントやその他の機能にアクセスしたい場合は、vectal.aiにアクセスして完全に無料で始めることができます。無制限の実行と世界最高のAIモデルすべてへのアクセスをご希望の場合は、Vectal Proへのアップグレードをご検討ください。
Gemini 2.5 Proが現在世界最高のAIモデルである理由を説明します。まず、LM Arena(Chatbot Arenaとしても知られる)でナンバーワンにランクされています。これは完全に盲目的なテストで、ユーザーとして2つのLLMが提供され、どちらがどれか分かりません。より良い回答を与えたと思うものを選択し、それによってスコアが上がります。見ての通り、Gemini 2.5 Proは現在2位のChatGPT 4o latestを大きくリードしており、31ポイント差をつけています。これは大きなリードです。
また、100万トークンのコンテキストウィンドウを持っており、複数の書籍を簡単に収めることができます。あるいはVectalを使用している場合、すべてのタスク、メモ、ユーザーコンテキストを各プロンプトに簡単に収めることができ、明らかに非常に便利です。ちなみに、このAIモデルについて詳しく知りたい場合は、このビデオをクリックしてください。下にもリンクしておきます。
Firebase Studioに戻り、このアプリを拡張し続けましょう。円の機能が動作するか見てみましょう。いいえ、動作していませんね。「円、四角形、三角形の機能を修正してください」と言います。
アプリをデバッグする際には、問題を明確に説明する必要があります。ただし、Gemini 2.5 Proのような推論モデルを使用する場合、実行する手順を詳細に示す必要はありません。彼らはそれについて推論するからです。エラーが表示された場合は個人的に受け止めないでください。単に再読み込みしてください。
これが実行されている間に、このAIモデルで人々が構築した最も印象的なものをいくつか紹介します。この人はわずか2つのプロンプトでテトリスアプリを作成することができました。これは本当に印象的で、特に私が約1年前に異なるAIモデルでこれを試みたことがあるからです。これが私が1年前に投稿した動画で、当時利用可能なAIモデルを使用したことは明らかですが、2つのプロンプトよりもはるかに困難でした。
これが今、2つの英語の文で可能になったという事実は驚くべきことです。何と言っていいかわかりません。文字通り、この動画を見ることができますが、私がこのようなものを作るのに数日かかりました。そしてそれはほんの1年前のことでした。AIの進歩は人々が認識しているよりもはるかに速いのです。
2つ目の例は、わずか数秒でマインドマップを作成してデプロイすることです。元のプロンプトは「テーマやトピックをマインドマップに変換するアプリ」というものでした。非常に曖昧で広範なものです。プログラマーである必要はなく、英語を話せる限り大丈夫です。
これは明らかに速度が上がっていますが、Firebase Studioがそのマインドマップアプリを数秒で構築している様子です。最初の試行で「自律型AIエージェントの仕組み」と言った時、マインドマップは実際にレンダリングされませんでした。JSONは見えましたが、ほとんどの人がやめて「AIはまだそこまでできていない」と言うところを、この人は「マインドマップのJSONは見えるが、実際のマインドマップは見えない」と言いました。そしてGemini 2.5 Proはその問題を修正し、マインドマップが表示されました。
もう一つの印象的な例は、この単純な太陽系アプリです。これは3Dで、太陽の周りを周回する各惑星のPOVを見ることができ、惑星に関する興味深い事実も表示されます。これもFirebase Studioでわずか数個のプロンプトで構築されました。
ちなみに、Firebase Studioのようなクールな新しいAIアプリについてもっと動画を作ってほしい場合は、チャンネル登録をお願いします。現在、この動画を見ている方の20%しか登録していないからです。完全に無料で、登録ボタンをクリックするのはわずか2秒です。この動画が価値あると思われる場合は、ぜひ登録をご検討ください。
Gemini 2.5 Proがアプリに加えた変更を見て、これらの形状ボタンが機能するようにしましょう。ここにすべてのコードがありますが、真のVIPコーダーとしてAIを信頼し、「更新」をクリックします。何か問題が発生した場合は、発生した内容を明確に詳細に説明するだけです。これがエラーの秘訣です。エラーが発生した時、それを再現する方法を明確かつ詳細に説明すれば、ほとんどの場合モデルは修正してくれます。もちろん、複雑なものであれば実際にコードを調べる必要があるかもしれませんが、このような単純なアプリの場合、言い訳はありません。
オレンジのような別の色を選んで、これらの形状の一つを試してみましょう。円があります。素晴らしい。四角形もあります。長方形も作ることができます。これは非常に良いです。太さを試して、別の色、緑を試してみましょう。太い三角形、素晴らしい。このように、形状は単一のプロンプトで文字通り修正されました。
ここで「でもデビッド、なぜFirebase Studioはそんなに大きな話題なのか?Bold.new、v0ero、repletエージェントもあったじゃないか。なぜこれは違うのか、なぜこれは特別なのか」と思うかもしれません。FirebaseはFirebase Studioを動かすサービスであり、これは任意のアプリを公開してホストするための究極のバックエンドサービスであることを理解する必要があります。バックエンドで成功するAIスタートアップを構築するために必要なものがすべて揃っています。
私はVectalに「GoogleのサービスであるFirebaseを企業が使用する主な理由を10個列挙してください」と尋ねることができます。繰り返しますが、この質問に答えるためにGemini 2.5 Proモデルを使用しています。興味深いことに、これに対してウェブ検索に委託することを決定しました。これはちなみにPerplexity Proによって動作しています。Vectalを使用する場合、無料プランでもPerplexity Proが無料で利用できます。
アプリ開発の加速、リアルタイムデータベース、スケーラブルなインフラストラクチャ、簡素化された認証、堅牢な分析、クラウドメッセージング、クロスプラットフォーム開発、コスト効率、QAツール、機械学習の統合など、Firebaseができることのほんの一部です。Firebase StudioはFirebaseの上に構築されているため、その上にアプリを構築するのは非常に魅力的な選択肢となります。
また、IDEやVIPコーディングアプリとして使用する場合、アイデアを公開可能なアプリに変える過程がこれまでになく簡単になります。Firebase Studio内の別の便利な機能をお見せしましょう。これにアクセスするには、コードビューからプロトタイパーに戻る必要があります。プロトタイパー内にいる時、「注釈」機能をクリックできます。
これにより、変更したい箇所を特定し選択するために、ウェブアプリに簡単に描画することができます。このボタンを黒くしたいとします。描画アイコンや数字の7のような上のツールを選択し、このボタンをハイライトして、プロンプトに「このボタンを黒くする」と書くことができます。
フロントエンドの経験がなく、要素の説明方法がわからなくても、単にそれらの上に描画して「これを黒くして」「このフォントサイズを大きくして」「このボタンを左に移動して」と言うことができます。HTMLのdivの名前を知る必要はありません。注釈機能を使用して、Firebase Studioに何を変更したいのか、どのように変更したいのかを視覚的に伝えるだけです。
この機能は基本的にVIPコーディングを取り、さらに簡単にします。つまり、基本的にVIP描画のようなものです。シンプルなアプリを描画し、それがリアルタイムで表示されるようになります。これは今後3〜6ヶ月で登場するでしょう。簡単に予測できます。
プロトタイパーではなくコードモード内では、Firebase Studioは基本的に完全なIDEであることがわかります。左側にすべてのファイルが表示され、検索、ソースコントロール、デバッグモード、拡張機能、そしてVS Codeのようなリンクで見つかるその他のものが表示されます。
これについて興味を持ったとき、私はVectalに尋ねました。確かに、Firebase Studioはcode-ossの基盤の上に構築されており、これはproject idxから進化したもので、VS codeのオープンソースコードからフォークされたものです。だから、cursorやVS codeを使用している場合、Firebase Studioは非常に馴染みのある見た目になります。なぜなら、それは文字通りそのオープンソースコードの上に構築されているからです。
しかし主な違いは、VS codeやcursorとは異なり、ダウンロードしてコンピュータで実行する必要がなく、ウェブ上でFirebase Studioを使用できることです。15年前のノートパソコンでも、世界最高のAIモデルを搭載した最先端のIDEにアクセスし、好きなアプリを構築することができます。これは少なくとも力を与えるものです。
Firebase Studio内のもう一つの重要なボタンはプロトタイプリモートにあります。これは実際に非常に直感的ではなく、非常に隠れています。ここにあるプロジェクト名をクリックする必要があります。プロジェクト名を変更するだけのこのボタンではなく、ホワイトボード全体のプロジェクト名をクリックします。
これでコンソールが開き、ここではプロトタイパーではできないことを多く行うことができます。例えば、ユーザー認証やCloud Firestoreのような製品をアプリに追加することができます。アプリに認証を追加したいとします。これを起動し、有料機能を追加する準備ができているとしましょう。無料ユーザーと有料ユーザーを区別するためにはユーザーが認証する必要があります。
Firebase Studioを使用すると、これは非常に簡単です。認証をクリックし、開始をクリックし、使用したい認証方法を選択します。メール/パスワード、Googleログイン、GitHubログイン、Microsoft、Twitterなど何でも選べます。メール/パスワードでいきましょう。クリックして両方を有効にし、保存します。これだけで、プロバイダーとしてメールとパスワードの認証が有効になります。もっと追加したい場合は、「新しいプロバイダーを追加」をクリックします。Googleやあるいは Apple IDでのログインを追加できます。
Firebaseコンソールでは認証の追加以外にもできることがたくさんあります。Cloud Firestore、ストレージ、ホスティングなどのビルド機能を追加できますが、クラッシュリティクス、パフォーマンス、クラウドメッセージング、リモート構成などを使用してアプリを最適化することもできます。AIスタートアップを月間数百万ユーザーにスケールするために必要な他のものも使えます。
正直なところ、Firebaseは非常にスケーラブルな製品です。あらゆる規模の企業に使用できます。さらに、コンソールを使えば、GenkitやVertex AIを使ってアプリにAI機能を簡単に追加することもできます。
アプリにGeminiモデルを追加したいとしましょう。私たちの小さなホワイトボードの左下にボタンを設置し、モデルとチャットして描画を説明してもらえるようにするなど、何かAI機能を思い浮かべてください。コンソールを使えば簡単にそれを行うことができ、GoogleのモデルならどれでもGemini 2.5 Proをお勧めしますが、Googleが提供するモデルを使用して、GenkitやVertex AIを通じてFirebaseコンソールで簡単に統合できます。
左側を見ると、私のウェブカムをもう一度移動させますが、さらに多くの機能が見えます。ここに製品カテゴリがあります。「ビルド」の下には、アプリのチェック、アプリのホスティング、認証、データ接続、拡張機能、Firestoreデータベース、機能、ホスティング、機械学習、リアルタイムデータベース、ストレージがあります。
次に「実行」にはABテスト、ADMob、アプリ配布、クラッシュリティクス、ダイナミックリンク、メッセージング、パフォーマンスなど、アプリのバックエンドに必要なものはすべてFirebaseがカバーしています。
アプリに追加した機能や製品に満足し、アプリの機能に満足したら、右上の「公開」ボタンで公開できます。非常にシンプルです。これは3段階のプロセスです。まず、Firebaseプロジェクトを選択する必要があります。明らかに、Firebase StudioはアプリケーションをホスティングするためにFirebaseアプリホスティングを使用します。プロジェクトを選択し、請求アカウントをリンクする必要があります。
お持ちでない場合は、このリンクをクリックして、クラウド請求アカウントを作成します。設定には数分かかりますが、大したことはありません。「次へ」をクリックすると、最後のステップは環境のセットアップです。
エラーが発生しても慌てないでください。Google Cloud Studioのコンソールに行き、新しい請求プロフィールを設定する必要があります。これらの手順を踏むだけで、一度だけ行う必要がありますが、出身国、通貨、クレジットカードの請求詳細を入力するだけで、Firebase Studioでアプリをウェブ上に公開するために必要なすべてです。
「デビッド、VIPコーディングでどのようなアプリを構築できるのか、VIPコーディングだけでどこまで行けるのか」と思うかもしれませんが、答えはどこまでも行けるということです。例えば、私は自分のAIスタートアップであるVectal.aiを純粋にVIPコーディングで構築しました。
正直なところ、アイデアを取り、月に10,000ドル以上を稼ぐ完全に機能するスタートアップに変えたのは、純粋にVIPコーディングを用いた世界でおそらく唯一の人だと思います。
ちなみに、それはすべてnew societyに記録されています。cursorでプロジェクトを作成し、Pythonでバックエンドを構築し、あらゆる種類のミスや教訓を経験する日々を文字通り見ることができます。それはすべてnew societyのクラスルーム内にあります。ちなみに、new societyへのリンクを動画の下に載せておきます。
しかし、十分な時間があり、適切なAIツールを使用すれば、あなたが構築したいものは何でも可能です。Vectalは、さまざまなAI機能を備えたフルスタックの生産性アプリです。他には存在しない無限の思考などの複数のAIエージェントを搭載しています。
明らかに、バックグラウンドエージェントもあります。ちなみに、これが実行が完了したときの様子です。私がすべてのタスクに対して有効にしたので、すべてのタスクを完了しました。例えばこれをクリックすると、チェコ市民としてドバイにLLCを設立するための手順が表示され、すべてのソースも含まれています。
これで20〜30分の調査が節約できたでしょう。明らかに今はドバイに住んでいるのでこれはもう必要ありませんが、ドバイにまだ住んでいなかった1年前にこのタスクがあったとしたら、少なくとも何時間もの調査を節約できたことでしょう。ここにはすべてのソースがあり、何をする必要があるかがわかります。リスト内の任意のタスクに対してこの機能を有効にすることができます。Vectal Proを使用すれば、無制限の数のタスクに対して実行できます。無料ユーザーは無制限の数のタスクでこれを実行できます。無料ユーザーは一度に2つのタスクでのみ実行できます。これは私たちが最近追加した最新の機能にすぎません。Vectalにはアイデアボックスがあり、そこで素早く思いつきを書き出すことができます。次にタスクリストがあり、これがメインの作業、メインのタスクです。そして長期間覚えておきたいノートもあります。最近では、プロジェクトも追加しました。これは異なるタスクや異なるノートをプロジェクトに分類するための簡単な方法です。
カスタム指示を追加することもできます。これは文字通り各プロジェクトのカスタムシステムプロンプトです。必要に応じて、さらに制御するためにメインのユーザーコンテキストを除外することも可能です。基本的にVectalは、他には存在しない多くの革新的な機能を備えた、あらゆる作業を行うことができる完全な生産性アプリです。そしてそれはほとんどVIPコーディングによって構築されました。
Firebase Studioや他のAIアプリで始めたいと思っていて、「これで十分なのか、お金を稼ぐ真剣なものを構築できるのか」と考えているなら、私は文字通りその生きた証拠です。以前にスタートアップの経験はなく、アイデアからゼロで始めて、わずか2ヶ月でバイブコーディングだけで、支払いを受け付ける完全にデプロイされたスタートアップを持ち、現在は米ドルで月に10,000ドル以上の月間経常収益を上げています。
アイデアがあれば、何でも、それを追求し、始めましょう。ソフトウェアを構築することは、人類の歴史上これほど簡単だったことはありません。生産性を最大化したいなら、vectla.aiにアクセスして登録してください。完全に無料で始めることができます。正直なところ、無料プランも素晴らしいです。Grok Free、Mini LLaMA for Scout、DeepSeek 1 Plusと、Vectalが提供する主要な機能すべてに文字通りアクセスできます。
もちろん、Vectalエージェントの無制限アクセス、バックグラウンドエージェントの実行、無限思考、そして世界最高のAIモデルへのアクセスを希望する場合は、Vectal Proにアップグレードすることを確認してください。いずれにせよ、どのようなタスク管理アプリを使用していても、遅かれ早かれvectal.aiに切り替えることになるので、今日切り替えた方がいいでしょう。
以上です。視聴いただきありがとうございます。素晴らしく生産的な一週間をお過ごしください。

コメント

タイトルとURLをコピーしました