Honoとフロントエンドの 型安全性について

Transcript

1. Honoとフロントエンドの 型安全性について Findy LunchLT Hono活用を徹底解説 先達に学ぶベストプラクティス 2025-02-18 yodaka
2. 自己紹介 よだか - フリーランス、WebDeveloper - Next.js / Hono / Laravel / Vue.js / TypeScript - 最近Flutterも - TSKaigiスタッフ - 開催:2025年5月23日-24日 2Days - 会場:ベルサール神田 - 趣味で音楽を作ってます - 映画や小説が好き
3. この発表のテーマ（持ち帰って欲しいもの） Honoを使用して、どのようにマルチクライアント（ WEB/アプリ）の型 安全な開発を実現しているか、その魅力
4. アジェンダ 1. What’s Hono? 2. Hono採用の経緯 3. どうやって型安全な開発をしているか 4. Next.jsとHonoのRPCによる連携 5. FlutterとHonoのOpenAPIによる連携 6. インフラ・改善点など小噺 7. まとめ
5. What’s Hono？ - 割愛！
6. What’s Hono？（ちょっとだけ） - ランタイム差異を吸収するポータビリティ - > Cloudflare Workers, Fastly Compute, Deno, Bun, AWS Lambda,... - Web標準 - https://wintercg.org/(WinterTC) - 軽量・高速 - > Hono x 402,820 ops/sec ±4.78% (80 runs sampled) - > The hono/tiny preset is under 14kB. Hono has zero dependencies and uses only the Web Standards. - 豊富なミドルウェア、カスタマイズ性 - CORS、CSRF、JWT、Logger… - RPCやミドルウェアを使った、フロントエンドとの型共有
7. What’s Hono？（ちょっとだけ） - ランタイム差異を吸収するポータビリティ - > Cloudflare Workers, Fastly Compute, Deno, Bun, AWS Lambda,... - Web標準 - https://wintercg.org/(WinterTC) - 軽量・高速 - > Hono x 402,820 ops/sec ±4.78% (80 runs sampled) - > The hono/tiny preset is under 14kB. Hono has zero dependencies and uses only the Web Standards. - 豊富なミドルウェア、カスタマイズ性 - CORS、CSRF、JWT、Logger… - RPCやミドルウェアを使った、フロントエンドとの型共有　 ←ココ
8. アジェンダ 1. What’s Hono? 2. Hono採用の経緯 3. どうやって型安全な開発をしているか 4. Next.jsとHonoのRPCによる連携 5. FlutterとHonoのOpenAPIによる連携 6. インフラ・改善点など小噺 7. まとめ
9. Hono採用の経緯 ・こんな別プロジェクトがあった ・Go->OpenAPI->SWR
10. Hono採用の経緯 ・GoからOpenAPIを吐き出すのも、OpenAPIからSWRのクライアントを吐き出すのも癖 があって結構つらい ・Goは色々肌に合わなかった
11. Hono採用の経緯 そもそも ・バックもフロントも自分で書けるのに、型欲しさにOpenAPIを生成しているのは遠回り している ・GraphQLなどの選択肢もあったのか？とは思うが、そのプロジェクトはマルチクライア ントでもないし、あまり詳しくなかった
12. Hono採用の経緯 ・HonoのRPCモードが出たタイミングで、新規プロジェクト（この後説明で使う予約シス テム）でHonoを推してみたらあっさり採用された🔥🔥🔥 ・Honoに変えることで型安全かつ、非常に高速な開発が可能になった ・アプリ用のサーバーにもHonoのOpenAPI用のミドルウェアで対応できた （ZodOpenAPIHonoのおかげで実装と型が食い違いにくくなった）
13. アジェンダ 1. What’s Hono? 2. Hono採用の経緯 3. どうやって型安全な開発をしているか 4. Next.jsとHonoのRPCによる連携 5. FlutterとHonoのOpenAPIによる連携 6. インフラ・改善点など小噺 7. まとめ
14. 今回の発表に使用するプロジェクトの説明 ・アプリ（Flutter）、WEB（Next.js）、管理画面（Next.js）の３つフロントがある ・飲食店の方とそのお客さんが使う予約システムみたいな感じ ・これをHonoのサーバー一つで捌く ・WEB、管理画面、バックエンドはpnpmでモノレポ構成にしてある
15. 予約アプリの構成概要 アプリ（Flutter）、WEB（Next.js）、管理画面（Next.js）の３つフロントがある
16. どうやって型安全な開発をしているか -> Next.jsには型をRPCで渡し、アプリには OpenAPIで型を渡す これのやり方について今日は話していきます
17. ちなみにどういう設計・構成にしているか？ - こちらの記事を参照 Honoマイベストプラクティスhttps://zenn.dev/yodaka/articles/ad49f29a54ceba
18. アジェンダ 1. What’s Hono? 2. Hono採用の経緯 3. どうやって型安全な開発をしているか 4. Next.jsとHonoのRPCによる連携 5. FlutterとHonoのOpenAPIによる連携 6. インフラ・改善点など小噺 7. まとめ
19. Next.jsとHonoのRPCによる連携
20. 予約アプリの構成概要
21. HonoのAPI定義 const adminRouter = new Hono().post( '/posts', zValidator( 'json', z.object({ title: z.string(), body: z.string(), }) ), (c) => { // 型がついている const { title, body } = c.req.valid(‘json’) } ) type Form = { title: string body: string }
22. Honoからエクスポートした型をNext.jsに渡す（Hono側） const app = new Hono() .route('/sp', spRouter) .route('/web', webRouter) .route('/admin', adminRouter) export type AdminAppType = typeof adminRouter export type webRouter = typeof webRouter
23. Honoからエクスポートした型をNext.jsに渡す（Next.js 側） import { hc } from 'hono/client' import { AdminAppType } from 'backend/src' // typesafeなAPIClientとして使える。 const client = hc<AdminAppType>(baseUrl, { headers, })
24. Honoからエクスポートした型をNext.jsに渡す // クライアント import { hc } from 'hono/client' import { AdminAppType } from 'backend/src' // typesafeなAPIClientとして使える。 const client = hc<AdminAppType>(baseUrl, { headers, }) // サーバー const app = new Hono() .route('/sp', spRouter) .route('/web', webRouter) .route('/admin', adminRouter) export type AdminAppType = typeof adminRouter export type webRouter = typeof webRouter
25. Next.js側 APIクライアント使用例 // パスも型がついている const res = await client.posts.$post({ json: { // request bodyも型がついてる title: 'Hello', body: 'Hono is a cool project', }, }) type Form = { title: string body: string }
26. SWRから利用する こちらを参照 https://github.com/yodakaEngineer/hono-swr-example/tree/main
27. SWRから利用する ・こんな感じでhcに型定義 渡す
28. SWRから利用する ・InferRequestTypeなどが あるので、基本的にバック エンドから渡すのはHono のRouterの型だけで済む ・Zodの定義もバリデーショ ンをバックとフロントで共有 したい場合はexportする
29. tRPCでもいいんじゃないの？ ・tRPCはRPCを実現したい、HonoはAPIを実装するだけでクライアントに型を提供した いといった具合に、そもそも目指しているものが違う ・Honoはあくまでルーター、サーバーであるが故の強みがある ・tRPCはRPCである強みがある ・今回のアプリのクライアントはFlutterなのでtRPCできない
30. tRPCでもいいんじゃないの？
31. アジェンダ 1. What’s Hono? 2. Hono採用の経緯 3. どうやって型安全な開発をしているか 4. Next.jsとHonoのRPCによる連携 5. FlutterとHonoのOpenAPIによる連携 6. インフラ・改善点など小噺 7. まとめ
32. FlutterとHonoのOpenAPIによる連携
33. 予約アプリの構成概要
34. Zod OpenAPI HonoでOpenAPIを生成する ・router(実際の処理)とは別でroute（OpenAPIのス キーマ）を定義する ・パスパラメータやリクエストの Body、レスポンスの BodyなどをZodを使って定義できる。
35. Zod OpenAPI HonoでOpenAPIを生成する ・zodを拡張したものでリクエスト、レスポンス、パス パラメータ、クエリパラメータなどのスキーマを定義 する ・OpenAPIに表示したいexampleなどがこれで定義 可能
36. Zod OpenAPI HonoでOpenAPIを生成する ・OpenAPIHonoインスタンスのopenapiメソッドの 第一引数に先ほどの routeを渡す ・第二引数のコールバックの戻り値（ return c.json の部分）の型がrouteと違うとエラーを出してくれ る。 ・c.req.validの戻り値もrouteに定義したスキーマ が 推論される ・つまり、 OpenAPIと実装が異なるということが防 げる！
37. Zod OpenAPI HonoでOpenAPIを生成する ・もちろん、HonoでOpenAPIをホスティングできま す！ ・これはJSONが返ってくるが、別で SwaggerUIのミ ドルウェアもあり、それを使うと webサイトとして公 開できる ・これをFlutterのリポジトリから叩くことで、 OpenAPIのスキーマを取得し、 APIクライアントを生 成する
38. OpenAPIからFlutter用のAPIクライアントを生成する ・先ほどのOpenAPIのJSONが返ってくるAPIにリクエストし、ymlファイルに変換するス クリプトを組んである ・そのymlからOpenAPI GeneratorでAPIクライアントを生成する https://github.com/OpenAPITools/openapi-generator
39. これによって型安全なクライアント開発が可能に！
40. GraphQLでも良かったんじゃないの？ ・それはそう ・技術検証ができてないので、今度小さく使ってみる予定
41. アジェンダ 1. What’s Hono? 2. Hono採用の経緯 3. どうやって型安全な開発をしているか 4. Next.jsとHonoのRPCによる連携 5. FlutterとHonoのOpenAPIによる連携 6. インフラ・改善点など小噺 7. まとめ
42. せっかくだしちょっとインフラの話 - HonoをECSコンテナ上のNode.jsで動かしている - Cloudflare Workerで動かしたいが、WorkerからアクセスするにはAWSのVPC内 のRDSをパブリックにしないといけないor踏み台を立てないといけない？ - 詳しい人、情報求む
43. 改善点 ・RPCはメソッドチェインさせた戻り値の型をフロントに渡しているが、Zod OpenAPIは OpenAPIHonoクラスがHonoインスタンスを拡張した別ものなので、チェインできなくて 困ることがある（.use()などの戻り値がオリジナルのHonoインスタンスになってしまう） -> これは普通にRPCとOpenAPIHonoを一緒に使わないことで回避可能。
44. 改善点 - ミドルウェアの型周りのベストプラクティスがまだあまりわかっていない - 特定のmiddlewareを通ったあとにだけcontextに型を入れるみたいなことをうまくやりたい - 最近徐々にサポートが厚くなってきている印象（ createRouteのmiddlewareも型がつくようになっ たり） - アプリがReact NativeだったらアプリもRPC出来て…？？ - より幸せになれる
45. まとめ - Honoを使うことで型安全な開発が余計なことを意識せずに できる。 - 実装と型定義の乖離や、フロントに渡すためだけの型を頑張って書くなどしなくて良い - 開発生産性がとても上がった。 - 型はもらえるし、フロント、バックのコンテキストスイッチコストもない（ FullStackTSの話）
46. Honoを使って最高の開発体験を！
47. 引用・参考文献 - Hono 公式ドキュメント - https://hono.dev/ - TRPC 公式ドキュメント - https://trpc.io/ - SWRのサンプル - https://github.com/yodakaEngineer/hono-swr-example - 構成参考記事 - https://zenn.dev/yodaka/articles/ad49f29a54ceba
48. Thank you!