概要

このラボでは、Google Cloud の AI を活用したアプリ開発支援ソリューションである Gemini Code Assist を使用して、アプリの説明、テスト、ドキュメント化、改善を行います。

Cloud Workstations を利用して、Code OSS を統合開発環境（IDE）として使用する開発環境を作成します。

このラボは、アプリを構築するあらゆる経験レベルの開発者を対象としています。クラウドアプリ開発に精通している必要はありません。

注: Gemini は初期段階のテクノロジーであるため、もっともらしく見える出力でも事実に反する場合があります。Gemini からのすべての出力は、使用する前に検証することをおすすめします。詳細については、Gemini for Google Cloud と責任ある AI をご覧ください。

目標

このラボでは、次のタスクの実行方法について学びます。

• Cloud Workstations を使用してクラウドベースのアプリ開発環境を作成する。
• Gemini Code Assist を使用してコードを説明する。
• Gemini Code Assist で単体テストを生成する。
• Gemini にアプリの外観を改善するよう指示する。
• Gemini Code Assist を使用してコードを読みやすくする。
• Gemini Code Assist を使用して、英語または他の言語でコードにコメントを追加する。

設定

各ラボでは、新しい Google Cloud プロジェクトとリソースセットを一定時間無料で利用できます。

1. Qwiklabs にシークレット ウィンドウでログインします。

2. ラボのアクセス時間（例: 1:15:00）に注意し、時間内に完了できるようにしてください。
   一時停止機能はありません。必要な場合はやり直せますが、最初からになります。

3. 準備ができたら、[ラボを開始] をクリックします。

4. ラボの認証情報（ユーザー名とパスワード）をメモしておきます。この情報は、Google Cloud Console にログインする際に使用します。

5. [Google Console を開く] をクリックします。

6. [別のアカウントを使用] をクリックし、このラボの認証情報をコピーしてプロンプトに貼り付けます。
   他の認証情報を使用すると、エラーが発生したり、料金の請求が発生したりします。

7. 利用規約に同意し、再設定用のリソースページをスキップします。

Cloud Shell をアクティブにする

Cloud Shell は、開発ツールが組み込まれた仮想マシンです。5 GB の永続ホーム ディレクトリを提供し、Google Cloud 上で実行されます。Cloud Shell を使用すると、コマンドラインで Google Cloud リソースにアクセスできます。gcloud は Google Cloud のコマンドライン ツールで、Cloud Shell にプリインストールされており、Tab キーによる入力補完がサポートされています。

1. Google Cloud Console のナビゲーション パネルで、「Cloud Shell をアクティブにする」アイコン（）をクリックします。

2. [次へ] をクリックします。
   環境がプロビジョニングされ、接続されるまでしばらく待ちます。接続の際に認証も行われ、プロジェクトは現在のプロジェクト ID に設定されます。次に例を示します。

サンプル コマンド

• 有効なアカウント名前を一覧表示する:

gcloud auth list

（出力）

Credentialed accounts: - <myaccount>@<mydomain>.com (active)

（出力例）

Credentialed accounts: - google1623327_student@qwiklabs.net

• プロジェクト ID を一覧表示する:

gcloud config list project

（出力）

[core] project = <プロジェクト ID>

（出力例）

[core] project = qwiklabs-gcp-44776a13dea667a6

タスク 1. 環境とアカウントを構成する

このタスクでは、Gemini 用の Cloud AI Companion API を有効にし、必要なロールをユーザー アカウントに付与します。

API とロールを構成する

1. ラボの認証情報を使用して Google Cloud コンソールにログインして、キーボードの G キーを押し、次に S キーを押して、Cloud Shell ターミナルを開きます。

2. Cloud Shell で次のコマンドを実行して、プロジェクト ID とリージョンの環境変数を設定します。

   export PROJECT_ID=$(gcloud config list project --format="value(core.project)") export USER=$(gcloud config list account --format "value(core.account)") export REGION={{{project_0.startup_script.lab_region| Lab Region}}} echo "PROJECT_ID=${PROJECT_ID}" echo "USER=${USER}" echo "REGION=${REGION}"

