2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

生成AIで遊ぼAdvent Calendar 2024

Day 10

VSCodeとAmazon Q Developer でノーコード開発するから私は高みの見物

Last updated at Posted at 2024-12-10

はじめに

AmazonQって何ですか?

image.png

以下製品との総称らしい
・Amazon Q Business
・Amazon Q Developer ←今回はこっちを使います

Amazon Q Developerて何ですか?

Amazon Q Developer は、コードエディタで使用できます。以下のプラグインまたは拡張機能をダウンロードして、数分で開始しましょう。 拡張機能とプラグインのインストールと使用にはデスクトップが必要です。

要はcursorのAWS版で、チャットでの対話形式でコードを生成できるようです。
現在日本語の対応はしておらず(というか英語しか対応していない)、英検3級の私は翻訳ツール必須でした。

※cursor

やってみた

環境

Amazon Qは、0からプロジェクトを生み出すことはできないようなので、
今回はSpringBootで初期プロジェクトを作成して、それを改修していこうと思います。

Eclipse

SpringBootで初期プロジェクトを作成します。
そのまま実行環境にしてもいいですし、VSCodeでjavaを実行できるならプロジェクトを作成以降使用しません。

VSCode

Amazon Q Developer のプラグインを入れてコードを生成する為に使用します。

AWSアカウント

AmazonQを使用するには、AWSアカウントが必要です。

翻訳ツール

セキュリティ情報を扱わないのであれば、Google翻訳でも構いません。
お好きなツールを使用してください。
AWS環境があればBedrockの安いテキスト型のモデルをプレイグラウンドで使用しても良いかと思います。

手順

SpringBootで初期プロジェクト作成

こちらの方の手順を参考に実行ができる状態まで進めてください。

注意
後続手順で、Workspaceフォルダ全体をAmazonQの解析対象にします。
空の新規フォルダとしてWorkspaceを作成してください。

http://localhost:8080/ にアクセスして、以下ページが表示されればOKです!

image.png

VSCodeにAmazonQのプラグインをインストール

公式の手順は以下

AmazonQが使えるアカウントが作成出来たら、
VSCodeのプラグインで「Amazon Q」をインストールします。

image.png

インストールが完了するとAmazonQボタンが生えてきます。

image.png

チャット開通確認

こんにちはをしてみましょう。

image.png

返ってきましたね。
「メッセージには英語でのみ返信できます。メッセージを英語で言い換えてください」
と言ってますので、まだ日本語対応できていないようです。

Workspace Indexを有効化

こんにちはを送る前の、AmazonQのメッセージを翻訳すると以下です。

ワークスペースをコンテキストとして追加するには、IDEの設定でローカルインデックスを有効にしてください。有効にした後、質問に「@workspace」を追加すると、ワークスペースをコンテキストとして使用して回答を生成します。

とりあえず従ってみましょう。

質問に「@workspace」を入力すると、設定画面へのボタンを出してくれるので、
クリックします。

image.png

設定画面が立ち上がるので、チェックボックスにチェックを入れます。

image.png

もう一度、質問に「@workspace」を追加すると回答が変化します。
(訳:何かお手伝いできることはありますか?)

image.png

世界に挨拶

「JavaでHello World書いてみて」と依頼してみると、手順を示してくれました。

image.png

cursorみたいにファイルを作成して、ファイルに遷移はできないようなので、手動で移動します。
→すみません。ファイル作成できました。/dev でプロジェクトを作成すればいいみたい。
VSCode上部に検索窓があるので、指示に従って対象ファイルを開きます。

image.png

対象ファイルを開いた状態で、「insert at cursor」をクリックするとコードが反映されます。

注意
選択中のコードを修正してくれるので、ファイル全体を修正したい場合は、
対象ファイル内のすべてのコードを選択状態にしてください。(WindowsならCtrl+A)

image.png

手順に従って「 http://localhost:8080/hello 」 にアクセスします。

image.png

表示できました。

image.png

まとめ

一度もコーディングをすることなく、Hello, Worldっが出来ました!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?