nagana39 https://blog.hatena.ne.jp/nagana39/ いぬになりたい https://nagana.hatenadiary.jp/ 技術 はじめに 今回はHonoのRPCを利用する際に、フロント・バックエンドで厳密に型を共有する方法を紹介します。 SuperJSONで型情報をjsonに追加した上で、zod.parse()を利用して値を検証して型を付与します。 利用技術 Hono v4.7.11: Webフレームワーク SuperJSON v2.2.2: jsonに型情報を付与する Zod v3.25.56: バリデーション TypeScript 背景 HonoのRPC機能では、フロントエンドから下記のようにAPIを呼び出すことができます。 // バックエンド側のレスポンス作成部分 export const getSampleHa… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fnagana.hatenadiary.jp%2Fentry%2F2025%2F06%2F20%2F120000" title="Hono RPC + Superjson で厳密に型を共有する - いぬになりたい" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/n/nagana39/20250620/20250620092440.png Hatena Blog https://hatena.blog 2025-06-20 12:00:00 rich https://nagana.hatenadiary.jp/entry/2025/06/20/120000 1.0 100%