Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた

Transcript

1. Amazon Q Developer for GitHub と AWS Amplify Hosting で サクッとデジタル名刺を作ってみた 2025/06/18(水) 第3回 AWS初心者LT会in札幌 宮崎 健太
2. 自己紹介 宮崎 健太 職業：Webアプリのフロントエンドエンジニア 最近、AWSのインフラ開発もやってます！ 趣味： • ゲーム (Switch2は４回戦に進出しました) • お酒 (最近クラフトジンを飲みます) Xアカウント：たけのこ
3. 話すこと/ 話さないこと 話すこと 話さないこと Amazon Q Developer for GitHubの概要 AWS Amplify Hostingの概要 デジタル名刺を作った流れと所感 ⾼度なAWS設定やインフラ構成 ⽣成AIの理論や技術的仕組み デジタル名刺の仕組みや詳細
4. アジェンダ 1. デジタル名刺とは 2. Amazon Q Developer for GitHub と Amplify Hosting 3. デジタル名刺を作ってみた 4. 所感
5. デジタル名刺とは
6. デジタル名刺とは 紙の名刺交換 デジタルな名刺交換 ・名刺にスマホをかざすだけで相手のプロフィールページへ！ ・NFCカードやNFCタグを買えば誰でも作れる！ ・プロフィールページはWebページなのでいつでも更新可能！ ・勉強会や懇親会など交流の場で大活躍！
7. 実際に作ったやつ 画面イメージ 実物の名刺 スマホをかざすと URLが表示される ブラウザでURLを開く
8. Amazon Q Developer for GitHub と Amplify Hosting
9. Amazon Q とは Amazon Q Amazon Q Developer Amazon Q Business AWS サービスに組み込まれたAmazon Q Amazon QuickSight Amazon Connect AWS Supply Chain AWSが提供する⽣成AIのアシスタント 生成AIによるコードの変換 生成AIによるコードのレビュー 生成AIによるコーディングの支援 AIエージェントによる包括的な支援 製品開発でも安心な専用の認証・認可 生成AIに社内ナレッジを活用可能 すぐに生成AIを使えるWebUIを利用可能
10. 利用できる環境 Amazon Q Developer とは AWSが提供する開発者向けの⽣成AIのアシスタント Amazon Q Developer for GitHub GitHubからAmazon Q Developerの機能が利用できる Amazon Q Developer CLI コマンドラインからAmazon Q Developerの機能が利用できる Amazon Q Developer IDE VSCodeなどIDEからAmazon Q Developerの機能が利用できる ※上記以外にもTeamsやSlackと連携してAmazon Q Developerを使えるようです 利用できる機能 (IDEから使える機能を抜粋) AWSサービス マネージドコンソールやAmazon QuickSightからAmazon Q Developerの機能が利用できる チャット チャット形式でAIエージェントが利用できる (ChatGPTとかClaudeとかのチャットのイメージ) ドキュメント⽣成 ⽣成AIがコードを読んでドキュメントを⽣成してくれる コードレビュー ⽣成AIがコードを読んでセキュリティ観点でレビューをしてくれる ユニットテスト⽣成 ⽣成AIがコードを読んでユニットテストを⽣成してくれる
11. Amazon Q Developer for GitHub とは GitHub Issue の作成 タスクや機能の要件を記述 Amazon Q Developer が実装からPR 要件を理解し、コードを⽣成・PRまで実行 Amazon Q Developer がコードレビュー セキュリティ観点から自己レビュー&修正まで可能 Amazon Q DeveloperをGitHubから利用できる機能 できること Issueからコード実装 Issueの内容からコードを実装してプルリクエストまで行ってくれる プルリクエストから自動コードレビュー プルリクエストのコードを自動でレビューしてくれる プルリクエストへのコメントからコード修正 Amazon Q Developerが書いたコードに指摘すると修正してく れる 2025/6/18(水)時点でプレビュー機能です！！ 開発の流れ
12. AWS Amplify Hosting とは AWS Cloud 簡単にGitHubと連携して自動デプロイができる！ 特定のブランチにプッシュされると自動でデプロイが実行が可能 簡単にS3 + CloudFrontでホスティングできる！ AWSサービスの細かな設定を意識せず簡単にホスティングが可能 簡単にGUI上からWebアプリをデプロイできる！ マネージドコンソール上からポチポチするだけで即デプロイが可能 簡単にWAFによるセキュリティ対策ができる！ 最近、統合されたWAFによってセキュアなアプリが構築可能 AWS Amplifyがコードをいい感じにデプロイ・ホスティングしてくれる機能 イメージ図 GitHub S3 CloudFront WAF Amplify React User できること
13. デジタル名刺を作ってみた
14. 開発の流れ 要件定義 担当 自分 設計 担当 ⽣成AI (GitHub Copilot Amazon QDeveloper) 開発 担当 ⽣成AI (Amazon Q Developer) 動作確認 担当 自分 デプロイ 担当 AmplifyHosting ※GitHubとAmazon Qを連携させる設定が必要です
15. 開発の流れ 要件定義 担当 自分 設計 担当 ⽣成AI (GitHub Copilot Amazon QDeveloper) 開発 担当 ⽣成AI (Amazon Q Developer) 動作確認 担当 自分 デプロイ 担当 ※GitHubとAmazon Qを連携させる設定が必要です AmplifyHosting
16. 要件定義 マークダウンに作りたいアプリの要件を書く！ # 機能要件 - Webページでプロフィールを閲覧できること - プロフィールから下記を閲覧できること - アイコン画像 - ユーザー名 - 簡単な自己紹介文 - 各ユーザページへのリンク - X (ソーシャルメディア) - Qiita# 非機能要件 - スマホ、PCで閲覧できること (レスポンシブ対応されていること) - Webページは、ReactとTypeScriptを使用して、実現すること - Webページは、AWS Amplify Hostingでホスティングすること
17. 開発の流れ 要件定義 担当 自分 設計 担当 ⽣成AI (GitHub Copilot Amazon QDeveloper) 開発 担当 ⽣成AI (Amazon Q Developer) 動作確認 担当 自分 デプロイ 担当 Amplify Hosting ※GitHubとAmazon Qを連携させる設定が必要です
18. 設計 GitHub Copilot + GitHub MCP ：要件定義から設計のIssueを作成！ 「要件.md」を元に、デジタル名刺用の自己紹介ページの設計のIssueを１つ作成してください。 また作成するIssueは下記のルールに従うようにしてください。 - 設計書はmdファイルとして、designフォルダに格納します。 - 出来るだけ詳細に設計するようにしてください。 - Issueは1000文字以内で作成してください。 - 文字数が限られているので、絵文字などは不要です。 - プルリクエストのターゲットは、devにしてください。 - Issueには必ず以下のラベルを指定してください - Amazon Q development agent ※ GitHub MCPは、AIエージェントがGitHubを操作するための拡張機能のようなものです
19. 設計 Amazon Q Developer for GitHub：Issueから設計書を⽣成 & プルリク Amazon Q Developer君の作業が終わるまで待ちます… プルリクエストが⽣成されます 10分後
20. 設計 Amazon Q Developer for GitHub：設計書を確認してプルリク承認！
21. 開発の流れ 要件定義 担当 自分 設計 担当 ⽣成AI (GitHub Copilot Amazon QDeveloper) 開発 担当 ⽣成AI (Amazon Q Developer) 動作確認 担当 自分 デプロイ 担当 ※GitHubとAmazon Qを連携させる設定が必要です AmplifyHosting
22. 開発 GitHub Copilot + GitHub MCP ：開発用のIssueを⽣成する デジタル名刺用の自己紹介ページの下記の実装のIssueを１つ作成してください。 - designフォルダの設計を元に実装します。 - Amplify Hosting周りなどデプロイ周りは不要です。 また作成するIssueは下記のルールに従うようにしてください。 - Issueは1000文字以内で作成してください。 - 文字数が限られているので、絵文字などは不要です。 - プルリクエストのターゲットは、devにしてください。 - Issueには必ず以下のラベルを指定してください - Amazon Q development agent Point ① Issueのラベルに「Amazon Q development agent」を指定する必要がある ② Issueの文字数は最大1,000文字以内である必要がある
23. 開発 Amazon Q Developer for GitHub：Issueからコードを⽣成 & プルリク Amazon Q Developer君の作業が終わるまで待ちます… プルリクエストが⽣成されます 10分後
24. 開発 Amazon Q Developer for GitHub：自動的にコードレビュー 潜在的なクロスサイトスクリプティング（XSS）の 脆弱性が検出されました。 ユーザーが制御するデータが適切なサニタイ ズ処理なしに出力されているため、攻撃者が 悪意のあるスクリプトを挿入できる可能性があ ります。 これは、セッションハイジャック、マルウェアの インストール、フィッシング攻撃につながる可能 性があります。ユーザー入力は、出力に含める 前に必ずサニタイズ処理を行い、コンテキスト に適したエンコード方式でエンコードしてくださ い。 詳細はこちら - https://cwe.mitre.org/data/definitions/79.html 初めから実装 すればいいじゃん…
25. 開発の流れ 要件定義 担当 自分 設計 担当 ⽣成AI (GitHub Copilot Amazon QDeveloper) 開発 担当 ⽣成AI (Amazon Q Developer) 動作確認 担当 自分 デプロイ 担当 ※GitHubとAmazon Qを連携させる設定が必要です AmplifyHosting
26. 動作確認 ローカルで画面を起動してみる / 問題なければPRをマージ npm install npm rnu dev
27. 開発の流れ 要件定義 担当 自分 設計 担当 ⽣成AI (GitHub Copilot Amazon QDeveloper) 開発 担当 ⽣成AI (Amazon Q Developer) 動作確認 担当 自分 デプロイ 担当 ※GitHubとAmazon Qを連携させる設定が必要です AmplifyHosting
28. デプロイ マネージドコンソールのAmplify画面からポチポチ
29. デプロイ GitHubと連携する
30. デプロイ 実装したリポジトリを指定する
31. デプロイ 自動的にデプロイ開始！「デプロイ済み」になるのを待つだけ！
32. デプロイ URLを開くとデジタル名刺が見れる！
33. あとはNFCカードの設定をするだけ！ NFCカードにURLを登録するアプリがあるので設定すればOK！ https://apps.apple.com/jp/app/nfc-tools/id1252962749
34. デジタル名刺できた！
35. ちなみに① スマホからIssue作れば出先で開発が出来ちゃいます！便利！
36. ちなみに② 割とエラーが多発する割にはエラーの原因は教えてくれない… 技術的な問題が発生しました。（特にエラーは教えてくれず…) 再実行が出来ないので、こうなるとIssueを作り直すしかない…
37. ちなみに③ Amazon Q Developerには無料版もあるよ！試してみてね！ 無料枠は多分50回まで… (情報求む)
38. 所感
39. 所感 良かった点 GitHubにIssueとして履歴が残る ⽣成AIにコード書いてもらっていると、履歴から辿れなくなるので助かる！ 場所を選ばず開発できる GitHub上で⽣成AIを呼んでくれるので、スマホからIssue作れば開発可能！ 今後の展望 競合サービスのと比較をしたい Claude Code Actionで同じようにGitHubから開発可能！どっちがええんや… もう少し規模が大きいアプリも実装してみたい バックエンドも含め、どこまで⽣成AIやAmplifyだけで開発できるか試したい…. AmazonQDeveloperのベストなユースケースを探りたい AmazonQDeveloperはどの開発フェーズに向いてるのだろうか… 誰でも簡単CICDパイプライン構築 画面からポチポチするだけでCICDパイプラインが構築できちゃう！ 総括 AmazonQDeveloper for GitHubのメリットは、どこでもIssueさえ作れば開発できるところでしょうか。 Amplify Hostingも画面操作だけでいい感じにデプロイしてくれるので大変助かりました！ 特にAmazonQDeveloperは時代の流れを感じます… 進化も早いのでキャッチアップを進めたいと思います！
40. 話は変わって Amazon Q Developer CLI でゲームを作って応募するとTシャツもらえる！！ Amazon Q Developerが気になる方は触ってみよう！ https://community.aws/content/2xIoduO0xhkhUApQpVUIqBFGmAc/build-games- with-amazon-q-cli-and-score-a-t-shirt 本当はTシャツ着てLTしたかったのですが、 到着が明日で間に合わず… 期限が6/30まで伸びました！ まだチャンスがある！！
41. 以上です！ ありがとうございました！！