モノレポの型は、そのままつながる 〜Hono RPCで型を素通しする開発体験〜 / Monorepo Types Connect As-Is: Passing Types Through with Hono RPC

FE Yatai Talks vol.2【フロントエンドカンファレンス福岡コラボ！】（2026年7月24日）の公募LTで発表した資料です。Hono RPC を使ってバックエンドの型をフロントエンドまで素通しする開発体験について話しました。

Transcript

1. OSEKKAI × TECHNOLOGY モノレポの型は そのままつながる FE Yatai Talks vol.2 2026.07.24 Fusic Co.,Ltd. 清家 史郎 (@seike460)
2. 自己紹介 OSEKKAI × TECHNOLOG Y 清家 史郎 (@seike460) SHIRO SEIKE 技術コミュニティ室長 / シニアエバンジェリスト ・AWS Community Builder ・AWS Ambassador ・2026 Japan AWS Top Engineer — コミュニティ ・JAWS-UG福岡 / JAWS DAYS 2026 実行委員長 フロントエンドカンファレンス福岡 2026の運営の一番端にいます 2 ©Fusic Co., Ltd.
3. 型が違うだけで、 画面は簡単に壊れる フロントとバックエンドが交わす 「データの形の約束」、それが型です 3 ©Fusic Co., Ltd.
4. BACKEND BACKEND FRONTEND Zodで形を 定義 AppTypeと してexport 型のもとにな 全ルートの形 そのまま importして 使う バックエンドとフロントエンド、 る形を、ここ を、1つにまと hc<AppType> それぞれの役割はこうなります。 で書く める ()で、その型 コード生成を経由せず、 型はつながる まず全体の仕組みを見てください。 境界を越えるのは型だけです。 を使う 4 ©Fusic Co., Ltd.
5. HonoのRPC機能は、 tRPCに近い体験 tRPCは、TypeScriptでAPIの型を共有する 定番ライブラリです。 Honoにも、同じような機能が 標準で入っています。 5 ©Fusic Co., Ltd.
6. 型は書くものから、繋がるものにした 手書きinterface のレスポンスに が増えても気づけない GET /tasks newField ズレはレビューまで気づけない 型定義ファイルを開いて 手で書き足す 気づくのはビルドかレビューの時 Hono RPCで直接import AppType newField の型定義から が自動的に見える ズレは、起こりようがない エディタが型エラーとして その場で教えてくれる 気づくのは、コードを書いている瞬間 6 ©Fusic Co., Ltd.
7. Zodは、形を書けば 検証も型もついてくる TypeScript向けのスキーマ定義ライブラリです 7 ©Fusic Co., Ltd.
8. BACKEND この形が、そのまま型になる import { z } from '@hono/zod-openapi' タスク 件の形 // 1 const TaskSchema = z.object({ id: z.string(), title: z.string(), }) の一覧。同じスキーマが 文書にもなる ルートが増えるほど、 の型検査は重くなる // GET /tasks OpenAPI const TaskListSchema = z.array(TaskSchema) // tsc type TaskList = z.infer<typeof TaskListSchema> 8 ©Fusic Co., Ltd.
9. FRONTEND バックエンドの型を、そのままimportする import type { AppType } from '@app/backend/types-public' // type-only import lint import { hc } from 'hono/client' なので、実装値の を で禁止できる export const client = hc<AppType>(baseUrl) export type TaskListResponse = InferResponseType<typeof client.api.v1.tasks.$get, 200> 9 ©Fusic Co., Ltd.
10. ま と め Point.01 フロントとバックエンドが同じリポジトリにあるなら、型は書き写さず繋げられる Point.02 Hono RPCは、そのための小さな仕組みです Point.03 OpenAPIは、人が読むドキュメントとして引き続き活躍します 10 ©Fusic Co., Ltd.
11. Thank You ご清聴いただきありがとうございました OSEKKAI × TECHNOLOGY ココロと技術で、ぴったりも、びっくりも。 We are Hiring! カジュアル面接 — Let's Talk! https://fusic.co.jp/recruit/lets_talk/44 ©Fusic Co., Ltd.