3. Gemini 用の Cloud AI Companion API を有効にして、ユーザー アカウントに必要なロールを付与するには、次のコマンドを実行します。

   gcloud services enable cloudaicompanion.googleapis.com --project ${PROJECT_ID} gcloud projects add-iam-policy-binding ${PROJECT_ID} --member user:${USER} --role=roles/cloudaicompanion.user gcloud projects add-iam-policy-binding ${PROJECT_ID} --member user:${USER} --role=roles/serviceusage.serviceUsageViewer

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 関連する API を有効にして、IAM ロールを設定する

タスク 2. クラウド ワークステーションを作成する

このラボでは Gemini アシスタンスを利用して、Cloud Workstations IDE 用の Cloud Code プラグインでアプリケーションを開発します。Cloud Workstations は Gemini とのネイティブ インテグレーションが含まれているフルマネージド統合開発環境です。

このタスクでは、Cloud Workstations 環境を構成してプロビジョニングし、Gemini 用 Cloud Code プラグインを有効にします。

ワークステーション クラスタを表示する

my-cluster という名前のワークステーション クラスタが、このラボ用に事前に作成されています。このクラスタをワークステーションの構成と作成に使用します。

1. [ワークステーション] ページを開くには、Google Cloud コンソールのタイトルバーにある [検索] フィールドに「Cloud Workstations」と入力し、[Cloud Workstations] をクリックします。

2. Cloud Workstations が固定されていない場合（）、ナビゲーション メニュー（）で [固定]（）をクリックします。

3. ナビゲーション パネルで [クラスタ管理] をクリックします。

4. クラスタの [ステータス] を確認します。クラスタのステータスが [Reconciling] または [Updating] の場合は、定期的に更新して [Ready] になるまで待ってから次のステップに進みます。

構成とワークステーションを作成する

1. ワークステーション構成とワークステーションを作成するには、Cloud Shell で次のコマンドを実行します。

   export CLUSTER_NAME=my-cluster export CONFIG_NAME=my-config export WS_NAME=my-workstation export REGION={{{project_0.startup_script.lab_region| Lab Region}}} gcloud workstations configs create ${CONFIG_NAME} --cluster=${CLUSTER_NAME} --region=${REGION} --machine-type="e2-standard-4" --pd-disk-size=200 --pd-disk-type="pd-standard" --pool-size=1 gcloud workstations create ${WS_NAME} --cluster=${CLUSTER_NAME} --config=${CONFIG_NAME} --region=${REGION}

   コマンドが完了するまで待ちます。

2. ナビゲーション パネルで、[ワークステーション] をクリックします。

   ワークステーションが作成されると、[マイ ワークステーション] の下に [Stopped] のステータスで表示されます。

3. [起動] をクリックして、ワークステーションを起動します。

   ワークステーションの起動中は、ステータスが [Starting] に変わります。ステータスが [Running] に変わるまで待ちます。これは、ワークステーションが使用可能になったことを示します。

IDE を起動する

一部の拡張機能は、適切に機能させるためにブラウザでサードパーティ Cookie を有効にする必要があります。

1. Chrome でサードパーティ Cookie を有効にするには、Chrome メニューで [設定] をクリックします。

2. 検索バーに「サードパーティ Cookie」と入力します。

3. [サードパーティ Cookie] をクリックし、[サードパーティの Cookie を許可する] を選択します。

   注: ラボの終了後にブラウザを元の設定に戻したい場合は、サードパーティ Cookie の元の設定をメモしておきます。

4. ワークステーションで Code OSS IDE を起動するために、Google Cloud コンソールの [ワークステーション] ページで [開始] をクリックします。

   IDE が別のブラウザタブで開きます。

   

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 クラウド ワークステーションを作成して起動する

タスク 3. Cloud Code 拡張機能を更新して Gemini を有効にする

このタスクでは、Cloud Workstations IDE 用の Gemini in Cloud Code を有効にします。

