Hono + Inertia + React で LP を構築した話

Jujutsu 実践ガイド本『じゅじゅちゅ！』の LP を、Hono + Inertia + React という技術スタックで構築しました。

Transcript

1. Hono + Inertia + React で LP を構築した話 大岡 由佳（くるみ割り書房）
2. こんなランディングページを作りました 【主要技術スタック】 •Hono •@hono/inertia •@inertiajs/react •React / / https: juju-chu.com/ja
3. Hono とは？ Node.js や Deno、Bun はもちろん Cloud are Workers を始めと するエッジ環境のランタイムでも動作する、サーバサイドの Web フレームワーク。 一言でいうなら「Express を Web 標準・TypeScript・マルチラン タイム時代に合わせて、軽量に作り直したようなフレームワーク」 fl 作者は日本の和田祐介さん（@yusukebe）
4. Inertia とは？ サーバーサイドの Webフレームワークの View を React / Vue.js / Svelte のコンポーネントとして作るためのライブラリ。 たとえば Laravel は通常は View を Blade というテンプレート 言語で記述するが、Inertia はこれを完全な React コンポーネン トに置き換えることができる。 Laravel コミュニティで生まれたが、現在では Ruby on Rails や Django、ASP.NET 用など広くアダプターが開発されている。
5. @hono/inertia とは？ Hono で Inertia を使えるようにするためのアダプターミドル ウェア。 2026年4月に公式に出たばかりで、8月現在のバージョンは 0.7.0。 他のフレームワーク用のアダプターと異なり、サーバとクライ アントを一貫して TypeScript で記述でき、サーバからコンポ ーネントに渡される props の型も自動生成されて安全。
6. 何の LP を作ったの？ Git 互換の次世代バージョン管理 システム Jujutsu の本を 4月の技 術書典20 に出しました。 そして先日、英語版も出したので すが、無名の作者ゆえか売れ行き が芳しくないため、ランディング ページを作ろうと思い立った次第 です。
7. 機能要件 • サンプルプレビュー機能（PDF と EPUB の両方に対応） • i18n 対応（英語と日本語、今後スペイン語とポルトガル語を予定） • ロケールヒントのバルーン表示（日本語ブラウザで英語ページにアク セスすると、日本語版をサジェストする） • Amazon リンクの出し分け（ユーザー居住国の Amazon の商品ペ ージに振り分ける） • スクロールフォーカス（各章サマリでビューポイントにないものをホ ワイトアウト）
8. 他に検討した技術スタック • Astro • コンテンツ主導型サイトの構築では無敵で、あらかた必要になるものが最初 から用意されている • デフォルトでは JS を出力しないが、動的な UI が必要な部分は Island Component にして React など好きなフレームワークが利用できる • TanStack Start • React のメタフレームワークで人気急上昇中の新顔 • クエリパラメータにまで型安全が徹底されている • シンプルな SPA + SSR 型のアプリケーションが作りやすい
9. Hono + Inertia にした意味あった？ • しくみが古典的なので、動きが追いやすい • サーバとクライアントの境界が明確で、コードが混ざりようがない • バンドルサイズ（サーバの）が軽い • worker に乗る圧縮後のサイズが 407KB。無料枠の 3MB に余裕 で収まる。（Fable 曰く TanStack Start ならこの1.5〜2倍） • サンプルビューアが高機能なので、Astro だと Astro と React のコ ードが入り組んで複雑になっていたかも
10. 苦労した点は？ • i18n や Markdown、Content Collections といった Astro なら 最初からある機能が用意されてないので、すべて自前で実装した • サーバのバンドルから pdf.js や Readium Web などサンプルビュ ーア用の重いライブラリを排除したかったが、そのしくみもないの で泥臭く書くことになった • X-Inertia ヘッダの有無で HTML を返すか JSON を返すかを判断 しているのを知らず、ヘッダを上書きして不具合が出た
11. パフォーマンス計測結果
12. 再掲：よかったらアクセスしてみてください juju-chu.com