Amazon Q DeveloperのAgentic CodingでAWS CDKのソースを作成し簡易な構成図を書いてみる

Amazon Q DeveloperのAgentic CodingでAWS CDKのソースを作成し簡易な構成図を書いてみる

Amazon Q Developer の Agentic CodingをChatから試してみました
Clock Icon2025.07.07

はじめに

今回はAmazon Q Develper(以降Q Devと記載) のChat機能を使って、VS Code上でAWS CDKのコードを生成し、インフラ構成図を出力してみます。簡単な構成をどこまで表現できるのかを確認してみます。

AWS Builders IDの作成

Q DevのChat機能を無料範囲内で使うには以下のどちらかの登録が必要です。

  • AWS Builders IDの登録
  • IAM ユーザの作成

参考

https://aws.amazon.com/jp/q/developer/pricing/?nc1=h_ls

今回は、Builders IDを登録して使ってみます。Builders IDの登録は以下の画面の「Sign up with Builder ID」を選択して、登録を行ってください。

builders-id

https://community.aws/builderid

※もし無料制限の範囲を超えて利用したい場合は、IAM Identity Center経由での利用を検討してください。

VS CodeにQ Devの拡張機能を追加

次にVS CodeにQ Devの拡張機能を追加します。今回はChatからAgentic Codingを使うのでこちらの拡張機能を追加してください。

q-dev-plugin

Extention ID:amazonwebservices.amazon-q-vscode

Builders IDと接続

VS Codeの拡張機能上で「Personal account」を選択し、「Continue」を押下するとブラウザが開きます。

スクリーンショット 2025-07-07 22.22.02.png

ブラウザ上で許可が求められるので、「アクセスを許可」で許可します。

スクリーンショット 2025-07-07 22.22.50.png

処理が完了すると以下の画面になり、VS CodeのQ Dev拡張機能のChat画面で入力が可能になります。

スクリーンショット 2025-07-07 22.23.17.png

Agentic Coding

ここからはAIエージェントに頼んでコーディングしてもらいます。Agentic codingはOFFにすると計画を立てることだけ実行させることも出来ます。どんな実装になるか分からないのでまずは計画を立ててもらいます。拡張機能を選択すると左下の</>となっているトグルをクリックしするとグレーになり、Agentic CodingがOFFになります。この状態で計画を立ててもらいます。

q-dev-first

このディレクトリで以下の要件を満たすコードを作成したいです。計画を立ててください。

- インフラはAWS CDKで記述してください
- Lambda上でFunction URLを作成してください
- LambdaのコードはInlineでできるだけ単純なものにしてください

すると以下のような計画を立ててくれます。

スクリーンショット 2025-07-07 21.52.22.png

想定した通りの内容なのでこのまま実装をお願いします。先程の</>のトグルをクリックすると青色のONの状態になるので実装を依頼します。

スクリーンショット 2025-07-07 21.55.15.png

最終的には以下のような内容でコードが生成され、デプロイ手順も教えてくれます。

スクリーンショット 2025-07-07 21.56.01.png

生成されたCDKのLambda部分は以下のようになっており、生成したままで使えました。

lib/cdk-lambda-stack.ts
import * as cdk from 'aws-cdk-lib';
import * as lambda from 'aws-cdk-lib/aws-lambda';
import { Construct } from 'constructs';

export class CdkLambdaStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const lambdaFunction = new lambda.Function(this, 'HelloWorldFunction', {
      runtime: lambda.Runtime.NODEJS_20_X,
      handler: 'index.handler',
      code: lambda.Code.fromInline(`
        exports.handler = async (event) => {
          return {
            statusCode: 200,
            body: JSON.stringify('Hello World from Lambda!')
          };
        };
      `)
    });

    new lambda.FunctionUrl(this, 'HelloWorldFunctionUrl', {
      function: lambdaFunction,
      authType: lambda.FunctionUrlAuthType.NONE
    });
  }
}

デプロイするとFunction URLsとして利用できます。

% curl https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.lambda-url.ap-northeast-1.on.aws/
"Hello World from Lambda!"%

構成図の作成

最後にこのコードをDraw.IOで描画してもらいます。プロンプトは以下のように設定してみます。

今のソースコードからDraw.ioでインフラ構成図を作成してください。
出力は、cdk-lambda-appディレクトリ配下にしてください。

一度目の生成では存在しないAPI Gatewayが描画されたのですが、削除するように指示すると、以下のようにそれなりに正しい構成図になることが確認できました。

スクリーンショット 2025-07-07 22.09.24.png

ごく簡単な内容ならMCPを使わなくても最低限正しい構成を描けることが確認できました。

最後に

7/7はクラスメソッドの創立記念日です。お祝いのために軽いブログを書いてみました。

Q Dev Chatの使い方をこのブログで確認してもらえれば幸いです。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.