Google Cloud に接続する

ワークステーションで Google Cloud に接続する手順は、次のとおりです。

1. Cloud Code - Sign In フローを起動するには、ウィンドウ下部のステータスバーで [Cloud Code - Sign in] をクリックし、ターミナルに表示されたリンクをブラウザで開きます。

2. 外部ウェブサイトを開くかどうかを確認するメッセージが表示されたら、[開く] をクリックします。

3. アカウント を選択して Gemini Code Assist に進み、[ログイン] をクリックします。

   確認コードがブラウザタブに表示されます。

   注: gcloud auth login コマンドを実行したという警告が表示される場合があります。これは正常なプロセスです。IDE がユーザーに代わってこのコマンドを実行しました。

4. [コピー] をクリックします。

5. IDE に戻り、ターミナルの [認証コードを入力してください] と表示されている場所にコードを貼り付けます。

6. クリップボードからのコピーを承認するよう求められた場合は、[許可] をクリックします。

7. Enter キーを押し、ステータスバーに [Cloud Code - No Project] と表示されるまで待ちます。

   これで Google Cloud に接続されました。

Gemini in Cloud Code を有効にする

ワークステーション IDE 用の Gemini in Cloud Code を有効にする手順は、次のとおりです。

1. ワークステーション IDE のメニュー（）をクリックし、[File] > [Preferences] > [Settings] に移動します。

2. [Search settings] で「Gemini」と入力します。

3. [Settings] ダイアログの [User] タブで、[Extensions] > [Gemini Code Assist] を選択します。

4. Cloud Code の設定ページで [Geminicodeassist: Project] に Google Cloud プロジェクト ID を入力します。

   

5. Cloud Code のプロジェクトを選択するには、ウィンドウ下部のステータスバーで [Cloud Code - No Project] をクリックします。次に、[Google Cloud プロジェクトを選択する] オプションを選択し、 を選択します。

   

   プロジェクト ID がステータスバーに表示されます。これで Gemini を使用できるようになりました。

タスク 4. Python Flask アプリをダウンロード、確認、実行する

Python Flask アプリのコードは、Cloud Storage バケットに保存されています。

このタスクでは、IDE で Python Flask アプリをダウンロード、確認、実行します。Gemini Code Assist がコードを説明します。

ターミナルにログインする

1. IDE のメニュー（）で、[Terminal] > [New Terminal] を選択します。

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

   gcloud auth login

   ターミナルに表示されたリンクをブラウザで開きます。

3. アカウント　　を選択して [Sign in to Google Cloud SDK] に進み、[Continue] をクリックします。

4. 最後に、[Google Cloud SDK wants to access your Google Account] というメッセージが表示されたら、[許可] をクリックします。

   確認コードがブラウザタブに表示されます。

   注: gcloud auth login コマンドを実行したという警告が表示される場合があります。これは正常なプロセスです。IDE がユーザーに代わってこのコマンドを実行しました。

5. [コピー] をクリックします。

6. IDE に戻り、ターミナルの [Enter the verification code provided in your browser] と表示されている場所にコードを貼り付けて、Enter キーを押します。

   これで、ターミナル セッションが Google Cloud にログインします。

Python 仮想環境をインストールする

1. 仮想環境に Python をローカルでインストールするには、次のコマンドを実行します。

   sudo apt update sudo apt -y upgrade sudo apt install -y python3-venv python3 -m venv ~/env source ~/env/bin/activate

2. 使用される Python の場所を確認するには、次のコマンドを実行します。

   which python3

コードをコピーする

1. アプリコードをコピーするには、ターミナルで次のコマンドを実行します。

   export PROJECT_ID={{{project_0.project_id | Project ID}}} export BUCKET_NAME=$PROJECT_ID-code gcloud storage cp -r gs://$BUCKET_NAME/* .

   コードは codeassist-demo という名前のサブディレクトリにコピーされています。

2. IDE のアクティビティ バーで、Explorer アイコン（）、[Open Folder] の順にクリックします。

