GSP1330

概要

Gemini は、AI を活用したコラボレーターであり、開発チームがより迅速かつ効率的にアプリケーションを構築、デプロイ、運用できるよう支援します。

このラボでは、Gemini for Developers をコードのデバッグに役立てたり、コード内の境界条件をテストする場合などに単体テストを生成したりする方法を学びます。

このコースのラボでは、アプリケーション開発者の視点から、一般的なソフトウェア開発ライフサイクル（SDLC）について説明します。SDLC のその他の側面（要件、セキュリティ、モニタリングなど）については、他のコースで取り上げます。

目標

このラボでは、Gemini for Developers の活用について、以下の点に焦点を当てます。

• Gemini for Developers を活用してランタイム エラーを特定し、解決する。
• 関数の単体テストを生成する。

学習内容

Cymbal Superstore は急成長中のオンライン ショッピング プラットフォームで、市場での競争力を維持するために継続的に改善しています。継続的開発の取り組みの一環として、「新商品」という新機能を設計しました。これは、店舗の在庫に追加された新商品をユーザーが簡単に見つけられるようにする機能です。

新しいエンドポイント newproducts がステージング環境にデプロイされましたが、ビジネス オーナーが望むものとは少し違います。新しいコードを修正してデバッグする必要があります。このラボでは、Gemini for Developers がどのように役立つかに焦点を当てるため、新しいコードは元のコードベースに追加されます。また、バックエンド サービスの単体テストをいくつか作成します。

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの説明をお読みください。ラボには時間制限があり、一時停止することはできません。タイマーは、Google Cloud のリソースを利用できる時間を示しており、[ラボを開始] をクリックするとスタートします。

このハンズオンラボでは、シミュレーションやデモ環境ではなく実際のクラウド環境を使って、ラボのアクティビティを行います。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

• 標準的なインターネット ブラウザ（Chrome を推奨）

注: このラボの実行には、シークレット モード（推奨）またはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生しないようにすることができます。

• ラボを完了するための時間（開始後は一時停止できません）

注: このラボでは、受講者アカウントのみを使用してください。別の Google Cloud アカウントを使用すると、そのアカウントに料金が発生する可能性があります。

ラボを開始して Google Cloud コンソールにログインする方法

1. [ラボを開始] ボタンをクリックします。ラボの料金をお支払いいただく必要がある場合は、表示されるダイアログでお支払い方法を選択してください。 左側の [ラボの詳細] ペインには、以下が表示されます。

   • [Google Cloud コンソールを開く] ボタン
   • 残り時間
   • このラボで使用する必要がある一時的な認証情報
   • このラボを行うために必要なその他の情報（ある場合）

2. [Google Cloud コンソールを開く] をクリックします（Chrome ブラウザを使用している場合は、右クリックして [シークレット ウィンドウで開く] を選択します）。

   ラボでリソースがスピンアップし、別のタブで [ログイン] ページが表示されます。

   ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。

   注: [アカウントの選択] ダイアログが表示されたら、[別のアカウントを使用] をクリックします。

3. 必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。

   {{{user_0.username | "Username"}}}

   [ラボの詳細] ペインでもユーザー名を確認できます。

4. [次へ] をクリックします。

5. 以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。

   {{{user_0.password | "Password"}}}

   [ラボの詳細] ペインでもパスワードを確認できます。

6. [次へ] をクリックします。

   重要: ラボで提供された認証情報を使用する必要があります。Google Cloud アカウントの認証情報は使用しないでください。 注: このラボでご自身の Google Cloud アカウントを使用すると、追加料金が発生する場合があります。

7. その後次のように進みます。

   • 利用規約に同意してください。
   • 一時的なアカウントなので、復元オプションや 2 要素認証プロセスは設定しないでください。
   • 無料トライアルには登録しないでください。

その後、このタブで Google Cloud コンソールが開きます。

注: Google Cloud のプロダクトやサービスにアクセスするには、ナビゲーション メニューをクリックするか、[検索] フィールドにサービス名またはプロダクト名を入力します。

Cloud Shell をアクティブにする

Cloud Shell は、開発ツールと一緒に読み込まれる仮想マシンです。5 GB の永続ホーム ディレクトリが用意されており、Google Cloud で稼働します。Cloud Shell を使用すると、コマンドラインで Google Cloud リソースにアクセスできます。

1. Google Cloud コンソールの上部にある「Cloud Shell をアクティブにする」アイコン をクリックします。

