AI Builders Day 懇親会LT

Transcript

1. Next.js × Hono × Bedrock で実現する 型安全なAIチャット実装テクニック KDDIアジャイル開発センター 　山口 歩夢 1 2025.12.20 AI Builders Day
2. KDDIに新卒入社し、自社クラウドの基盤開発 自己紹介 2 山口 歩夢 ソフトウェアエンジニア、スクラムマスター 󰝊 ⚔ KDDIアジャイル開発センター（ KAG） AWS-CB Serverless(‘24,’25) 🦈 現在は KAG × ベンチャーで Webサービスの開発 💻
3. 3 システム構成 Next.js Hono Bedrock Claude Sonnet 4.5 RAG Aurora S3 フロントエンド バックエンド ブラウザ ・アプリケーションは、 Next.js × Hono × Bedrock で構築 ・APIの実行など、バックエンドは Hono ユーザー アプリ Bedrockエージェント Neon Postgres
4. 4 LLMをプロダクトに組み込む上で大事にしたいこと プロダクトの質を保つために 責務を明確にして、型と入出力を保証する！ 本番プロダクトとして機能するものを作る！
5. 5 本発表で伝えたいこと ・Honoは、軽量 / 高速なTypeScriptファーストの 　Webフレームワーク ・Honoは、フロントとバックエンドで型を 　自動共有できるのでモノレポや AI駆動開発で効果大きい ・Honoは、Bedrock等を使った LLMからの 　ストリームレスポンスを簡単に扱える
6. 6 Bedrockとは？ API呼び出しで様々な基盤モデル (LLM)を 使用できるサービス Amazon Bedrock
7. 7 Honoとは？ ・軽量/高速な TypeScriptファーストの 　Webフレームワーク ・API開発に最適化されたシンプルな 　ルーティングとミドルウェア Hono
8. 8 Hono × Bedrock ×
9. Honoを使うメリット！ 9 １：zod + 型推論 ２：ストリームレスポンスが書きやすい ３：フロントとバックエンドで 型共有が簡単
10. １：zod + 型推論 10 ルール(型定義とバリデーション )を一緒に書く ↓ 型推論(型を自動追従させる ) ↓ 不正リクエストを防ぐ ↓ zodでスキーマを 1回書くだけで、バリデーションと型定義ができる！ → 別々に書くと、更新漏れでバグる。一箇所で管理すればズレない
11. ２：ストリームレスポンスが書きやすい 11 ・streamSSEを使って、 LLMからの返り値を 1チャンクずつ受け取る ・チャンクを受け取り次第、即座にフロントに返却する
12. ３：フロントとバックエンドで 型共有が簡単 12 フロントとバックの 型が自動同期される フロント呼び出しの 型を決定できるから 変更に追従できる サーバー側 クライアント側 ← 型を丸ごとエクスポート フロントで ← 型だけインポート ← 型情報を持った APIクライアントを作成
13. 13 チャットアプリのシステム構成（再掲） Next.js Hono Bedrock Claude Sonnet 4.5 RAG Aurora S3 フロントエンド バックエンド ブラウザ ・アプリケーションは、 Next.js × Hono × Bedrock で構築 ・APIの実行など、バックエンドは Hono ユーザー チャットアプリ Bedrockエージェント Neon Postgres APIまわりは 全部Honoに寄せれる！ （メリットたくさん！）
14. まとめ Hono×Bedrockで AIアプリを構築しよう！ 14