TwitterFacebookRSS Feed

Amazon Q Developerで簡単な Webサービスを作ってみる

こんにちは、ryudaiです！

以前、2025 Japan AWS Jr. Champions の活動の一環で、表題のような簡単なハンズオンを行いました。

その中身をブログに書き起こしたので、

  • あまりAI触ったことないよ
  • Amazon Q Developerはじめて触るよ
  • 自分でもWebサービス作れるのかな

な人は一緒にやっていきましょう！

今回は、簡単なTODOリストを作っていきます。

■事前準備

今回使うものはこちらです。

  • Visual Studio Code (VSCode): コードを書くエディターです。まずはこれをインストール！
  • Amazon Q Developer (拡張機能): VSCodeの拡張機能としてインストールしていきます
  • Live Server (拡張機能): こちらもVSCodeの拡張機能です。HTMLをプレビューするために使います

■つくりかた

Webサービスはざっくり、以下のような構成でできています。

HTML、
HTML、CSS、JavaScriptの比較
  • HTML: ページのコンテンツそのものを記述するもので、骨組みとなります
  • CSS: HTMLの要素に対して、色や形、空白などを定義します
  • JavaScript: いわゆる「プログラミング言語」で、HTMLに動きをつけることができる

今回はHTML→CSS→JavaScriptの順に作っていきます。

といっても、作るのはAmazon Q Developerですが！

■Amazon Q Developerをひらく

まずは適当なフォルダを作り、VSCodeを開きます。私はq-dev-todoというフォルダを作成しました。

VSCodeの左のタブに、「Amazon Q」のアイコンがあると思います。これをクリックして開くと以下のようになるかと思います。

Amazon Q Developerにログインを求められている

Amazon Q Developerを使うために、「Builder ID」でログインするか、Proライセンスのサブスクリプション を行ってください。

無事ログインできると以下のようにチャット画面が開けます。

VSCodeでAmazon Q Developerのチャット画面が開いている

■HTMLをつくる

では、チャット画面で以下のように書いてみましょう。

これから、HTML・CSS・JavaScriptでシンプルなTODOリストを作成していきます。まずは、HTMLを作成してください。

私の画面ではこのように返ってきました。

Amazon Q DeveloperがHTMLを作成したと言っている

VSCodeの画面左上、「エクスプローラー」ボタンを開くとindex.htmlが作成されていました。ここで、「index.html」を右クリックすると出てくる「Open with Live Server」を押してください。

Open with Live Serverを選択している様子

すると、自動的にブラウザで http://127.0.0.1:5500/index.html のリンクが開いたはずです。TODOリストと書いてありますが、まだ何も動作しません。

動作しないTODOリストの画面

■CSSをつくる

次に、見た目を整えていきます。チャットに以下を入力します。

次にCSSで見た目を整えます。シンプルでスタイリッシュ、モダンな見た目にしてください。

あえて抽象的な言い回しにしています。無事にCSSが作成されましたね。

CSSファイルが作成されている様子

ではどのような画面になったでしょうか？先程のhttp://127.0.0.1:5500/index.html に戻って見てみましょう。

TODOリストの見た目が整えられている

青~紫のグラデーションがついて、かっこよくなりましたね。

みなさんはどんな見た目になりましたか？

■JavaScriptをつくる

ここまででは、まだTODOリストの「機能」ができていません。最後にJavaScriptを追加していきましょう。

最後に、JavaScriptで機能をつけてください。
JavaScriptファイルが作成された様子

では、実際にブラウザで使っていきましょう！

タスクが追加された様子

無事にタスクが追加されました！ついでに削除機能も作ってくれていますね。

■もし動かなかったら？

ブラウザでF12キーを押すと、「検証ツール」を開くことができます。

この検証ツールの「Console」で、以下のようにエラーを見ることができます。

検証ツールのConsoleタブにエラーが出ている様子

このエラーをAmazon Q Developerのチャット画面に貼り付けて「修正してください」とお願いすればOKです。

■最後に

どうでしたでしょうか？初めての方も、意外と簡単だなーと思ったのではないでしょうか。

余力のある方は、チャットの続きで

  • CSSを編集して見た目を自分好みに変えてみる
  • JavaScriptを編集して機能を追加する
  • WebサイトをAWSに公開する

などを試してみてください！