3. [Open Folder] ダイアログで [codeassist-demo] をクリックし、[OK] をクリックします。

   ディレクトリ構造が表示されます。

コードを調べる

1. [main.py] を選択します。

   Python ファイルがエディタ ウィンドウで開きます。

2. IDE のアクティビティ バーで [Gemini Code Assist]（）をクリックします。

   Gemini Code Assist は、AI を活用したアプリ開発タスクの支援ソリューションです。

3. [Gemini Code Assist] チャットペインで、次のプロンプトを入力して送信アイコン（）をクリックします。

   Explain this

   プロンプトとは、必要なサポートについて説明する質問やステートメントのことです。プロンプトには、より有用な、または完全な回答を提供するために Google Cloud が分析する既存のコードからのコンテキストを含めることができます。良い回答を生成するプロンプトの作成方法については、Gemini for Google Cloud に適したプロンプトを作成するをご覧ください。

   Gemini によるコードの説明が main.py に表示されます。回答では、次のセクションについて説明します。

   • 依存関係
   • アプリケーション設定
   • ルート
   • アプリケーションの実行

   コードを選択すると、同じプロンプトで Gemini Code Assist が選択したコードのみを説明します。

   注: チャットの履歴状態はメモリにのみ保持されます。別のワークスペースに切り替えたり、IDE を閉じると保持されません。Gemini がプロンプトやそのレスポンスをデータとして使用してモデルをトレーニングすることはありせん。詳細については、Gemini for Google Cloud がデータを使用する方法をご覧ください。

4. エディタで app.route を選択して POST /convert ルートの関数定義を選択し、電球アイコン（）をクリックして [Gemini: Explain this] をクリックします。

   

   Gemini が選択したコードについて詳しく説明します。

アプリを実行する

1. ターミナルが閉じている場合は、IDE のメニュー（）で、[Terminal] > [New Terminal] を選択します。

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

   cd ~/codeassist-demo source ~/env/bin/activate python3 main.py

   コマンドから、flask という名前のモジュールが存在しないというエラーが返されます。Gemini Code Assist を使用して、問題の把握に役立てることができます。

3. [Gemini Code Assist] チャットペインで、次のプロンプトを入力します。

   How do you install Python requirements?

   Gemini Code Assist で、pip パッケージ インストーラと requirements.txt ファイルを使用して Python の要件をインストールできることが示されます。

4. IDE のアクティビティ バーで、Explorer アイコン（）をクリックして、[requirements.txt] をクリックします。

   Flask とその必要なバージョンは、requirements.txt ファイルに記載されています。

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

   pip install -r requirements.txt

   これで Flask がインストールされました。

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

   python3 main.py

   ポート 8080 でリッスンしているサービスがウェブ プレビューで利用できるようになったことを示すダイアログが表示されます。

7. [プレビューを開く] をクリックし、[開く] をクリックします。

   Roman Numerals　のウェブアプリが新しいタブで開きます。

8. 数値ボックスに「123」と入力し、[Convert] をクリックします。

   返される番号は CXXIII です。C は 100、X は 10、I は 1 です。この番号は正解です。

9. [ホームページに戻る] をクリックし、「45」と入力して、[Convert] をクリックします。

   返された番号は XXXXV です。これは、数学的には正しい（4 に 10 を掛けてから 5 を足す）のですが、40 の通常の表記は XL（50 から 10 を引く）なので、より伝統的なローマ数字の表記は XLV となります。

   詳細については後述します。

10. IDE のアクティビティ バーで、Explorer アイコン（）をクリックし、[calendar.py] をクリックします。

    number_to_roman 関数は、数値をローマ数字に変換します。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 コードをコピーして Python Flask アプリを実行する

タスク 5. 単体テストを追加する

このタスクでは、Gemini Code Assist を使用してコードの単体テストを生成します。

