IDX で Gemini とチャットする

Project IDX は、AI を活用したチャットボットで開発ワークフローを容易にします。IDX で Gemini のチャット アシスタントを使用する前に、Gemini をワークスペースに追加してください。

Gemini のインタラクティブ チャットを利用する

  1. Project IDX を開きます。まだ追加していない場合は、Gemini をワークスペースに追加します。

  2. ワークスペースの下部にある Gemini アイコンをクリックするか、Cmd+Shift+Space キー（ChromeOS、Windows、Linux の場合は Ctrl+Shift+Space キー）を押します。[インタラクティブ チャット] サイドバーが表示されます。

インタラクティブ チャットを有効にしてアクティブにすると、Gemini に質問してコードの候補を取得できます。Gemini は、プロジェクト構成ファイルとコードを更新したり、ワークスペース内で直接ターミナル コマンドを実行したりすることもできます。Gemini から次のようなリクエストが届くことがあります。

  • ファイルを変更する: Gemini は、機能の追加、バグの修正、コードのリファクタリングを行うことができます。Gemini がファイルの変更を提案すると、次の 2 つのオプションが表示されます。
    • ファイルを更新する: Gemini が提案した変更をファイルに直接反映します。
    • 変更内容を確認: 提案された変更内容を別のウィンドウで開き、適用する前に確認します。

  • ターミナル コマンドを実行する: Gemini は、依存関係のインストールや開発用サーバーの起動などのコマンドを実行できます。Gemini がこれらのコマンドを提案する場合もありますが、Gemini に実行を依頼することもできます。Gemini がコマンドを提案すると、[ターミナル コマンドを実行] ボタンが表示されます。クリックすると、IDX 内のターミナルでコマンドが実行されます。Gemini がコマンドを実行し、チャット ウィンドウで結果を解釈して、次のステップを決定します。

インタラクティブ チャットで複雑なタスクを完了する

Gemini のインタラクティブ チャットはワークスペースを認識し、ファイルを変更したり、ターミナル コマンドを実行したりできるため、次のような複雑な開発タスクを完了できます。

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

Gemini Chat でスラッシュ コマンドを使用する

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

たとえば、/generate は、コード スニペットを生成するプロンプト ショートカットとして機能します。/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 チャットでさまざまなトピックを分離できます。トピックに基づいて以前のスレッドを参照できます。

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

  1. プラスアイコンをクリックするか、チャット ヘッダーバーのプルダウンから [新しいチャット] を選択します。

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

チャットスレッドが展開されたチャット ヘッダーバー

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

  1. チャット ヘッダーバーで、チャット スレッドを含むプルダウンを開きます。

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

  3. そのチャットスレッドを続行するか、IDX で Gemini との以前のチャットを確認します。

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

  1. チャット ヘッダーバーのチャット スレッドのプルダウンから、削除するチャット スレッドを選択します。

  2. チャット ヘッダーバーのゴミ箱アイコンをクリックします。チャット スレッドを削除することを確認します。

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

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

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

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