Firebase Studio で Gemini in Firebase を試す

Firebase Studio にある Gemini in Firebase は、コードエディタ内とチャットを使用して、コーディング ワークフローを効率化するための AI アシスタントを提供します。Gemini in Firebase では、コードの候補の提示、コードの生成、コードのコンセプトの説明、プロジェクト ファイルの更新、ターミナル コマンドの実行、コマンド出力の解釈を行えます。

Gemini in Firebase は、設定なしですぐに使用を開始できます。

インライン コード補完とコードベースのインデックス登録はデフォルトでオンになっています設定を調整する方法をご確認ください。

Gemini in Firebase は、Code ビューで使用できます。Firebase Studio で起動するアプリ、Firebase Studio にインポートするアプリ、App Prototyping agent によってビルドされたアプリで使用できます。

Gemini in Firebase でチャットする

Firebase Studio AI を活用したチャットで開発ワークフローを容易にします。

チャットスタートガイド

  1. Firebase Studio でワークスペースを開きます。

  2. ワークスペースの下部にあるスパークル アイコンGemini をクリックします。

  3. Gemini とチャットを開始します。

  4. (省略可)アイコンを添付する [添付] をクリックして次のいずれかのオプションを選択し、マルチモーダル プロンプトを Gemini に送信します。

    • 描画: 描画ツールを使用して目的のデザインを設計し、プロンプトを入力して [送信] をクリックします。
    • 画像: 画像をアップロードし、プロンプトを追加して [送信] をクリックします。
    • ファイル: コンテキストとして使用するファイルをワークスペースから選択し、プロンプトを追加して [送信] をクリックします。
  5. (省略可)独自の Gemini API キーを追加し、別の Gemini モデルを選択します。詳細については、お客様所有の鍵の使用: チャットで他の Gemini モデルを使用するをご覧ください。

  6. (省略可)Gemini in Firebase のサポート方法をカスタマイズするには、設定を調整して AI ルールファイルを追加します。詳細

チャットパネルで Gemini 質問を入力すると、コードの候補が表示されます。Gemini は、プロジェクトの構成ファイルとコードを更新することや、ワークスペース内で直接ターミナル コマンドを実行することも可能です。Gemini は、次のいずれかを代わりに行なうかどうかを尋ねることがあります。

  • ファイルを変更する: Gemini は、機能の追加、バグの修正、コードのリファクタリングを行えます。Gemini がファイルの変更を提案すると、次の 2 つのオプションが表示されます。
    • ファイルを更新: Gemini の提案された変更でファイルを直接更新します。
    • 変更内容を確認: 提案された変更内容を別のウィンドウで開き、適用する前に確認します。
  • ターミナル コマンドを実行する: Gemini は、依存関係のインストールや開発用サーバーの起動などのコマンドを実行できます。これらのコマンドは自動的に提案される場合もありますが、Gemini に実行を依頼することもできます。Gemini がコマンドを提案すると、[ターミナル コマンドを実行] ボタンが表示されます。これをクリックすると、Firebase Studio 内のターミナルでコマンドが実行されます。Gemini は、コマンドを実行して結果をチャット ウィンドウに表示し、次のステップを決定することに役立ちます。

チャットで複雑なタスクを完了する

Gemini in Firebase は、次のような複雑な開発タスクの完了に役立ちます。

  • コードのドキュメント化: 「ドキュメントを作成」と指示すると、Gemini はコードに適した形式でドキュメントを自動生成できます。
  • テストケースの作成: Gemini は、単体テストを自動的に更新して生成できます。Gemini に「テストを作成」と指示すると、Gemini は既存の単体テストファイルを検索し、不足しているテストをファイルに追加できます。既存の単体テストファイルが見つからない場合は、単体テストが作成され、確認、イテレーション、承認を行えます。Gemini に実行を依頼することも可能です。
  • 依存関係の管理: コードに不足している依存関係を検出し、チャット インターフェースから直接解決するように Gemini へ依頼できます。
  • コードのリファクタリング: 関数の抽出や複数のファイルにわたる変数の名前変更など、コードのリファクタリングを Gemini に依頼できます。Gemini は提案された変更のリストを生成します。変更を確認して適用した後、Gemini に指示して、ユニットテストを更新して実行し、リファクタリングを確認してテストが引き続き合格することを確認できます。
  • Docker ワークフローの生成と実行: ワークスペースで Docker を有効にしている場合は、Gemini に Dockerfile の作成を依頼する(「アプリの Dockerfile を作成する」など)ことで、アプリケーションをすばやくコンテナ化できます。Gemini は Dockerfile を生成した後、コンテナをビルドして実行できます。
  • 単体テストと統合テストを実行する: 特定のテストスイートを実行するように Gemini に指示することで、テストの実行を開始できます(「単体テストを実行」や「統合テストを実行」など)。Gemini は、プロジェクトに適したコマンド(npm test や特定のテストランナー コマンドなど)を実行し、チャット インターフェース内にテスト結果を表示します。