1. IDE のアクティビティ バーで [Gemini Code Assist]（）をクリックし、次のプロンプトを入力します。

   Create unit tests for a fixed version of number_to_roman

   Gemini Code Assist は、開いているタブの calendar.py のコードを認識します。次のようなサンプルコードが提供されます。

   import unittest import calendar class TestNumberToRoman(unittest.TestCase): def test_basic_conversions(self): self.assertEqual(calendar.number_to_roman(1), "I") self.assertEqual(calendar.number_to_roman(5), "V") self.assertEqual(calendar.number_to_roman(10), "X") self.assertEqual(calendar.number_to_roman(50), "L") self.assertEqual(calendar.number_to_roman(100), "C") self.assertEqual(calendar.number_to_roman(500), "D") self.assertEqual(calendar.number_to_roman(1000), "M") def test_combinations(self): self.assertEqual(calendar.number_to_roman(4), "IV") self.assertEqual(calendar.number_to_roman(9), "IX") self.assertEqual(calendar.number_to_roman(14), "XIV") self.assertEqual(calendar.number_to_roman(40), "XL") self.assertEqual(calendar.number_to_roman(90), "XC") self.assertEqual(calendar.number_to_roman(400), "CD") self.assertEqual(calendar.number_to_roman(900), "CM") self.assertEqual(calendar.number_to_roman(1994), "MCMXCIV") self.assertEqual(calendar.number_to_roman(3888), "MMMDCCCLXXXVIII") def test_edge_cases(self): self.assertEqual(calendar.number_to_roman(0), "") # ゼロを処理 self.assertRaises(TypeError, calendar.number_to_roman, "abc") # 無効な入力を処理 def test_large_numbers(self): self.assertEqual(calendar.number_to_roman(3000), "MMM") self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") if __name__ == '__main__': unittest.main() 注: Gemini は、ローマ数字の標準的な実装にコードが正しく従っている場合に合格するテストを作成するのではなく、現在実装されているコードで合格する単体テストを作成する場合があります。このラボでは、正しいバージョンの単体テストを使用します。

2. 実行中のアプリを停止するには、ターミナルで Ctrl+C を押します。

3. 変換関数の単体テストを作成するには、ターミナルで次のコマンドを実行します。

   cat > ~/codeassist-demo/test_calendar.py <<EOF import unittest import calendar class TestNumberToRoman(unittest.TestCase): def test_basic_conversions(self): self.assertEqual(calendar.number_to_roman(1), "I") self.assertEqual(calendar.number_to_roman(5), "V") self.assertEqual(calendar.number_to_roman(10), "X") self.assertEqual(calendar.number_to_roman(50), "L") self.assertEqual(calendar.number_to_roman(100), "C") self.assertEqual(calendar.number_to_roman(500), "D") self.assertEqual(calendar.number_to_roman(1000), "M") def test_combinations(self): self.assertEqual(calendar.number_to_roman(4), "IV") self.assertEqual(calendar.number_to_roman(9), "IX") self.assertEqual(calendar.number_to_roman(14), "XIV") self.assertEqual(calendar.number_to_roman(40), "XL") self.assertEqual(calendar.number_to_roman(90), "XC") self.assertEqual(calendar.number_to_roman(400), "CD") self.assertEqual(calendar.number_to_roman(900), "CM") self.assertEqual(calendar.number_to_roman(1994), "MCMXCIV") self.assertEqual(calendar.number_to_roman(3888), "MMMDCCCLXXXVIII") def test_edge_cases(self): self.assertEqual(calendar.number_to_roman(0), "") # ゼロを処理 self.assertRaises(TypeError, calendar.number_to_roman, "abc") # 無効な入力を処理 def test_large_numbers(self): self.assertEqual(calendar.number_to_roman(3000), "MMM") self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") if __name__ == '__main__': unittest.main() EOF

