Hono x Inertia.js x Cloudflare_Workers

2026-07-08 Cloudflare Workers Tech Talks in Kyoto #2
https://workers-tech.connpass.com/event/397441/

Transcript

1. Hono x Inertia.js x Cloudflare Workers id:onk 2026-07-08 Cloudflare Workers Tech Talks in Kyoto #2 1
2. 自己紹介 • 大仲 能史 a.k.a. id:onk • 株式会社はてな • 芸歴21年 • サーバサイドが主戦場 ◦ 2006年からRailsを使っています 2
3. 緊急アンケート 3
4. あなたの自認は？ • バックエンド？ • フロントエンド？ • フルスタック？ 4
5. 今日の話 5
6. Hono x Inertia.js x Cloudflare Workers 6
7. Hono x Inertia.js 7
8. @hono/inertia 8
12. Inertia.js 12
14. Inertia.js • Build frontend experiences with the backend you love ◦ 自認バックエンドのためのフロントエンド環境 • Elevate your application with the modern monolith ◦ 「the modern monolith」 14
15. まるでバックエンドを 書いているかのように フロントエンドを書ける 15
16. 自認フロントエンドには 面白くないフレームワー ク 16
17. 書くのはこれだけ // src/index.tsx import { Hono } from 'hono' import { inertia } from '@hono/inertia' import { rootView } from './root-view' const app = new Hono() app.use(inertia({ rootView })) const routes = app.get('/', (c) => c.render('Home', { message: 'Hello from Hono!' }) ) export type AppType = typeof routes export default routes 17
18. 書くのはこれだけ // src/pages/Home.tsx import { type PageProps } from '@hono/inertia' export default function Home({ message }: PageProps<'Home'>) { return ( <main> <h1>{message}</h1> </main> ) } 18
19. これがこうなる // src/root-view.tsx <body> <div id="app"></div> <script type="application/json" data-page="app"> { "component":"Home", "props":{"message":"Hello from Hono!"}, ... } </script> <script type="module" src="/src/client.tsx"></script> </body> 19
20. Inertia.js • サーバでrenderするとこれがフロントに渡る ◦ renderするcomponentは何か ◦ propsは何か • フロントエンドはView ◦ いきなり型が効いたpropsを受け取れる 20
21. 単にprops渡す君ではな い 21
22. Inertia.js • サーバでrenderするとこれがフロントに渡る ◦ renderするcomponentは何か ◦ propsは何か • フロントエンドはView ◦ いきなり型が効いたpropsを受け取れる 22
23. renderToStringで SSRできる 23
24. まだまだあるぞ 24
25. 単にprops渡して SSRする君ではない 25
26. ページ間遷移はSPA // src/pages/About.tsx import { Link } from '@inertiajs/react' export default function About() { return ( <main> <h1>About</h1> <Link href="/">← Home</Link> </main> ) } 26
27. ページ間遷移はSPA • Linkをクリックすると ◦ fetchリクエストを飛ばしてJSONが返ってくる ◦ 返ってくるのはさっきのcomponentとprops • クライアントでrenderする 27
29. UserのCRUD // src/index.tsx app .get('/users', (c) => c.render('Users/Index', { users })) .get('/users/new', (c) => c.render('Users/New', {})) .post('/users', async (c) => { const { name } = await c.req.json<{ name: string }>() users.push({ id: nextId++, name }) return c.redirect('/users', 303) }) 29
30. UserのCRUD // src/pages/Users/New.tsx import { router, useForm } from '@inertiajs/react' export default function New() { const { data, setData } = useForm({ name: '' }) function handleSubmit(e: React.FormEvent<HTMLFormElement>) { e.preventDefault() router.post('/users', data) } 30
31. UserのCRUD // src/pages/Users/New.tsx ... return ( <form onSubmit={handleSubmit}> <input value={data.name} onChange={(e) => setData('name', e.target.value)} /> <button type="submit">Create</button> </form> ) } 31
32. ユーザのCRUD • サーバは普通に書く ◦ req.jsonを受け取ってredirectなりrenderなり • フロントは普通にフロントを書いて router.post('/users', data) する 32
33. ユーザのCRUD • ここまでサーバ (index.tsx) とView (pages/Users/New.tsx) しか触ってない • APIを書かない開発風景が戻ってきた • 「the modern monolith」 33
34. UserのCRUD (validation) // src/index.tsx import * as v from 'valibot' function userSchema(exclude?: number) { return v.object({ name: v.pipe( v.string(), v.trim(), v.minLength(1, 'Name is required'), ), }) } 34
35. UserのCRUD (validation) // src/index.tsx import { vValidator } from '@hono/valibot-validator' ... .post('/users', vValidator('json', userSchema(), (result, c) => { if (!result.success) { c.status(422) return c.render('Users/New', { errors: parseErrors(result.issues) }) } }), ... 35
36. UserのCRUD (validation) // src/pages/Users/New.tsx return ( <form onSubmit={handleSubmit}> <input value={data.name} onChange={(e) => setData('name', e.target.value)} /> {errors.name && <p>{errors.name}</p>} <button type="submit">Create</button> </form> ) 36
37. このときのresponse { "component": "Users/New", "props": { "errors": { "name": "Name is required" } }, ... } 37
38. ユーザのCRUD (validation) • サーバでvalidationを書く ◦ errors propsに詰めて 422 で返す • propsでerrorsを受け取る ◦ Formのstateはそこにあり、マージされる ◦ errorsを追加でrenderする 38
39. ユーザのCRUD (validation) • やっぱりサーバ (index.tsx) とView (pages/Users/New.tsx) しか触ってない 39
40. Inertia.jsの強み 40
41. Inertia.jsの強み • サーバー主体であること ◦ honoで使える認証ミドルウェアがそのまま使える ◦ validation errorもいつもの感じで書ける ◦ 「redirectしてこのページを表示」もサーバの指示 41
42. Inertia.jsの強み • 色々無くなる ◦ データのfetch。useEffect loading fetch useState を使う場面はかなり減る ▪ クライアントサイドで「API」を意識することはない ◦ stateを意識することも減る ▪ サーバ (session) が正。紙芝居的な考え方になる ◦ クライアントサイドのRouting。サーバに飛ばす 42
43. Inertia.jsの強み • 手慣れたエコシステム ◦ サーバサイドはだいたいもうある ◦ 入れたその瞬間からHMR、SSR • ドキュメント ◦ https://inertiajs.com/docs/llms.txt ◦ https://skills.laravel.cloud/?search=inertia 43
44. Inertia.jsの弱み 44
45. サーバーサイド主体すぎ る 45
46. Inertia.jsの弱み • フロントエンドの面白いところが皆無 ◦ 1画面の中のViewという立て付け ◦ skillの最初に「Never useEffect+fetch for page data」 ◦ SSRもrenderToString止まり 46
47. Inertia.jsの弱み • Next.jsやTanStack Startとちょうど逆だ なぁと思う ◦ Co-locationで書いていて気持ちいい、というのも特 に無いしなー ◦ ページ単位なのでPage Propsをコンポーネントまで バケツリレーするのがベースになる 47
48. Hono x Inertia.js x Cloudflare Workers 48
49. Cloudflare Workers • Honoの良さを十全に活かせる ◦ Honoはランタイムに縛られていないのが最大の特徴 • 開発者体験が最高 ◦ デプロイが異常に軽い • SSRまで含めて何も手が掛からない！ 49
50. （デモ） 50
51. まとめ 51
52. Hono x Inertia.js x Cloudflare Workers 52
53. Hono x Inertia.js x Cloudflare Workers 53
54. Hono x Inertia.js x Cloudflare Workers • こういうのでいいんだよ • サーバ脳のまま、モダンなフロントエンド体 験を提供できる ◦ the modern monolith ◦ 認証、ルーティング、SSR、全部いつものやつ。 「ページ」という概念で整理できる 54
55. Hono x Inertia.js x Cloudflare Workers • propsに渡すだけで型が貫通する ◦ OpenAPI Specなんて書かなくても良かったんや ◦ さすがにDBのレコードをそのまま見せるわけにはい かないので、valibotは通す • inertia-hono-jsxでさらに軽量に ◦ バイナリサイズへの影響が減り、Workersで複雑なこ とをやりやすくなる 55
56. Hono x Inertia.js x Cloudflare Workers • Inertia.jsは自認バックエンドエンジニアにと てもオススメな選択肢 ◦ フロントエンドはViewであると割り切れるチームに ちょうどいい • 管理画面辺りで使ってみてはどうですか ◦ データ絡むところはだいたいバックエンドエンジニア が作るが、管理画面こそモダンフロントエンドが必要 56