2. ウィンドウで次の操作を行います。

   • Cloud Shell 情報ウィンドウで操作を進めます。
   • Cloud Shell が認証情報を使用して Google Cloud API を呼び出すことを承認します。

接続した時点で認証が完了しており、プロジェクトに各自の Project_ID、 が設定されます。出力には、このセッションの PROJECT_ID を宣言する次の行が含まれています。

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

gcloud は Google Cloud のコマンドライン ツールです。このツールは、Cloud Shell にプリインストールされており、タブ補完がサポートされています。

3. （省略可）次のコマンドを使用すると、有効なアカウント名を一覧表示できます。

gcloud auth list

4. [承認] をクリックします。

出力:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. （省略可）次のコマンドを使用すると、プロジェクト ID を一覧表示できます。

gcloud config list project

出力:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} 注: Google Cloud における gcloud ドキュメントの全文については、gcloud CLI の概要ガイドをご覧ください。

タスク 1. コードの調査、生成、テスト

環境変数を設定する

1. Cloud Shell で次のコマンドを実行して、必要な環境変数を設定します。

export PROJECT_ID=$(gcloud config get-value project) export REGION={{{project_0.default_region|Lab Region}}} export ZONE={{{project_0.startup_script.lab_zone|Lab Zone}}}

2. 必要なファイルを Cloud Storage バケットから Cloud Shell にコピーします。

gsutil -m cp -r gs://duet-appdev/cymbal-superstore .

コードを調査する

Gemini は、開発者が使い慣れていないコード セグメントを説明できるだけでなく、将来のメンテナンス サイクルで開発者が理解しやすくなるように、コードに追加するコメントを作成することもできます。

3. Cloud Shell ウィンドウの右上にある [エディタを開く] オプションをクリックして、エディタを開きます。

Visual Studio Code エディタが開きます。Cloud Shell のメニューバーにあるオプションを使用して、新しいウィンドウでエディタを表示できます。

4. [File] > [Open Folder...] に移動します。

5. [cymbal-superstore] ディレクトリを選択し、[OK] をクリックします。

選択したフォルダが Visual Studio Code エディタの [Explorer] セクションに表示されます。

6. backend フォルダにある index.ts ファイルを開きます。

7. ファイルの右上にある Gemini の横の矢印をクリックします。

8. [Select Gemini Code Assist Project] をクリックして、Gemini で使用するプロジェクトを選択します。リストから プロジェクト ID を選択します。

9. 選択したプロジェクトで Gemini Code Assist が有効になっていないというメッセージがエディタの下部に表示された場合は、メッセージの [Enable API] ボタンをクリックして API を有効にします。

コードを生成する

10. index.ts ファイルの 102 行目までスクロールすると、/newproducts endpoint code goes here というテキストが表示されます。この行を以下のコメントに置き換えます。

{{{project_0.startup_script.prompt_1 | "Comment 1"}}} {{{project_0.startup_script.prompt_2 | "Comment 2"}}}

11. 新しく追加されたコメントを選択し、表示される黄色の電球アイコンをクリックします。リストから [Gemini: Generate code] をクリックします。

12. Gemini がコードの候補を表示します。提案されたコードを確認し、[Accept] をクリックするか Tab キーを押して受け入れます。コードは次のようになります。

注:

1. Gemini は「are in stock」（在庫あり）の意味を理解していました。一般的な意味を持つよく知られたフレーズなので、今回 Gemini はそれを使用しました。要件が一般的でない場合は、例が必要になることがあります。
2. 「quantity」という名前のデータ プロパティが使用されていたため、Gemini はそれを「in stock」という概念に関連付けることができました。変数、プロパティ、メソッドに略語、省略形、その他の標準的でない表現を使用すると、コードのメンテナンス性が低下するだけでなく、Gemini の提案の具体性も低下します。
3. 明示されていなくても、Gemini はデータベースの実行チェックを含むコードを提案し、ファイル内の他のエンドポイントとの一貫性を確保しました。

コードをテストする

13. Cloud Shell ウィンドウのツールバーにある [ターミナルを開く] ボタンを使用して、Cloud Shell ターミナルに戻ります。Cloud Shell ターミナルで次のコマンドを実行します。

cd ~/cymbal-superstore/backend npm run start

出力は次のようになります。

14. Cloud Shell ウィンドウのツールバーにある [+] オプションをクリックして Cloud Shell で別のターミナルを開き、localhost のエンドポイントを呼び出します。

curl localhost:8000/newproducts

1 つ目のターミナルで出力を確認すると、キャンセルされてエラーが発生しています。