4. テストを実行するには、ターミナルで次のコマンドを実行します。

   cd ~/codeassist-demo python3 test_calendar.py

   テストは次のように失敗します。

   ====================================================================== ERROR: test_edge_cases (__main__.TestNumberToRoman.test_edge_cases) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 28, in test_edge_cases self.assertRaises(TypeError, calendar.number_to_roman, "abc") # 無効な入力を処理 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/unittest/case.py", line 778, in assertRaises return context.handle('assertRaises', args, kwargs) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/unittest/case.py", line 238, in handle callable_obj(*args, **kwargs) File "/home/user/codeassist-demo/calendar.py", line 16, in number_to_roman number = int(number) ^^^^^^^^^^^ ValueError: invalid literal for int() with base 10: 'abc' ====================================================================== FAIL: test_combinations (__main__.TestNumberToRoman.test_combinations) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 16, in test_combinations self.assertEqual(calendar.number_to_roman(4), "IV") AssertionError: 'IIII' != 'IV' - IIII + IV ====================================================================== FAIL: test_large_numbers (__main__.TestNumberToRoman.test_large_numbers) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 33, in test_large_numbers self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") AssertionError: 'MMMDCCCCLXXXXVIIII' != 'MMMCMXCIX' - MMMDCCCCLXXXXVIIII + MMMCMXCIX ---------------------------------------------------------------------- Ran 4 tests in 0.004s FAILED (failures=2, errors=1)

   失敗の内容は次のとおりです。

   • abc が正しく処理されませんでした。
   • 4 に IV ではなく IIII が返されました。
   • 3999 に MMMCMXCIX ではなく MMMDCCCCLXXXXVIIII が返されました。

   各テスト関数では、最初に発生したエラーによって関数が終了します。

   注: テストコードが異なる場合、結果は異なる可能性があります。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 変換関数の単体テストを作成する

タスク 6. コードを修正して読みやすくする

このタスクでは、Gemini Code Assist を使用してコードを修正し、読みやすくします。

1. IDE のアクティビティ バーで、Explorer アイコン（）をクリックし、[calendar.py] をクリックします。

2. IDE のアクティビティ バーで、[Gemini Code Assist]（）をクリックし、次のプロンプトを入力します。

   Make my code more readable and fix any errors

   Gemini Code Assist は、読みやすさが向上したコードを提供し、問題を解決します。以下に例を示します。

   def number_to_roman(number): """整数を対応するローマ数字に変換。 引数: number: 0～3999 の整数。 戻り値: 数値に対応するローマ数字を表す文字列。 入力が 0 の場合、空の文字列を返します。 入力が整数でないか、範囲外の場合、TypeError を発生させます。 """ try: number = int(number) except ValueError: raise TypeError("Input must be an integer.") if not 0 <= number <= 3999: raise TypeError("Input must be between 0 and 3999.") if number == 0: return "" roman_map = { 1000: 'M', 900: 'CM', 500: 'D', 400: 'CD', 100: 'C', 90: 'XC', 50: 'L', 40: 'XL', 10: 'X', 9: 'IX', 5: 'V', 4: 'IV', 1: 'I'} result = "" for value, numeral in roman_map.items(): while number >= value: result += numeral number -= value return result

   Gemini Code Assist は、追加された変更についても説明します。

   主な改善点: 1. エラー処理: 整数以外の入力と 0～3999 の範囲外の値に対する TypeError を追加しました。これにより、関数がより堅牢になります。 2. Docstring: 明確な docstring は、関数の目的、引数、戻り値、エラー処理を説明します。これにより、読みやすさと保守性が大幅に向上します。3. 効率と正確性: roman_map ディクショナリとより効率的なアルゴリズムを使用して、ローマ数字を構築します。これにより、減算表記（4 の「IV」、9 の「IX」など）が正しく処理されます。以前のバージョンでは、このようなケースで問題が発生し、効率が低下していました。4. ゼロの処理: 入力数値が 0 の場合を明示的に処理し、想定どおりに空の文字列を返します。 5. 明確性: コードが簡潔になり、理解しやすくなりました。ロジックが明確になり、変数名がよりわかりやすくなりました。 この改訂版は、元の実装の制限とエラーに対処し、Python コードのベスト プラクティスに準拠しています。より堅牢で、読みやすく、効率的になりました。

   この例では、Gemini Code Assist がアルゴリズムを提供し、コードを読みやすくし、元のコードの問題も修正しました。

