Amazon Q Developer をコーディングアシスタントとして使用して生産性を高める - AWS 規範ガイダンス
概要前提条件と制限ツールベストプラクティスエピックトラブルシューティング関連リソース

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

Amazon Q Developer をコーディングアシスタントとして使用して生産性を高める

Amazon Web Services、Ram Kandaswamy

概要

このパターンでは、マルバツゲームを例として使用し、さまざまな開発タスクに Amazon Q Developer を使用する方法を示します。Amazon Q Developer は、マルバツゲームのコードを単一ページアプリケーション (SPA) として生成し、UI を改善して、アプリケーションを AWSにデプロイするためのスクリプトを作成します。

Amazon Q Developer はコーディングアシスタントとして機能して、ソフトウェア開発ワークフローを高速化し、開発者と非開発者の両方の生産性を向上させます。お客様の技術的な専門知識に関係なく、アーキテクチャの作成とビジネス課題に対するソリューションの設計に役立ち、作業環境をブートストラップし、新機能の実装を支援し、検証用のテストケースを生成します。自然言語での指示と AI 機能により、コードの一貫性と高い品質を確保し、プログラミングスキルに関係なくコーディングの課題を軽減します。

Amazon Q Developer の主な利点は、反復的なコーディングタスクから解放されることです。@workspace 注釈を使用すると、Amazon Q Developer は統合開発環境 (IDE) 内のすべてのコードファイル、設定、プロジェクト構造を取り込んでインデックス化し、お客様がクリエイティブな問題解決に集中できるようにカスタマイズされた応答を返します。これにより、革新的なソリューションを設計し、ユーザーエクスペリエンスを向上させるためにより多くの時間を費やすことができます。技術的な専門知識をお持ちでない場合は、Amazon Q Developer を使用してワークフローを合理化し、開発チームとより効果的にコラボレーションできます。Amazon Q Developer のコードの説明機能では詳細な手順と概要を利用できるため、複雑なコードベースに対処できます。

さらに、Amazon Q Developer は、特定の言語に依存しないアプローチを提供し、初心者レベルや中級者レベルの開発者がスキルセットを拡張するのに役立ちます。特定の言語だけで使用される構文ではなく、主要な概念とビジネスロジックに集中できます。これにより、使用言語を切り替える際の学習曲線が短縮されます。

前提条件と制限

前提条件

  • Amazon Q Developer プラグインがインストールされた IDE (WebStorm や Visual Studio Code など)。手順については、Amazon Q Developer ドキュメントの「IDE に Amazon Q Developer 拡張機能またはプラグインをインストールする」を参照してください。

  • Amazon Q Developer でのアクティブな AWS アカウント セットアップ。手順については、Amazon Q Developer ドキュメントの「開始方法」を参照してください。

  • インストール済みの npm。手順については、npm ドキュメントを参照してください。このパターンは npm バージョン 10.8 でテストされています。

  • AWS Command Line Interface (AWS CLI) がインストールされています。手順については、AWS CLI ドキュメントを参照してください。

制限事項

  • Amazon Q Developer は、一度に 1 つの開発タスクのみ実行できます。

  • 一部の AWS のサービス は では使用できません AWS リージョン。利用可能なリージョンについては、「AWS のサービス (リージョン別)」を参照してください。特定のエンドポイントについては、「サービスエンドポイントとクォータ」を参照して、サービスのリンクを選択してください。

ツール

  • このパターンには、Visual Studio Code や WebStorm などの IDE が必要です。サポートされている IDE のリストについては、Amazon Q Developer ドキュメントを参照してください。

  • AWS Command Line Interface (AWS CLI) は、コマンドラインシェルのコマンド AWS のサービス を使用して を操作するのに役立つオープンソースツールです。

ベストプラクティス

AWS 規範ガイダンスの「Amazon Q Developer でのコーディングのベストプラクティス」を参照してください。加えて:

  • Amazon Q Developer にプロンプトを入力するときは、指示が明確であいまいでないことを確認してください。プロンプトについてより多くのコンテキストを提供するために、プロンプトに @workspace などのコードスニペットと注釈を追加してください。

  • システムによる競合や誤った推測を回避するため、関連するライブラリを含めてインポートしてください。

  • 生成されたコードが正確でない、または期待どおりのものでない場合は、[フィードバックを提供して再生成する] オプションを使用してください。プロンプトを複数の小さな手順に分割してみてください。

エピック

タスク説明必要なスキル

新しいプロジェクトを作成します。

作業環境で新しいプロジェクトを作成するには、次のコマンドを実行して、すべての質問のデフォルト設定を受け入れます。

npx create-next-app@latest
アプリ開発者、プログラマー、ソフトウェア開発者

ベースアプリケーションをテストします。

次のコマンドを実行し、ベースアプリケーションがブラウザで正常にロードされることを確認します。

npm run dev
アプリ開発者、プログラマー、ソフトウェア開発者

ベースコードをクリーンアップします。

src/app フォルダ内の page.tsx ファイルに移動して、デフォルトのコンテンツを削除して空白のページを取得します。削除した後、ファイルは次のようになります。

export default function Home() {
  return (<div></div>
      );
}
アプリ開発者、プログラマー、ソフトウェア開発者
タスク説明必要なスキル