出力は次のようになります。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 コードを生成してテストする。

タスク 2. Gemini とのチャットで調査する

1. エディタで index.ts ファイルを開きます。

2. スクリーンショットに示すように Gemini とのチャットを開き、プロンプトに所定のエラー メッセージを入力します。

{{{project_0.startup_script.prompt_2_1 | "Error message to be entered in the prompt"}}}

出力は次のようになります。

注: Gemini は実行するたびに異なる結果を生成するため、表示される結果が回答と一致しない場合があります。

3. コードを調べて、既存の問題を解決します。以下のコマンドがエラーの原因だと判断しました。

const query = firestore const products = await firestore .collection("inventory") .where("timestamp", ">", new Date(Date.now() - 604800000)) .where("quantity", ">", 0); .where("timestamp", ">=", sevenDaysAgo) .where("quantity", ">", 0) .get();

Gemini の回答では、フィルタを等式フィルタに変更するか、不等式フィルタのいずれかを削除するかを選択できます。

まず、エラーを解決するために Firestore 呼び出しから「quantity」フィルタを削除します。

4. 「quantity」不等式フィルタを削除するために、index.ts ファイルから次のコード フラグメントを削除します。

.where("quantity", ">", 0);

このコードを削除すると、関数がエラーなく動作します。数量が 0 の商品は API レスポンスから除外できなくなるため、ビジネス要件を満たせず、失敗します。在庫なしの商品を挿入しないように注意する必要があります。そのための適切なアプローチは複数あり、効果的なものもあれば、そうでないものもあります。そこで、Gemini に手伝ってもらうことにします。

5. Gemini とのチャットで以下の質問をします。index.ts ファイルが開いていることを確認してください。

{{{project_0.startup_script.prompt_2_2 | "Question to the Gemini Chat"}}}

出力は次のようになります。

チャットをリセットしても、2 つの WHERE 句を追加することを Gemini が繰り返し提案する場合は、別の回答を得るための手法があります。

{{{project_0.startup_script.prompt_2_3 | "Different question approach to the Gemini Chat"}}}

Gemini は、試せる代替案を提案することがよくあります。Firestore 以外の提案を受けるには、チャットをリセットしてプロンプトを数回変更する必要が生じる場合があります。

注: Gemini は、ときどき頑固になって、ランダムな（そして違法な）Firestore オプションしか提案してこないことがあります。その場合、受講者は提案された内容で続行するしかありません。

出力は次のようになります。

6. index.ts ファイルにコード スニペットを追加して、既存のコードを変更します。

if (p.quantity > 0) { productsArray.push(p); }

変更後のコードは次のようになります。

上記の変更を加えてコードをテストする

7. Cloud Shell ターミナルを開き、以下のコマンドを貼り付けます。

cd ~/cymbal-superstore/backend npm run start

8. 2 つ目のターミナルタブを開き、エンドポイント localhost を呼び出します。

curl localhost:8000/newproducts

出力は次のようになります。

9. インライン コメントを使用して別の方法を試してみましょう。前に追加した条件を削除します。最終的なコードは次のようになります。

10. productsArray.push(p) 行の前に、以下のコメントを追加します。Ctrl+Enter キーを押してコードを生成します。if (p.quantity > 0) が返された場合は、コードを受け入れます。

{{{project_0.startup_script.prompt_2_4 | "Comment message"}}}

フィルタをコメントアウトすると、次のようになります。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Gemini とのチャットで調査する。

注: この修正をコーディングする方法は多数あるため、Gemini が多くの提案を行う可能性があります。そのような場合は、選択肢を評価する必要があります。また、上記のように構文のパッチ適用が必要になる場合もあります。

タスク 3. テストを実行する

1. Cloud Shell ターミナルに移動し、以下のコマンドを実行します。

cd cymbal-superstore/backend npm run test

出力は次のようになります。

2. backend フォルダにある index.test.ts ファイルを開きます。このファイルには、supertest と呼ばれるツールで開発された、Jest テスト フレームワークを使用するいくつかの簡単なテストが含まれています。既存のテストを確認し、不明な点があれば Gemini に説明を求めます。

タスク 4. Gemini を使用してテストを作成する

このタスクでは、Gemini を使用して新商品用の API のテストをバックエンドで作成します。

テストを作成する

1. backend フォルダにある index.test.ts ファイルを開きます。ファイルの最後に次のコメントを追加します。