3. 新しいファイル内のコードを比較するには、[Gemini Code Assist] 内のコードペインで [Diff with Open File]（）をクリックします。

4. 変更を承認するには、[Accept] をクリックします。更新されたコードが承認されます。

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

   cd ~/codeassist-demo python3 test_calendar.py

   テストに合格しない場合は、テストがカレンダー モジュールのキャッシュに保存されたバージョンを使用していないことを確認するために、テストを数回実行してみてください。

   Gemini がローマ数字の問題を修正していない場合、一部のテストは失敗します。このような場合は、テストに成功するまでコードを自分で修正するか、calendar.py を動作確認済みのバージョンに置き換えます。

6. テストが失敗した場合は、次のコマンドを実行してコードを修正し、単体テストを再実行します。

   cat > ~/codeassist-demo/calendar.py <<EOF def number_to_roman(number): """整数を対応するローマ数字に変換。 引数: number: 0～3999 の整数。 戻り値: 数値に対応するローマ数字を表す文字列。 入力が 0 の場合、空の文字列を返します。 入力が整数でないか、範囲外の場合、TypeError を発生させます。 """ try: number = int(number) except ValueError: raise TypeError("Input must be an integer.") if not 0 <= number <= 3999: raise TypeError("Input must be between 0 and 3999.") if number == 0: return "" roman_map = { 1000: 'M', 900: 'CM', 500: 'D', 400: 'CD', 100: 'C', 90: 'XC', 50: 'L', 40: 'XL', 10: 'X', 9: 'IX', 5: 'V', 4: 'IV', 1: 'I'} result = "" for value, numeral in roman_map.items(): while number >= value: result += numeral number -= value return result EOF cd ~/codeassist-demo python3 test_calendar.py

   これでテストに合格できるようになります。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 calendar.py を更新して、元のコードの問題を修正する

タスク 7. 英語を母国語としないユーザー向けにコードの読みやすさを向上させる

翻訳アプリを使用している英語を母国語としていない英語話者の場合は、Gemini Code Assist を使用して他の言語でコメントを生成できます。

このタスクでは、Gemini Code Assist を使用して、コードにコメントを追加します。別の言語でコメントを追加することもできます。

1. IDE のアクティビティ バーで、Explorer アイコン（）をクリックして、[main.py] をクリックします。

2. IDE のアクティビティ バーで [Gemini Code Assist]（）をクリックし、次のプロンプトを入力します。

   Add comments to main.py

   Gemini Code Assist が次のようにコードを説明するコメントを追加します。

   import os # 環境変数のための os モジュールをインポート from flask import Flask, render_template, request # Flask フレームワークのコンポーネントをインポート import calendar # ローマ数字変換のためのカレンダー モジュールをインポート # Flask アプリ インスタンスを作成 app = Flask(__name__) # ホームページのルートを定義 @app.route("/", methods=["GET"]) def home_page(): # index.html テンプレートをレンダリング return render_template("index.html") # 変換エンドポイントのルートを定義 @app.route("/convert", methods=["POST"]) def convert(): # フォームデータから数値を取得 number = request.form["number"] # カレンダー モジュールを使用して数値をローマ数字に変換 roman = calendar.number_to_roman(number) # convert.html テンプレートを数値とその数字に対応するローマ数字でレンダリング return render_template("convert.html", number=number, roman=roman) # このスクリプトが直接実行された場合は Flask アプリを実行 if __name__ == "__main__": # デバッグモードでアプリを実行し、すべてのインターフェース（0.0.0.0）をリッスンし、 # 環境変数 PORT で指定されたポートを使用するか、デフォルトの 8080 を使用する app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))

   英語が第一言語でない場合はどうすればよいでしょうか？

3. [Gemini Code Assist] ペインで、次のプロンプトを入力します。

   Add Spanish comments to main.py

   Gemini Code Assist は、コードの読みやすさを高めるために、さまざまな言語でコメントを提供できます。

