Firebase Studio で Gemini in Firebase を試す

Firebase Studio にある Gemini in Firebase は、コードエディタ内、コマンドライン インターフェース(CLI)、チャットを使用して、コーディング ワークフローを効率化するための 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 に変更します。

    • 質問: プランを作成します。このモードでは、Gemini はコード変更を提案せずに質問に回答します。
    • エージェント: アプリに変更を加えます。このモードでは、Gemini はアプリへの変更を提案しますが、ユーザーの確認なしに変更を適用することはありません。
    • エージェント(自動実行): アプリに変更を自動的に適用します。このモードでは、Gemini はリクエストに基づいてコードを自動的に変更しますが、ターミナル コマンドを実行する前に確認を求めます。
  6. (省略可)独自の Gemini API キーを追加し、別の Gemini モデルを選択します。詳細については、お客様所有の鍵の使用: チャットで他の Gemini モデルを使用するをご覧ください。

  7. (省略可)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. コード補完を無効にするには、[入力時のインライン コード補完を有効にする] オプションの選択を解除します。

Gemini CLI を使用して Gemini とチャットする

Gemini CLI は、Google の Gemini モデルの威力をターミナルに直接取り込むオープンソースの AI エージェントです。Gemini CLIFirebase の Gemini と同様のタスクを実行しますが、コード生成、デバッグ、コマンドの実行、プロジェクト ファイルの管理などのタスクでターミナルを長時間使用するデベロッパーの場合は、Gemini CLI の使用をおすすめします。

Gemini CLI を使ってみる

Firebase StudioGemini CLI にアクセスするには:

  1. コードビューに切り替える: Prototyper mode, Code switch icon Switch to Code to open Code view. で作業している場合

  2. ターミナルにアクセスする: メニュー アイコン メニュー > [ターミナル] > [新しいターミナル] を開きます。

  3. Gemini CLI を開く: ターミナルに次のコマンドを入力します。

    gemini
    
  4. カスタマイズ: キーボードの矢印キーを使用してカラーテーマを選択し、Enter キーを押します。

  5. 認証: プロンプトが表示されたら、認証方法を選択します。認証の詳細については、ドキュメントをご覧ください。

今後は、ターミナルで gemini と入力するだけで Gemini CLI にアクセスできます。

かわりに、スクリプトや自動化に役立つ非インタラクティブ モードで Gemini CLI を実行することもできます。このモードでは、入力したコマンドの実行後に Gemini CLI が自動的に終了します。このモードを使用するには、--prompt フラグまたは -p フラグを使用します。例:

gemini -p "Create a markdown file that explains my app's architecture"

Gemini CLI を含むコマンドを使用する

Gemini CLI とチャットして、質問やリクエストを行うことができます。次のように質問できます。

  • explain [file_name.js]: 見慣れないコードが表示された場合は、このコマンドを使用して説明をリクエストします。[file_name.js] を関連するパスに置き換えるか、コードをプロンプトに直接貼り付けるだけです。
  • refactor [code_snippet]: Gemini にリファクタリングの改善案を提案するよう求めることで、コードの構造や効率性を高めます。
  • debug "Error: Module not found: 'firebase-admin'": エラーが発生した場合は、エラー メッセージを Gemini に渡して、分析情報と解決策の候補を取得します。
  • summarize "Key features of Firebase Realtime Database": Gemini は、迅速な調査と簡潔なコンテンツの要約を提供できます。

また、セッションの管理、インターフェースのカスタマイズ、動作の制御に役立つ組み込みコマンドもいくつかサポートしています。

  • /help: このコマンドを入力すると、使用可能なコマンドとオプションの包括的なリストが表示されます。これは、探索の優れた出発点となります。
  • /chat: 会話の履歴を保存して再開し、分岐する会話を作成したり、後のセッションから以前の状態を再開したりします。
  • /tools: Gemini CLI 内で使用可能なツールのリストを表示します。
  • /restore: ツールが実行される直前の状態にプロジェクト ファイルを復元します。これは、ツールによって行われたファイルの編集を元に戻す場合に特に便利です。

コマンドの全一覧については、Gemini CLI ドキュメントをご覧ください。