Amazon Q Developer CLI (現Kiro CLI) で作った 新潟ランチマップWebアプリのこれまでとこれから / 20260207jawsug-tochigi

2026/02/07 (土) JAWS-UG 栃木 オフライン #6 -1周年感謝祭- で発表した資料

イベントページ
https://jawsug-tochigi.connpass.com/event/381536/

Transcript

1. Amazon Q Developer CLI (現Kiro CLI) で作った 新潟ランチマップWebアプリのこれまでとこれから JAWS-UG栃木 オフライン # 6 -1周年感謝祭- 2026/02/07 笠原 宏
2. JAWS-UG栃木 1周年 おめでとうございます！ 昨年のJAWS-UG栃木の初回キックオフ会で初めて小山に訪問してから、 今回で5回目の小山訪問になりました。
3. 笠原 宏 (@kasacchiful) クラスメソッド株式会社 データ事業本部 ビジネスソリューション部 ソリューショ ンアーキテクト 新潟県新潟市在住 JAWS-UG新潟 / Python機械学習勉強会 in 新潟 / JaSST Niigata / ASTER / SWANII / Cloudflare Meetup Niigata / AI CRAFT Hacks Niigata / KomeKaigi AWS Community Builder (Serverless) 2025 Japan AWS Top Engineer / 2025 Japan All AWS Certifications Engineer 自己紹介 3
4. 1. Amazon Q Developer CLIで作成したアプリの紹介 2. (これまで) 背景と開発履歴 3. (これから) Kiro CLIで作り直すと変わるであろう開発の流れ アジェンダ 4
5. Amazon Q Developer CLIで作成したアプリの紹介
6. こんな感じのグルメサイト https://ngt-gourmet.kasacchiful.net 6
7. フロントエンド: React v18.2 AWS Amplify Hosting にて配信 バックエンド: PHP v8.3 / Slim Framework v4.14 AWS Lambda (Container with Lambda Web Adapter) / AWS Lambda Function URLs Amazon DynamoDB 元々、PHP Conference 新潟 のLTネタで作ったものなので、バックエンドにPHPを使いました が、 Amazon Q Developer for CLI (現Kiro CLI) のAIエージェントに作ってもらったので、コーディン グしてない 2週間程度でまったり構築（ほとんどお店データの作成に時間かける） 技術要素 7
8. 構成図 8
9. 無料で使える 有料のPro版もあるが、今回は無料のまま利用 AWS Builder ID (AWSアカウントとは異なる) を登録すれば使える 基盤モデルは Anthropic Claude 3.7 Sonnet 利用当時 (2025/05頃) はモデル変更不可 2025/06には、Claude Sonnet 4 に変更可能 2006/02現在のKiro CLIは、Claude Sonnet 4.5 / Haiku 4.5 を選択可能 Amazon Q Developer for CLI (当時 / 現Kiro CLI) 9
10. 背景と開発履歴
11. PHP Conference 新潟 2025 が5/31 (土) 開催！ PHP 5.3止まりで10年以上まともに触ってないワイ、CFPは流石に出せない 前日5/30 (金) に前夜祭あり！LT枠あり！ テーマは特に指定されてないから、PHPじゃなくても良さそう 県外参加者が大半だから、新潟のグルメでも紹介しようか せっかくならPHP絡めて、グルメサイトをPHP使って構築しよう きっかけ 11
12. context.md に簡単な仕様を書く Amazon Q Developer for CLIのチャットで、 「context.md の内容に従って、Webサイトのソ ースコードを作成してください」と入力する → Amazon Q Developer for CLIのエージェントによって、ソースコードが続々と作られる 動作確認しながら、context.mdに機能追加してエージェントに作らせることを繰り返す # Niigata Gourmet Location Site 以下の内容のWebサイトを構築したい。 ## サイト内容 - 新潟駅周辺のグルメスポットを紹介するWebサイト - 画面内に大きな地図を表示して、グルメスポットにピンが表示されている - そのピンをクリックすると、グルメの画像と詳細項目が表示される - 詳細項目に該当グルメスポットのWeb URLも表示されるので、そのURLをクリックするとそのURLのWebページに別タブで画面遷移してほしい ## 仕様 - PCおよびモバイルデバイス上のWebブラウザで最適化表示してほしい。 - フロントエンドは React ベースで構築してほしい。 - バックエンドは PHP / Slim ベースで構築してほしい。 - データベースは Amazon DynamoDB を想定して構築してほしい。 - デプロイ先は AWS Lambda のコンテナイメージとし、Lambda Web AdopterとLambda Function URLsを利用してほしい。 初期プロンプトはこんな感じ 12
13. デプロイ手順が生成されるので、それに従う 一部おかしい部分があったが、それはワイの方 ですぐ直した DockerfileのLambda Web Adapterの記述 がおかしい等 フロントエンドのデプロイ先仕様を渡してなか ったので、手順書にはS3 + Cloudfrontによる 配信手順が出てきた ワイの方でAmplify Hostingへのデプロイに した ついでにサブドメインで動作するように設定 した デプロイは自分で実施 13
14. サンプルデータができているので、フォーマットはそれに合わせて、データを作成 全部は載せきれないので、ある程度絞る それでも43件 画像は全てワイが過去に撮影したもの 画像なしのお店も一部ある（探すのに疲れたため） YAMLで定義してCLIでDynamoDBに投入 niigata_gourmet_spots: - PutRequest: Item: id: S: spot1 name: S: "ラーチャン家 バスセンター店" tags: L: - S: "ラーメン" - S: "朝にオススメ" address: S: "新潟県新潟市中央区万代1-6-1 万代シテイバスセンタービル 1F" business_hours: S: "08:00-19:00 (土: 08:00-17:00)" データ整備は時間をかける 14
15. 前夜祭LT当日の模様 https://www.wantedly.com/companies/dip/post_articles/979963 15
16. Google Analytics 4を仕込んでおいた Google Analytics 4の集計によれば、80名のユーザがアクセス PHPカンファレンス新潟2025の参加者数: 115名 ざっくり約7割の参加者がアクセスしてくれた！ アクセス数 16
17. AWS WAF: 約3USD AWS Amplify Hosting: 約0.3USD (内全てがビルド料金) Amazon ECR: 約0.2USD (コンテナイメージのデータ転送料) AWS LambdaやAmazon DynamoDBは無料枠の範囲内のため無料 HTTPS証明書はAmplifyからACMの無料証明書を設定したので、費用かからず。 サーバーレス構成であるため、スポット的なサイトであったものの費用は格安！ トータル 約3.5USD AWS費用 17
18. 利用者の声 18
19. 自身が運営に関わるイベントにて公開 KomeKaigiでは、シャッフルランチイベントで参加者同士で小さなグループ作ってもらって、ラ ンチマップアプリ参考にしながら会場周辺のお店でランチしてもらった KomeKaigi向けにカテゴリフィルタリング機能を修正 その後、JaSST'25 Niigata や KomeKaigi 2025 でも公開 19
20. Kiro CLIで作り直すと変わるであろう開発の流れ
21. 既存のコードは、PHP Conference 新潟 2025 のLT向けにざっと作ってもらったもの 他の新潟のイベントでも使うのであれば、バックエンドはPHPにこだわらなくてもいいかな せっかくならRustで作ってみるとか 機能改善もしたい 既存のものを活かすか、一から作り直すかは今後の課題 アプリを作り直そうかなと検討中 21
22. いままで 仕様書を書いてから、生成AIに仕様書を参考に直接コーディングしてもらう これから 仕様書を元に、生成AIに事前に設計書を書いてもらってから、その設計書に従ってコー ディングしてもらう Kiro CLIにはPlanエージェントがデフォルトで用意されているので、このエージェントを活用して から行うケースが増えると予想 他にも、サブエージェント作成も容易なので、レビュー用エージェントやテスト用エージェントも簡 単に作成できる。 Planエージェントで事前に設計書を作成してもらう 22
23. kiro_planner エージェントを使って、設計書を作ってもらう 読み取り専用設計 / Web検索はしてくれる /plan または /agent swap で選択 または Shift + Tab で切替 仕様書を読み込んで、いくつか質問がくるので回答し、それに基づい て設計書を作成 Planのワークフロー 1. 要件収集 2. 調査と分析 3. 実施計画 4. 計画の承認と引き継ぎ 実際に設計書を作るのはデフォルトのエージェントなので、その エージェントに引き渡す Planエージェント https://kiro.dev/docs/cli/chat/planning-agent/ 23
24. プロンプトは以下の通り docs/requirements/REQUIREMENTS.md に実現したいことをまとめた。 内容をよく読み、設計書を作成してほしい。 設計書は docs/design/ ディレクトリ配下にマークダウン形式で出力してほしい。 REQUIREMENTS.md にはこんな感じで記載 以下の内容のWebサイトを構築したい。 ## サイト内容 - 新潟駅周辺のグルメスポットを紹介するWebサイト - 画面内に大きな地図を表示して、グルメスポットにピンが表示されている - そのピンをクリックすると、グルメの画像と詳細項目が表示される - グルメの画像のURLがない場合は、画像タグを表示しない - 詳細項目に該当グルメスポットのWeb URLも表示されるので、そのURLをクリック するとそのURLのWebページに別タブで画面遷移してほしい - モバイルデバイスでの閲覧時は、GPSによる自分の位置を地図上に表示してほしい - 移動中も自分の位置が分かるようにしたいので、リアルタイムで自分の位置が更 新されるようにしてほしい - 自分の位置は丸のアイコンで他とは異なるようにしてほしい - PCでの閲覧時は、自分の位置は地図上に表示しない - カテゴリはタグ形式とし、複数のタグを設定できるようにしてほしい - カテゴリを絞り込んでピンを表示する、フィルタリング機能が欲しい - フィルタの画面部分は、初期表示は表示しておき、いつでも表示・非表示できるようにしてほしい - 複数のカテゴリを選択した場合は、AND条件でフィルタリングしてほしい - 初期表示位置は以下の場所にしてほしい - モバイルデバイス: 自分の位置 - それ以外: 新潟駅 - 表示位置を変更するボタンが欲しい - モバイルデバイスでは、表示位置を新潟駅と自分の位置に切り替える - モバイルデバイス以外は、新潟駅のみ - ボタンはアイコンで表現してほしい - 初期表示に所定のカテゴリを選択状態にできるように、URLパラメータでカテゴリを指定できる機能をつけてほしい ## 仕様 - PCおよびモバイルデバイス上のWebブラウザで最適化表示してほしい。 - フロントエンドは React ベースで構築してほしい。 - バックエンドは Rust ベースで構築してほしい。 例 24
25. Planエージェントを試してみる (デモ)
26. ワイが運営に関わる新潟のイベントでは公開する予定 普段は閉じてます いくつか機能要望あり 初期表示位置変更 URLパラメータでカテゴリ初期指定 Amazon Location Serviceへの変更 Kiro CLIを使って、作り直しを予定してます セキュリティアップデート等は、ある程度エージェントが自動で修正・デプロイできるような仕 組みを整えるといい感じになりそう 今後の新潟ランチマップWebアプリ 26
27. Amazon Q Developer for CLI (現Kiro CLI) を使って、グルメサイトを構築 PHP Conference 新潟 2025 前夜祭 LTで、新潟の食を掲載するグルメサイトを公開 生成AIでの構築はだいぶ当たり前になってきたので、サクッと作りたいものが作れる時代 作った後のデプロイやデータ生成もある程度できるようになってきている サーバーレスで構成すれば、ランニングコストはほとんどかからない これからは生成AIに仕様書から設計書への落とし込み → タスク分解 → コーディングの流れが良 い感じ 地方でこそ、生成AIとサーバーレスを活用して少ない費用で構築・運用していくべき まとめ 27
28. 告知
29. 昨年のJAWS-UG北陸新幹線#3 in 上越妙高にてリブート 宣言から約1年 日程: 2026年4月11日 (土) 15:00 - 17:00 会場: HIDA Office 2F 北陸新幹線「上越妙高駅」西口から徒歩1分 昨年6月に移転した「クラスメソッド上越オフィス」が 入居しているビルです 詳細・参加申込はconnpassにて https://jawsug- joetsumyoko.connpass.com/event/382075/ JAWS-UG上越妙高 リブート開催決定！ 29
30. 日程: 2026年3月14日 (土) 13:30 - 18:00 会場: NINNO 3 Room A 上越新幹線「新潟駅」南口から徒歩1分 プラーカ3 の地下1F にあります Kiro CLIのハンズオンを開催します 詳細・参加申込はconnpassにて (近日公開) https://jawsug-niigata.connpass.com/event/383382/ JAWS-UG新潟も急遽開催決定！ 30
31. おわり