Slide 1

Slide 1 text

2025年 5⽉ 30⽇ クラウド事業本部 コンサルティング部 荒平 祐次 / arap Amazon Q Developer CLI  ショートラボ(Vibe Coding)

Slide 2

Slide 2 text

about me 荒平 祐次 (Arahira Yuji) クラスメソッド株式会社 クラウド事業本部 コンサルティング部 ソリューションアーキテクト - 経歴 ○ SIer (約5年)→クラスメソッド(約2年) - 業務内容 ○ AWS全般のインテグレーション・お悩み相談 ○ ブログ執筆 - 趣味 ○ Twitter (@0Air, @eiraces) ○ サイクリング、アクアリウム、VTuber鑑賞 ○ ゲーム (FF14, League of Legends) AWS re:Invent 2023にて 息子(1年6ヶ月)

Slide 3

Slide 3 text

LT Agenda 3 ● Amazon Q Developer CLI の紹介 ● Vibe Coding 5つのコツ ● ショートラボ

Slide 4

Slide 4 text

Amazon Q Developer CLI の紹介

Slide 5

Slide 5 text

Amazon Q Developer CLI 5 Amazon Q Developerの機能/サービスをCLIから利⽤可能 主な機能(公式githubより): - ⾃動補完 - git, docker, aws, npmなどのコマンドを補完 - ⾃然⾔語のチャット - ⽇本語でも質問可能 - コンテキスト認識 - ローカル環境のファイルなどを確認可、特定のコードに ついても回答できる - エージェント実⾏ - コード⽣成、ファイル編集、Gitやコマンド実⾏も可能

Slide 6

Slide 6 text

Amazon Q Developer CLI 6 インストールは簡単(macOS) Windowsの場合は WSL2+Ubuntu でインストールできます

Slide 7

Slide 7 text

Amazon Q Developer CLI 7 気になる利⽤費について 無料利⽤ Amazon Q Developer Pro Tier(19USD/User) IDEチャット‧コードデバッグ‧テスト追加 50回∕⽉まで IDEチャット‧コードデバッグ‧テスト追加 無制限 Agentによるチャットコーディング 2025/6/1 まで無料 Agentによるチャットコーディング 2025/6/1 まで無料 CLIの補完 無料 CLIの補完 無料 その他機能たくさん 最新の料⾦について詳しくは: https://aws.amazon.com/jp/q/developer/pricing/

Slide 8

Slide 8 text

Vibe Coding 5つのコツ

Slide 9

Slide 9 text

Vibe Coding = 雰囲気コーディング ⼈間がAIに指⽰を出し、コードの⼤半をAIに作ってもらう⼿法 中級エンジニアとの⽐肩は近い将来まで来ており、コーディングよりプロンプト ⼒が試される時代になってきている Metaのザッカーバーグ CEO、2025年中にAIエージェントは中堅エンジニアと肩を並べると期待 https://japan.zdnet.com/article/35228927/ Vibe Codingって? 9

Slide 10

Slide 10 text

開発速度が尋常じゃなく早い⼀⽅で、コードの品質には要注意 対策として: - テストケースも書いてもらう - リファクタリングを指⽰する - 後から機能追加した場合に全体的に汚くなりやすい - 同じプロンプトを与え、⽐較してもよい 個⼈的に⼤切に感じたVibe Codingのコツを紹介します Vibe Codingって? 10

Slide 11

Slide 11 text

利⽤したい⾔語‧フレームワークを最初に宣⾔することで、 - コンテキストを理解して書いてくれる - 実⽤的なコード⽣成をしてくれる確率が⾼い と、メリットが⼤きいので明⽰したほうがよい 例) - Python + Flaskで簡単なTODO APIを作りたいです。RESTfulな設計でお願い します - React + TypeScriptでユーザー管理画⾯を作成したいです。Material-UIを 使って綺麗にしたいです - ポートフォリオサイトを作りたいです。anime.js を⽤いてグラフィカルなサ イトを準備してください ⭐ 特に希望がない場合はそこから相談してみるのも◎ コツ① 使う⾔語‧フレームワークを明⽰する 11

Slide 12

Slide 12 text

ある程度有名なツールについてはユースケース含め伝えなくてもよいが、 独⾃ツール‧APIなどはドキュメントを読んでもらったほうが早い (Amazon Q Developer CLIはagent経由の filesystem-read ができる) コツ② 利⽤ツールのドキュメントを共有する 12 Swaggerなどのドキュメントを保存 Amazon Q

Slide 13

Slide 13 text

「何のために」作るのか、「誰が」それを利⽤するのか、「何故」困っている のか‧‧‧など細かく共有すればするほど期待に近いコードが⽣成される Vibe Codingにおいては軽視されがちだが、そこの壁打ちから始めるのも◎ 最初からfew-shot prompting 前提の場合はその限りではない (後からコンテキストを渡して機能を付け⾜してもらうのも勿論◎) ⭐ 欲しいものが明確に決まっている場合は、その旨をしっかり書こう コツ③ ⽬的やコンテキストを共有する 13

Slide 14

Slide 14 text

⼊⼒するプロンプトをどこかにメモっておくのがオススメ Amazon Q Developer CLIの場合、エラーによりセッションが切断された場合は により、会話状況を復元することが可能 (また、セッション中に /save をすることで /load 会話読み込みが可能) ※ 会話が⻑くなると中断率が上がるような気もする… 参考: https://docs.aws.amazon.com/ja_jp/amazonq/latest/qdeveloper-ug/command-line-chat-persistence.html コツ④ セッションがいつ中断してもいいようにしておく 14

Slide 15

Slide 15 text

Amazon Q Developer CLIでは、ターミナルの認証情報をそのまま利⽤すること があるので、セッション開始前に必ず確認しましょう(事故の元になる) 開発環境の認証情報を使っていたと思ったら、本番環境だった…ということも 起こり得ます ※ プロンプト⼊れて確認してもらうのも可能 ⭐ ⼿軽さと天秤になるが、都度新規のSpot EC2にインストールして利⽤するの もいいかも‧‧‧? コツ⑤ AWSやgitなどの認証情報には注意 15

Slide 16

Slide 16 text

ショートラボ

Slide 17

Slide 17 text

プロンプト: Amazon Q Developer CLI ショートラボ 17 クラスメソッド主催の「midosuji tech」という技術イベントの ホームページを作ります。モダンUIかつシンプルな構成で表現して ください。 テーマカラーはオレンジ、anime.js によるアニメーションを随所に ⼊れてください。成果物はローカルに保存してください。

Slide 18

Slide 18 text

プロンプト: Amazon Q Developer CLI ショートラボ 18 クラスメソッド主催の「midosuji tech」という技術イベントの ホームページを作ります。モダンUIかつシンプルな構成で表現して ください。 テーマカラーはオレンジ、anime.js によるアニメーションを随所に ⼊れてください。成果物はローカルに保存してください。 コンテキストの共有 ライブラリの指⽰

Slide 19

Slide 19 text

成果物(サンプル): Amazon Q Developer CLI ショートラボ 19

Slide 20

Slide 20 text

No content