チャットでスラッシュ コマンドを使用する

Gemini in Firebase のチャットによる出力をガイドするには、スラッシュ コマンド(スラッシュ(/)で始まるショートカット)を使用します。Gemini チャット プロンプトの先頭に / を入力し、使用可能なスラッシュ コマンドのリストから目的のアクションを選択します。

スラッシュ コマンドの一覧については、チャットで / と入力します。

たとえば、/generate に続いて目的とする内容の簡単な説明を行うと、コード スニペットを生成するプロンプト ショートカットになります。

/generate css for a black background の実行に対する戻り値の例を次に示します。

body {
  background-color: black;
}

/* This CSS code sets the background color of the <body> element to black. This will make the background of the entire web page black. */

チャット履歴の管理

Gemini in Firebase のチャットでは、異なるスレッドを開始することで、さまざまなトピックを分離できます。トピックに基づいて以前のスレッドを参照できます。

新しいチャットを開始するには:

  1. チャットのヘッダーバーで [新しいチャット] をクリックします。

  2. プロンプトを入力します。

別のチャット スレッドに切り替えるには:

  1. チャット ヘッダーバーの [最近のチャット] をクリックします。

  2. アクセスするチャット スレッドを選択します。

  3. チャット スレッドを続行するか、Gemini を使用して以前のチャットを参照します。

チャット スレッドを削除するには:

  1. チャット ヘッダーバーの [最近のチャット] から、削除するチャット スレッドを選択します。

  2. チャット ヘッダーバーの [チャットを削除] をクリックします。チャット履歴からチャット スレッドを削除することを確認します。

チャットでコードの引用を表示する

コードの候補を確認できるように、Firebase Studio は元のソースと関連するライセンスに関する情報を共有します。チャット ウィンドウでコード引用の完全なログを確認するには、チャット ヘッダーバーの [ライセンスログ] アイコンをクリックします。

チャット ヘッダーバーの [ライセンスログ] アイコン

Google コードの引用について詳しくは、生成コード支援をご覧ください。

Gemini in Firebase からインライン ヘルプを受ける

Firebase Studio は、Gemini からの AI 支援コード候補で生産性を高めます。

コード補完はデフォルトでオンになっています。詳しくは、設定を調整する方法をご覧ください。

Gemini in Firebase からコードの候補を得る

Gemini は、考えられるコードの完全なブロックをインラインで生成します。Gemini インライン コード支援を使用する手順は次のとおりです。

  1. Firebase Studio でワークスペースを開きます。

  2. ヘルプが必要なコードのファイルまたは行に移動し、Ctrl+I(macOS では Cmd+I)を押します。

  3. 目的とする内容の説明を入力すると、Gemini が候補を生成します。アクションをショートカットとして使用して、候補をガイドすることもできます。たとえば、/fixError と入力すると、インライン コードのエラーを修正できます。

  4. 次のいずれかのオプションの実行を選択します。

    • 生成されたコードを保持するには、[承認] をクリックします。
    • 候補を別の場所に貼り付ける、あるいは新しいファイルに移動させるには、[破棄] ボタンのプルダウン メニューから対応するオプションを選択します。
    • 新しい候補を生成するには、[再生成] をクリックします。
    • 候補を完全に削除するには、[破棄] をクリックします。
  5. (省略可)Gemini in Firebase のサポート方法をカスタマイズするには、設定を調整して AI ルールファイルを追加します。詳細

Gemini in Firebase のコマンドをインラインで表示する

  1. 特定のコードに対して Gemini コマンドをインラインで表示するには、ヘルプが必要なコードを選択して右クリックします。

  2. メニューからスパークル アイコンGemini を選択してから、実行するアクションを選択します。

Gemini のコード補完候補を使用する

コードの記述を支援するために、Firebase Studio には AI コード補完が用意されています。この機能は、入力を開始するとすぐに、開いているファイル内のコードを予測して自動入力します。

コード補完はデフォルトでオンになっています

コード補完のオンとオフを切り替えるには、次のいずれかの方法でコード補完の設定を調整します。

  • settings.json ファイルを使用している場合は、"IDX.aI.enableInlineCompletion"true または false に設定します。

  • Firebase Studio ワークスペースで設定を更新するには:

    1. ワークスペースの左下にある 歯車アイコン [管理] をクリックし、[設定] を選択するか、Ctrl+, キー(Mac の場合は Cmd+,)を押します。

      注: Prototyper view, click Code switch icon Switch to Code to open Code view.App Prototyping agent を使用している場合

    2. [ワークスペース] タブを選択し、[Firebase Studio] > [AI] > [コード補完を有効にする] の設定を検索します。

    3. コード補完を無効にするには、[入力時のインライン コード補完を有効にする] オプションの選択を解除します。