Gemini for Google Cloud アシスタンスを使用して Node.js アプリを開発する

このチュートリアルでは、Google Cloud の AI を活用したコラボレーターである Gemini for Google Cloud を使用して、サンプルの Node.js アプリを探索、作成、変更、テスト、デプロイする方法について説明します。

次のステップでは、自身を Node.js デベロッパーとして、基本的なフォームを使用する簡単なウェブ アプリケーションを JavaScript で記述する場合について考えてみましょう。このシナリオでは、アプリに Express フレームワークと、HTML フォームに EJS テンプレートを使用します。

このガイドは、Gemini を使用して開発プロセスを高速化したいと考えている Node.js デベロッパーを対象としています。クラウドのクラウドの基本コンセプトに精通していることを前提としていますが、必ずしも Google Cloud のコンセプトを理解している必要はありません。

注: このチュートリアルを適用して、アプリを作成し、Cloud Code プラグインをサポートする IDE（Visual Studio Code など）から実行できます。

目標

このチュートリアルは、Gemini を使用して以下を行う方法を学習するのに役立ちます。

• Cloud Shell で Node.js ウェブアプリを開発する。
• Node.js ウェブアプリの単体テストを作成する。
• Node.js ウェブアプリを Cloud Run にデプロイする。

使用する Google Cloud プロダクト

このチュートリアルでは、次の Google Cloud プロダクトを使用します。

• Gemini: Google Cloud の常時接続のコラボレーターで、デベロッパーやデータ サイエンティストなどの幅広いユーザーに、生成 AI を活用したアシスタンスを提供します。統合されたアシスタンスのエクスペリエンスを提供するために、Gemini は多くの Google Cloud プロダクトに組み込まれています。
• Cloud Code for Cloud Shell プラグイン: Google Cloud 上で実行されるアプリの開発サイクルをサポートする IDE プラグインの拡張機能。
• Cloud Run: コンテナ化アプリを構築してデプロイできるフルマネージド サービス。Google Cloud がスケーリングなどのインフラストラクチャ タスクを処理するので、デベロッパーはコードのビジネス ロジックに集中できます。 料金情報については、Cloud Run の料金ページをご覧になり、料金計算ツールを使用して、予測される使用量に基づいて費用見積もりを作成してください。

準備

1. このチュートリアルで使用できる既存の Google Cloud プロジェクトがない場合は、Google Cloud プロジェクトを作成します。
2. Cloud Shell をアクティブにします。
3. Gemini が Google Cloud ユーザー アカウントとプロジェクト用に設定されていることを確認します。
4. Gemini 機能へのアクセス権が付与されているプロジェクトを選択して、Gemini for Cloud Shell を有効にします。

Node.js コードを生成するように Gemini に指示する

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

Gemini を使用すると、チャットで指定したプロンプトとコードコメントに記述した説明に基づいて、Node.js コードを生成できます。記述するコードが多く、Gemini に提供するコンテキストが多いほど、Gemini がアプリの開発の支援により役立ちます。Gemini からのレスポンスは、質問方法やコンテキストの記述によって異なる場合があるため、開発プロセス中に提案を受け入れる前に、Gemini のレスポンスを確認することをおすすめします。

Gemini にスターター コードの生成を依頼する前に、Cloud Shell ターミナルを使用して空のディレクトリを作成し、2 つの空のファイルを追加します。

mkdir node-js-with-gemini
cd node-js-with-gemini
touch app.js test.js

Cloud Shell エディタで、content_copy [エクスプローラ] を選択し、Cloud Shell ターミナルで作成したフォルダを開きます。

パッケージをインストール

Node.js アプリに express パッケージと ejs パッケージをインストールします。これらのパッケージのインストールについて Gemini に依頼するには、次の手順に従います。

1. Cloud Shell エディタの左側のパネルで [spark] Gemini をクリックします。

2. [Gemini] ペインで、次のようなプロンプトを入力します。

   What is the command to install express and ejs packages for node.js?

3. send [送信] をクリックします。

   Gemini から次のようなレスポンスが返されます。

   Node.js 用の express パッケージと ejs パッケージをインストールするには、次のコマンドを使用します。

   npm install express ejs
   

4. Gemini から提供されるコマンドをコピーして、Cloud Shell ターミナルで実行します。

アプリケーション ファイルを作成する

パッケージをインストールしたら、Gemini を使用して、インストール済みパッケージを app.js ファイルに追加する方法についてガイダンスを受けます。

1. app.js ファイルを Cloud Shell エディタで開きます。

2. Gemini のチャットで、次のようなプロンプトを入力します。

   How do I add these packages to my app.js file?

   Gemini のレスポンスは次のようになります。

   app.js ファイルに express パッケージと ejs パッケージを追加するには、次のコードを使用します。

   const express = require('express');
   const ejs = require('ejs');
   

   そのためには、express パッケージと ejs パッケージが必要であり、これらを app.js ファイルで使用できるようにします。

3. Gemini から提供されたコードを app.js ファイルに追加します。

コメントを使用してコードを生成する

