Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AI Builders Day 懇親会LT
Search
ayumun
December 29, 2025
0
43
AI Builders Day 懇親会LT
ayumun
December 29, 2025
Tweet
Share
More Decks by ayumun
See All by ayumun
Claude Codeを使ったAI駆動開発の実践的プラクティス
ayumu11
0
3
jaws-ug 東京 ランチタイムLT会 20240416
ayumu11
0
370
Notionでの快適メモ術
ayumu11
0
1.3k
20230630_QiitaEnginnerFesta登壇資料
ayumu11
0
140
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
The SEO Collaboration Effect
kristinabergwall1
0
310
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
190
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Automating Front-end Workflow
addyosmani
1371
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Producing Creativity
orderedlist
PRO
348
40k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
92
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Transcript
Next.js × Hono × Bedrock で実現する 型安全なAIチャット実装テクニック KDDIアジャイル開発センター 山口 歩夢
1 2025.12.20 AI Builders Day
KDDIに新卒入社し、自社クラウドの基盤開発 自己紹介 2 山口 歩夢 ソフトウェアエンジニア、スクラムマスター ⚔ KDDIアジャイル開発センター( KAG)
AWS-CB Serverless(‘24,’25) 🦈 現在は KAG × ベンチャーで Webサービスの開発 💻
3 システム構成 Next.js Hono Bedrock Claude Sonnet 4.5 RAG Aurora
S3 フロントエンド バックエンド ブラウザ ・アプリケーションは、 Next.js × Hono × Bedrock で構築 ・APIの実行など、バックエンドは Hono ユーザー アプリ Bedrockエージェント Neon Postgres
4 LLMをプロダクトに組み込む上で大事にしたいこと プロダクトの質を保つために 責務を明確にして、型と入出力を保証する! 本番プロダクトとして機能するものを作る!
5 本発表で伝えたいこと ・Honoは、軽量 / 高速なTypeScriptファーストの Webフレームワーク ・Honoは、フロントとバックエンドで型を 自動共有できるのでモノレポや AI駆動開発で効果大きい ・Honoは、Bedrock等を使った
LLMからの ストリームレスポンスを簡単に扱える
6 Bedrockとは? API呼び出しで様々な基盤モデル (LLM)を 使用できるサービス Amazon Bedrock
7 Honoとは? ・軽量/高速な TypeScriptファーストの Webフレームワーク ・API開発に最適化されたシンプルな ルーティングとミドルウェア Hono
8 Hono × Bedrock ×
Honoを使うメリット! 9 1:zod + 型推論 2:ストリームレスポンスが書きやすい 3:フロントとバックエンドで 型共有が簡単
1:zod + 型推論 10 ルール(型定義とバリデーション )を一緒に書く ↓ 型推論(型を自動追従させる ) ↓
不正リクエストを防ぐ ↓ zodでスキーマを 1回書くだけで、バリデーションと型定義ができる! → 別々に書くと、更新漏れでバグる。一箇所で管理すればズレない
2:ストリームレスポンスが書きやすい 11 ・streamSSEを使って、 LLMからの返り値を 1チャンクずつ受け取る ・チャンクを受け取り次第、即座にフロントに返却する
3:フロントとバックエンドで 型共有が簡単 12 フロントとバックの 型が自動同期される フロント呼び出しの 型を決定できるから 変更に追従できる サーバー側 クライアント側
← 型を丸ごとエクスポート フロントで ← 型だけインポート ← 型情報を持った APIクライアントを作成
13 チャットアプリのシステム構成(再掲) Next.js Hono Bedrock Claude Sonnet 4.5 RAG Aurora
S3 フロントエンド バックエンド ブラウザ ・アプリケーションは、 Next.js × Hono × Bedrock で構築 ・APIの実行など、バックエンドは Hono ユーザー チャットアプリ Bedrockエージェント Neon Postgres APIまわりは 全部Honoに寄せれる! (メリットたくさん!)
まとめ Hono×Bedrockで AIアプリを構築しよう! 14