OSEKKAI × TECHNOLOGY モノレポの型は そのままつながる FE Yatai Talks vol.2 2026.07.24 Fusic Co.,Ltd. 清家 史郎 (@seike460) 

自己紹介 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 ©Fusic Co., Ltd. 

BACKEND BACKEND FRONTEND Zodで形を 定義 AppTypeと してexport 型のもとにな 全ルートの形 そのまま importして 使う バックエンドとフロントエンド、 る形を、ここ を、1つにまと hc それぞれの役割はこうなります。 で書く める ()で、その型 コード生成を経由せず、 型はつながる まず全体の仕組みを見てください。 境界を越えるのは型だけです。 を使う 4 ©Fusic Co., Ltd. 

HonoのRPC機能は、 tRPCに近い体験 tRPCは、TypeScriptでAPIの型を共有する 定番ライブラリです。 Honoにも、同じような機能が 標準で入っています。 5 ©Fusic Co., Ltd. 

型は書くものから、繋がるものにした 手書きinterface のレスポンスに が増えても気づけない GET /tasks newField ズレはレビューまで気づけない 型定義ファイルを開いて 手で書き足す 気づくのはビルドかレビューの時 Hono RPCで直接import AppType newField の型定義から が自動的に見える ズレは、起こりようがない エディタが型エラーとして その場で教えてくれる 気づくのは、コードを書いている瞬間 6 ©Fusic Co., Ltd. 

Zodは、形を書けば 検証も型もついてくる TypeScript向けのスキーマ定義ライブラリです 7 ©Fusic Co., Ltd. 

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 8 ©Fusic Co., Ltd. 

FRONTEND バックエンドの型を、そのままimportする import type { AppType } from '@app/backend/types-public' // type-only import lint import { hc } from 'hono/client' なので、実装値の を で禁止できる export const client = hc(baseUrl) export type TaskListResponse = InferResponseType 9 ©Fusic Co., Ltd. 

ま と め Point.01 フロントとバックエンドが同じリポジトリにあるなら、型は書き写さず繋げられる Point.02 Hono RPCは、そのための小さな仕組みです Point.03 OpenAPIは、人が読むドキュメントとして引き続き活躍します 10 ©Fusic Co., Ltd. 

Thank You ご清聴いただきありがとうございました OSEKKAI × TECHNOLOGY ココロと技術で、ぴったりも、びっくりも。 We are Hiring! カジュアル面接 — Let's Talk! https://fusic.co.jp/recruit/lets_talk/44 ©Fusic Co., Ltd.