Cloud Code プラグインには、Gemini にファイル コメントを使用してコードを生成させる機能があります。たとえば、ファイルにプレースホルダとしてコメントを追加すると、コメントの説明に従って、Gemini にコードを生成するよう指示できます。

app.js ファイルでこの機能を使用するには、Cloud Shell エディタで Gemini が有効になっていることを確認してください。

1. ファイルの末尾にコメント プレースホルダを追加して、ウェブアプリを初期化します。例:

   // Initialize express web app using ejs templating engine
   

2. テキスト カーソルをコメントの末尾に移動し、Control+Enter（Windows および Linux の場合）または Control+Return（MacOS の場合）キーを押してから、タブを押して Gemini のコード生成機能を使用してコードを生成します。

   Gemini のレスポンスには、次のようにコメントの下に 2 行のコードが含まれます。

   // Initialize express web app using ejs templating engine
   
   const app = express();
   app.set('view engine', 'ejs');
   

   コード生成の出力が期待したものと異なる場合は、必要に応じて余分なコンテンツを変更または削除します。

次に、Express ウェブアプリの基本機能を生成するコメントを追加します。

1. app.js ファイルの一番下に移動し、次のコメントを追加します。

   // add urlencoded middleware to parse form data
   
   // define the home route
   
   // create a /greeting POST route with a `name` parameter
   
   // create a /greeting route that accepts a name parameter
   
   // start the server on port 8080
   

2. 前のコード生成と同じように、ファイル コメントごとにコードを生成します。

3. 提案を受け入れる前に、生成されたコードの精度を確認してください。

   app.js ファイル内のコメントには、次のように対応するコードが含まれています。

   // add urlencoded middleware to parse form data
   app.use(express.urlencoded({ extended: true }));
   
   // define the home route
   app.get('/', (req, res) => {
     res.render('index');
   });
   
   // create a /greeting POST route with a `name` parameter
   app.post('/greeting', (req, res) => {
     const name = req.body.name || 'World';
     res.render('greeting', { name });
   });
   
   // start the server
   const port = process.env.PORT || 8080;
   app.listen(port, () => {
     console.log(`App listening on port ${port}`);
     console.log('Press Ctrl+C to quit.');
   });
   
   // create a /greeting route that accepts a name parameter
   app.get('/greeting/:name', (req, res) => {
     res.render('greeting', { name: req.params.name });
   });
   

package.json ファイルを作成する

ベース アプリケーション用のコードが生成されたら、コンテンツを作成して package.json ファイルに追加します。

1. app.js ファイルと同じディレクトリに package.json ファイルを作成します。

2. Cloud Shell エディタで、spark [Gemini] を選択し、次のようなプロンプトを入力します。

   Based on my app.js file, can you create a package.json file?

   Gemini のレスポンスでは、指定する起動スクリプトと依存関係が提案されます。レスポンスは次のようになります。

   app.js ファイルで使用できる package.json ファイルは次のとおりです。

   {
     "name": "my-app",
     "version": "1.0.0",
     "description": "A simple Node.js web app using Express and EJS.",
     "main": "app.js",
     "scripts": {
       "start": "node app.js"
     },
   
     "dependencies": {
       "express": "^4.17.1",
       "ejs": "^3.1.6"
     }
   }
   

   この package.json ファイルには次の情報が含まれています。

   アプリの名前（my-app）
   アプリのバージョン（1.0.0）
   アプリの説明（Express と EJS を使用するシンプルな Node.js ウェブアプリ）
   アプリのメインファイル（app.js）
   アプリで実行できるスクリプト（start）
   アプリの依存関係（express と ejs）
   

3. Gemini から提供されたコンテンツのみをコピーして package.json ファイルに貼り付けます。

ejs テンプレートを作成する

ウェブアプリを完成させるには、app.js ファイルおよび package.json ファイルと同じディレクトリに ejs テンプレート用の views ディレクトリを作成します。

1. ターミナルで、次のように入力します。

   mkdir views
   touch views/index.ejs views/greeting.ejs
   

2. エディタで index.ejs ファイルを開き、次の内容を貼り付けます。

   <html>
   <body>
       <form action="/greeting" method="post">
       <label for="name">What's your name?</label>
       <input type="text" id="name" name="name" autofocus />
       <button type="submit">Submit</button>
       </form>
   </body>
   </html>
   

3. エディタで greeting.ejs ファイルを開き、次の内容を貼り付けます。

   <html>
   <body>
       <a href="/">Home</a>
       <p>Hello <%= name %>~</p>
   </body>
   </html>
   

ブラウザでアプリをプレビューする

アプリのコード、テンプレート、要件がすべて完成したら、アプリが動作するかどうかを確認できます。

1. 次のコマンドを実行して、依存関係をインストールします。

   npm install
   

2. 次のコマンドを実行してアプリを起動します。

   npm start
   

3. アプリが動作することを確認します。Cloud Shell タスクバーの右上にある [ウェブでプレビュー] ボタンを選択します。次に、表示されたメニューからポート番号を選びます。Cloud Shell が、新しいブラウザ ウィンドウでプレビュー URL を開きます。