{{{project_0.startup_script.prompt_3_1 | "Comment message 1 in index.test.ts"}}} {{{project_0.startup_script.prompt_3_2 | "Comment message 2 in index.test.ts"}}}

2. 新しく追加されたコメントを選択し、表示される黄色の電球アイコンをクリックします。リストから [Gemini: Generate code] をクリックします。Tab キーを押して提案を受け入れます。

これは生成されたコードの例です。以下のコードを貼り付けることもできます。

describe('GET /newproducts', () => { it('should return a 200 status code', async () => { const response = await request(app) .get('/newproducts'); {{{project_0.startup_script.prompt_3_3 | "Generated code line from Gemini"}}}; }); it('should return a list of new products with length 8', async () => { const response = await request(app) .get('/newproducts'); expect(response.body.length).toBe(8); }); });

テストを実行する

3. Cloud Shell ターミナルで次のコマンドを実行します。

cd ~/cymbal-superstore/backend npm run test

出力は次のようになります。

4. ターミナルの出力の結果をスクロールして、どのテストが失敗したかを調べます。

注: このレスポンスは、テストが失敗したことを示しています。値 10 は、数量が 0 の商品を含む新商品の数です。新しいビジネス要件では、在庫なしのアイテムを除外する必要があるとされていますが、なんらかの問題があることがテストによって明らかになりました。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 新しいプロダクト API のテストを作成する。

バグを修正する

5. backend フォルダにある index.ts を開き、前のタスクで追加したフィルタのコメントを削除します。更新後のコードは次のようになります。

//do not insert products that are out of stock if (p.quantity > 0) productsArray.push(p);

6. Cloud Shell ターミナルからテストを再実行します。

cd ~/cymbal-superstore/backend npm run test

出力は次のようになります。

タスク 5. 境界条件テスト

境界条件テストは簡単なことではありません。本来は発生しないはずだが実行中に発生する可能性のある、予期しない状況（空のリストやマイナスの残量など）を考慮する必要があるためです。この観点から、Gemini がどのように役立つか見てみましょう。

1. 特に一般的な回答を提供するために、開いているすべてのファイルを閉じます。チャットの上にある新しいチャット アイコン（+）をクリックして Gemini とのチャットをリセットし、次のプロンプトを入力します。

{{{project_0.startup_script.prompt_4_1 | "Prompt for boundary conditions"}}}

出力は次のようになります。

はい、境界条件のテストの作成をお手伝いできます！ 境界値分析は、ソフトウェア テストの重要な部分です。 入力ドメインの「エッジ」または「境界」でテストを行います。 多くの場合、エラーはこうした場所で発生します。 最適なサポートを提供するため、もう少し詳しくお聞かせください。例: - どのプログラミング言語を使用していますか？ - テスト対象のコード（またはそのスニペット）を提供していただけますか？ - 入力と、その有効な範囲の予想値を教えてください。

2. backend フォルダにある index.ts ファイルを開き、Gemini に背景情報を提供します。/newproducts エンドポイントの境界テストについて Gemini に質問します。Gemini のチャットを開き、次のように入力します。

{{{project_0.startup_script.prompt_4_2 | "Prompt for boundary tests for the /newproducts endpoint"}}}

出力は次のようになります。

注: これらの多くは、コード自体（過去 7 日間に追加され、在庫がある）と、このタイプのコードに典型的であると Gemini が判断した一般的な境界条件に基づいて生成されました。しっかりした境界条件を作成するにあたり、非常に役立ちます。

3. 実際のテストに変換するには、index.test.ts ファイルを開きます。以下のコメントをコピーして、ファイルの末尾に追加します。

{{{project_0.startup_script.prompt_4_3 | "Comment message in index.test.ts file"}}}

出力は次のようになります。

4. index.test.ts ファイルで、上記のコメントの後に次のコードを追加します。

describe('GET /newproducts', () => { it('should not return products that are out of stock', async () => { const response = await request(app) .get('/newproducts'); response.body.forEach((product: any) => { expect(product.quantity).toBeGreaterThan(0); }); }); });

5. Cloud Shell ターミナルでテストを再実行します。出力は次のようになります。

出力は次のようになります。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 境界条件テスト。

お疲れさまでした

このラボを修了すると、Gemini for Developers を活用してコードのデバッグ機能を強化し、特にコード内の境界条件を評価する際に単体テストの生成を効率化するスキルを習得できます。

マニュアルの最終更新日: 2025 年 10 月 17 日

ラボの最終テスト日: 2025 年 10 月 17 日

Copyright 2025 Google LLC. All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。