翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # 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 拡張機能またはプラグインをインストールする](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE-setup.html)」を参照してください。 + Amazon Q Developer でのアクティブな AWS アカウント セットアップ。手順については、Amazon Q Developer ドキュメントの「[開始方法](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/getting-started-q-dev.html)」を参照してください。 + インストール済みの **npm**。手順については、[npm ドキュメント](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)を参照してください。このパターンは npm バージョン 10.8 でテストされています。 + AWS Command Line Interface (AWS CLI) がインストールされています。手順については、[AWS CLI ドキュメント](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html)を参照してください。 **制限事項** + Amazon Q Developer は、一度に 1 つの開発タスクのみ実行できます。 + 一部の AWS のサービス は では使用できません AWS リージョン。利用可能なリージョンについては、「[AWS のサービス (リージョン別)](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/)」を参照してください。特定のエンドポイントについては、「[サービスエンドポイントとクォータ](https://docs.aws.amazon.com/general/latest/gr/aws-service-information.html)」を参照して、サービスのリンクを選択してください。 ## ツール + このパターンには、Visual Studio Code や WebStorm などの IDE が必要です。サポートされている IDE のリストについては、[Amazon Q Developer ドキュメント](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/q-in-IDE.html#supported-ides-features)を参照してください。 + [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) は、コマンドラインシェルのコマンド AWS のサービス を使用して を操作するのに役立つオープンソースツールです。 ## ベストプラクティス AWS 規範ガイダンスの[「Amazon Q Developer でのコーディングのベストプラクティス](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/best-practices-coding.html)」を参照してください。加えて: + Amazon Q Developer にプロンプトを入力するときは、指示が明確であいまいでないことを確認してください。プロンプトについてより多くのコンテキストを提供するために、プロンプトに `@workspace` などのコードスニペットと注釈を追加してください。 + システムによる競合や誤った推測を回避するため、関連するライブラリを含めてインポートしてください。 + 生成されたコードが正確でない、または期待どおりのものでない場合は、**[フィードバックを提供して再生成する]** オプションを使用してください。プロンプトを複数の小さな手順に分割してみてください。 ## エピック ### 作業環境をセットアップする | タスク | 説明 | 必要なスキル | | --- | --- | --- | | 新しいプロジェクトを作成します。 | 作業環境で新しいプロジェクトを作成するには、次のコマンドを実行して、すべての質問のデフォルト設定を受け入れます。
npx create-next-app@latest
| アプリ開発者、プログラマー、ソフトウェア開発者 | | ベースアプリケーションをテストします。 | 次のコマンドを実行し、ベースアプリケーションがブラウザで正常にロードされることを確認します。
npm run dev
| アプリ開発者、プログラマー、ソフトウェア開発者 | | ベースコードをクリーンアップします。 | `src/app` フォルダ内の `page.tsx` ファイルに移動して、デフォルトのコンテンツを削除して空白のページを取得します。削除した後、ファイルは次のようになります。
export default function Home() {
  return (

      );
}
| アプリ開発者、プログラマー、ソフトウェア開発者 | ### Amazon Q Developer を使用してマルバツゲームプロジェクトを設計する | タスク | 説明 | 必要なスキル | | --- | --- | --- | | ステップの概要を取得します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | アプリ開発者、プログラマー、ソフトウェア開発者 | | マルバツゲームのコードを生成します。 | チャットパネルで、`/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.
| アプリ開発者、プログラマー、ソフトウェア開発者 | | テストをもう一度実行します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | アプリ開発者、プログラマー、ソフトウェア開発者 | ### アプリケーションを にデプロイする AWS クラウド | タスク | 説明 | 必要なスキル | | --- | --- | --- | | デプロイ用のフォルダとファイルを作成します。 | 作業環境のプロジェクトで、デプロイフォルダを作成し、その中に `pushtos3.sh` と `cloudformation.yml` の 2 つのファイルを作成します。
mkdir deployment && cd deployment
touch pushtos3.sh && chmod +x pushtos3.sh
touch cloudformation.yml
| アプリ開発者、プログラマー、ソフトウェア開発者 | | 自動化コードを生成します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | 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 クラウドにデプロイします。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/use-q-developer-as-coding-assistant-to-increase-productivity.html) | AWS 管理者、AWS DevOps、クラウドアーキテクト、アプリ開発者 | ## トラブルシューティング | 問題 | ソリューション | | --- | --- | | ビルドは、単一ページのアプリケーションを作成したり、出力フォルダにエクスポートしたりしません。 | `next.config.mjs` ファイルのコンテンツを確認します。コードに次のデフォルト設定が使用されている場合:
const nextConfig = {};
次のように変更します。
const nextConfig = {
  output: 'export',
  distDir: 'out',
};
| ## 関連リソース + [新しい React プロジェクトの作成](https://react.dev/learn/start-a-new-react-project) (React ドキュメント) + [Amazon Q Developer の概要](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html) (AWS ドキュメント) + [Amazon Q Developer のベストプラクティス ](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-code-generation/introduction.html)(AWS 規範ガイダンス) + [Installing, Configuring, and Using Amazon Q Developer with JetBrains IDEs](https://www.youtube.com/watch?v=-iQfIhTA4J0&pp=ygUSYW1hem9uIHEgZGV2ZWxvcGVy) (YouTube 動画) + [コマンドライン用の Amazon Q のインストール](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-getting-started-installing.html) (AWS ドキュメント)