単体テストを作成する

Node.js アプリが動作することを確認したら、アプリを Cloud Run にデプロイする前に test.js ファイルに単体テストを作成できます。次の例では、HTTP レスポンス コードが 200 のとき、単体テストの生成の支援を Gemini に依頼します。

1. app.js ファイルの最後に、アプリファイルをエクスポートするための次の行を追加します。

   module.exports = app;
   

2. test.js ファイルを開きます。

3. レスポンスが HTTP 200 ステータス コードを返すタイミングをテストするには、Gemini とのチャット ペインを開き、次のようなプロンプトを入力します。

   Can you generate a unit test for my home route in app.js to assert that the response code is 200?

   Gemini から次のようなレスポンスが返されます。

   レスポンス コードが 200 であることを確認する、app.js のホームルートの単体テストを以下に示します。

   const assert = require('assert');
   const request = require('supertest');
   
   const app = require('./app.js');
   describe('GET /', () => {
     it('should return a 200 response code', async () => {
       const response = await request(app).get('/');
       assert.equal(response.status, 200);
     });
   });
   

   このテストでは、ホームルートがステータス コード 200 を返すことを確認します。

   提案されたコードブロックを test.js ファイルに追加します。

4. ターミナルで次のコマンドを実行して、mocha test パッケージと supertest パッケージをインストールします。

   npm i mocha supertest
   

5. package.json ファイルを更新して、新しいテスト スクリプトとそのパッケージを追加します。例:

   {
     "name": "my-app",
     "version": "1.0.0",
     "description": "A simple Node.js web app using Express and EJS.",
     "main": "app.js",
     "scripts": {
       "start": "node app.js",
       "test": "mocha"
     },
     "dependencies": {
     "express": "^4.17.1",
     "ejs": "^3.1.6",
     "mocha": "^10.2.0",
     "supertest": "^6.3.3"
     }
   }
   

6. 次のコマンドを実行して、テストを実行します。

   npm test
   

エラーがなければ、テストは合格と表示されます。他のルートにテストを追加する場合は、test.js ファイルに追加する提案について Gemini への依頼を続けます。

Cloud Run にデプロイする

アプリをローカルで実行したら、Google Cloud へのデプロイに進みます。ソースコードからデプロイでき、アプリの実行時にインフラストラクチャを管理する必要がないため、Cloud Run はこのシナリオに適しています。

1. Gemini とのチャットで、gcloud を使用してソースコードから直接 Cloud Run にデプロイする方法を Gemini に質問します。

   What is the gcloud command for deploying a Cloud Run service from source code?

   Gemini から次のようなレスポンスが返されます。

   gcloud を使用して、現在のディレクトリ内のソースコードから Cloud Run に直接デプロイできます。これを行うには、--source flag を付けて gcloud run deploy コマンドを使用します。このフラグは、ソースコードを使用してコンテナ イメージをビルドし、Cloud Run にデプロイするように gcloud に指示します。

   たとえば、app.js ファイルに含まれるコードを Cloud Run にデプロイするには、次のコマンドを使用します。

   gcloud run deploy app --source .
   

   このコマンドは、app.js ファイルからコンテナ イメージをビルドし、Cloud Run にデプロイします。

   --region フラグを使用して、アプリをデプロイするリージョンを指定することもできます。たとえば、アプリを us-central1 リージョンにデプロイするには、次のコマンドを使用します。

   gcloud run deploy app --source . --region us-central1
   

   ソースコードから Cloud Run にデプロイする方法について詳しくは、Cloud Run のドキュメントをご覧ください。

2. Gemini がレスポンスで提供した gcloud コマンドを使用します。

3. プロンプトに従ってリージョンを選択し、テストアプリの未認証の呼び出しを許可するオプションを選択します。アプリが正常にデプロイされると、出力で Service URL が返されます。

クリーンアップ

このチュートリアルで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、このチュートリアルで作成した Google Cloud プロジェクトを削除します。また、リソースを個別に削除することもできます。

1. 注意: プロジェクトを削除すると、次のような影響があります。
   • プロジェクト内のすべてのものが削除されます。このドキュメントのタスクで既存のプロジェクトを使用した場合、それを削除すると、そのプロジェクトで行った他の作業もすべて削除されます。
   • カスタム プロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタム プロジェクト ID を作成した可能性があります。appspot.com URL など、プロジェクト ID を使用する URL を保持するには、プロジェクト全体を削除するのではなく、プロジェクト内の選択したリソースを削除します。

2. 複数のアーキテクチャ、チュートリアル、クイックスタートを実施する予定がある場合は、プロジェクトを再利用すると、プロジェクトの割り当て上限を超えないようにできます。Google Cloud コンソールで、[リソースの管理] ページに移動します。

   [リソースの管理] に移動

3. プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。

4. ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

次のステップ

• Gemini for Google Cloud の概要を読む。
• Gemini の割り当てと上限およびサポートされているロケーションについて理解する。
• Cloud Run を使用したソースコードからのデプロイの詳細を学習する。