4. コメントのみが追加されたことを確認するには、Gemini Code Assist のコードペインで [Diff with Open File]（）をクリックします。

   更新内容は次のように既存のコードと比較されます。

   

5. 変更を拒否するには、[Decline] をクリックします。

タスク 8. アプリの外観を改善する

Gemini Code Assist は、アプリの見栄えを良くするのにも役立ちます。

このタスクでは、Gemini Code Assist を使用してアプリのビジュアル デザインを改善します。

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

   cd ~/codeassist-demo python3 main.py

   ポート 8080 でリッスンしているサービスがウェブ プレビューで利用できるようになったことを示すダイアログが表示されます。

2. [プレビューを開く] をクリックし、[開く] をクリックします。

   Roman Numerals　のウェブアプリが新しいタブで開きます。

   

3. IDE のアクティビティ バーで、Explorer アイコン（）をクリックし、[templates/index.html] を選択します。

   このアプリの HTML テンプレートは非常にシンプルです。

4. IDE のアクティビティ バーで、[Gemini Code Assist]（）をクリックし、次のプロンプトを入力します。

   Make this HTML template look better

   Gemini Code Assist がコードを更新し、アプリのエントリページの見た目を改善します。

5. 変更を適用するには、Gemini Code Assist のコードペインで [Diff with Open File]（）をクリックし、[Accept] をクリックします。

6. Roman Numerals アプリのブラウザタブに戻り、[Refresh] をクリックします。

   アプリの見た目が改善されます。この例では、ダイアログがページの中央に配置され、色が追加されています。

   

   注: Gemini Code Assist による変更は、ユーザーによって異なる場合があります。

7. IDE のアクティビティ バーで、Explorer アイコン（）をクリックして、[templates/convert.html] をクリックします。

8. IDE のアクティビティ バーで、[Gemini Code Assist]（）をクリックし、次のプロンプトを入力します。

   Make the convert.html template look similar to the index.html template

   Gemini Code Assist は、インデックス テンプレートに一致するように結果テンプレートを更新します。

9. 変更を適用するには、Gemini Code Assist のコードペインで [Diff with Open File]（）をクリックし、[Accept] をクリックします。

10. Roman Numerals のブラウザタブに戻り、「45」と入力して Enter キーを押します。

    新しい結果ページは、インデックス ページと同じスタイルになります。

    

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Gemini Code Assist を使用してアプリのビジュアル デザインを改善する

ラボを終了する

ラボでの学習が完了したら、[ラボを終了] をクリックします。ラボで使用したリソースが Qwiklabs から削除され、アカウントの情報も消去されます。

ラボの評価を求めるダイアログが表示されたら、星の数を選択してコメントを入力し、[送信] をクリックします。

星の数は、それぞれ次の評価を表します。

• 星 1 つ = 非常に不満
• 星 2 つ = 不満
• 星 3 つ = どちらともいえない
• 星 4 つ = 満足
• 星 5 つ = 非常に満足

フィードバックを送信しない場合は、ダイアログ ボックスを閉じてください。

フィードバック、ご提案、修正が必要な箇所については、[サポート] タブからお知らせください。

お疲れさまでした

このラボでは、以下の操作について学習しました。

• Cloud Workstations を使用してクラウドベースのアプリ開発環境を作成する。
• Gemini Code Assist を使用してコードを説明する。
• Gemini Code Assist で単体テストを生成する。
• Gemini にアプリの外観を改善するよう指示する。
• Gemini Code Assist を使用してコードを読みやすくする。
• Gemini Code Assist を使用して、英語または他の言語でコードにコメントを追加する。

次のステップと詳細情報

• Gemini Code Assist の概要
• Gemini Code Assist によるコード

Copyright 2024 Google LLC All rights reserved. Google および Google のロゴは、Google LLC の商標です。その他すべての社名および製品名は、それぞれ該当する企業の商標である可能性があります。