ステップの概要を取得します。

  1. IDE でプロジェクトを開いて、Amazon Q アイコンを選択してチャットパネルを開きます。

  2. Amazon Q Developer チャットパネルで、単一ページアプリケーション (SPA) の作成の概要をリクエストします。例えば、次のようになります。

    I would like to create a single-page application involving Next.js React framework
for tic-tac-toe game. What are the steps?
アプリ開発者、プログラマー、ソフトウェア開発者

マルバツゲームのコードを生成します。

チャットパネルで、/dev コマンドを使用してタスクの説明を入力し、開発タスクを開始します。例えば、次のようになります。

/dev Create a React-based single-page application  written in TypeScript for a tic-tac-toe game with the following specifications:
1. Design an aesthetically pleasing interface with the game grid centered vertically and 
horizontally on the page. 
2. Include a heading and clear instructions on how to play the game.
3. Implement color-coding for X and O marks to distinguish them easily.

Amazon Q Developer は指示に基づいてコードを生成します。

アプリ開発者、プログラマー、ソフトウェア開発者

生成されたコードを確認して承認します。

コードを目視で確認し、[コードを承認する] を選択して page.tsx ファイルを自動的に置き換えます。

問題が発生した場合は、[フィードバックを提供して再生成する] を選択し、発生した問題についての説明を入力します。

アプリ開発者、プログラマー、ソフトウェア開発者

lint エラーを修正します。

サンプルのマルバツゲームにはグリッドが含まれています。Amazon Q Developer が生成するコードは、デフォルトのタイプ any を使用する場合があります。Amazon Q Developer に次のようにプロンプトを入力することで、型安全性を高められます。

/dev Ensure proper TypeScript typing for the onSquare Click event handler 
to resolve any 'any' type issues.
アプリ開発者、プログラマー、ソフトウェア開発者

見た目の魅力を向上させます。

元の要件は、複数の小さなフラグメントに分割できます。例えば、開発タスクで次のプロンプトを使用して、ゲーム UI を改善できます。このプロンプトは、カスケードスタイルシート (CSS) のスタイルを改善し、デプロイ用にアプリケーションをエクスポートします。

/dev Debug and fix any CSS issues to correctly display the game grid and overall layout. 

Simplify the code by removing game history functionality and related components. 

Implement static file export to an 'out' directory for easy deployment. The solution 
should be fully functional, visually appealing, and free of typing errors or layout issues.
アプリ開発者、プログラマー、ソフトウェア開発者

テストをもう一度実行します。

  1. 開発ライフサイクルが完了したので、コードをテストし、期待どおりに動作することを確認します。アプリケーションをローカルで実行するには、次のコマンドを使用します。

    npm run dev

  2. アプリケーションが正常に動作する場合は、デプロイの準備のため、build コマンドを使用してアプリケーション全体を出力フォルダにエクスポートします。

    npm run build
アプリ開発者、プログラマー、ソフトウェア開発者
タスク説明必要なスキル

デプロイ用のフォルダとファイルを作成します。

作業環境のプロジェクトで、デプロイフォルダを作成し、その中に pushtos3.sh と cloudformation.yml の 2 つのファイルを作成します。

mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml
アプリ開発者、プログラマー、ソフトウェア開発者

自動化コードを生成します。

  1. Amazon Q Developer のチャットパネルで、次のプロンプトを入力します。

    /dev Generate a Cloudformation template that creates two resources: tictactoe artifact 
bucket and CloudFront. CloudFront should be configured with this bucket as origin. 
Add cache policy appropriate for Amazon S3 and default root object as index.html. 
Ensure that origin access control is used and no public bucket is created. 
Output all the resources and  their ARNs.

  2. 生成されたコードを確認して承認します。以前に作成したcloudformation.ymlファイルには、 のリソースを作成する CloudFormation スクリプトが入力されます AWS クラウド。

AWS 管理者、AWS DevOps、アプリ開発者

スクリプトコンテンツを生成します。

デプロイスクリプトを作成するには、次のプロンプトを使用します。

/dev Modify the pushtos3 shell script so that it can use AWS CLI commands to create a 
CloudFormation stack named tictactoe-stack if it does not exist already, and use 
cloudformation.yml as the source template. Wait for the stack to complete and sync the 
contents from the out folder to the S3 bucket. Perform invalidation of the CloudFront 
origin.
アプリ開発者、プログラマー、ソフトウェア開発者

アプリケーションを AWS クラウドにデプロイします。

  1. 有効な AWS 認証情報を使用して作業環境を設定します。

  2. シェルスクリプトを実行して、完全に機能するマルバツゲームを AWS クラウドにデプロイします。

AWS 管理者、AWS DevOps、クラウドアーキテクト、アプリ開発者

トラブルシューティング

問題ソリューション

ビルドは、単一ページのアプリケーションを作成したり、出力フォルダにエクスポートしたりしません。

next.config.mjs ファイルのコンテンツを確認します。

コードに次のデフォルト設定が使用されている場合:

const nextConfig = {};

次のように変更します。

const nextConfig = {
  output: 'export',
  distDir: 'out',
};

関連リソース