2026 年 4 月末、Hono 公式から Inertia.js アダプタ がリリースされ、Zenn Trending では「Hono × Inertia × React によるSPA新体験」 の記事が短期間でランクインしました。Inertia.js は「フロントは React/Vue、バックエンドは Rails/Laravel」のような従来構成に対し、REST/GraphQL を書かずに SPA を成立させる仕組みとして Laravel コミュニティで広く使われてきた技術です。
これが Hono に乗ると、エッジ実行可能なサーバー + API レスを実現する Inertia + 型を貫通させる TypeScript という、受託 MVP に最適な薄い構成が一気に揃います。本記事では、Hono × Inertia × React を受託案件で採用するときの判断軸と、立ち上げ手順を整理します。
Hono × Inertia.js が解決する受託 MVP の三大課題
スタートアップの MVP や、社内向け管理画面の受託では、毎回ほぼ同じ三つの課題に当たります。
| 課題 | 従来構成での痛み | Hono × Inertia での解 |
|---|---|---|
| API 設計に時間が溶ける | OpenAPI/GraphQL スキーマ整備で 1〜2 週 | API を書かない。コントローラから Props を直接返す |
| 型がフロント・バック間で割れる | 手動同期 or Codegen で運用負荷 | 同じ TS から型推論が貫通する |
| 認証・ルーティング・SSR の組み合わせがしんどい | Next.js などで個別設定 | Hono のミドルウェア + Inertia の「ページ」概念で薄く |
特に「API 設計に時間が溶ける」は、PoC や PMF 検証の段階で致命的です。ユーザーテストに出すまでに 4 週間しかない案件で、API 設計に 1 週間を取られると残り 3 週間で UI と検証を回す必要があります。Inertia は「ページを返す = Props を返す」という単純なメンタルモデルで、サーバーサイドのコントローラ関数がそのままフロントの Props 型と直結します。
Inertia アダプタの中身 — 何をしてくれて、何を任せるか
Hono の Inertia アダプタが受け持つのは、ざっくり次の 3 つです。
- 初回 HTML レスポンス：Inertia の規約に沿って、ページコンポーネント名・Props・共有データを埋め込んだ HTML を返す
- XHR 検出：
X-Inertiaヘッダがあれば JSON、なければ HTML を返す分岐を自動化 - CSRF・Flash・バリデーションエラーの共有：Hono の Context から Inertia の
shareプロパティに渡す橋渡し
逆に任せられないのはビルドパイプラインで、Vite + React の SSR/CSR 切り替えは個別に組む必要があります。ここは Hono の SSR ヘルパーまたは Vite SSR を併用するのが現実解で、@hono/vite-dev-server を使えば開発体験は損なわれません。
最小構成のサンプル — Hono + Inertia + React + Vite
最小構成のディレクトリは次のようになります。
src/
server/
index.ts // Hono エントリ
routes/
dashboard.ts // Inertia.render('Dashboard', { stats })
client/
pages/
Dashboard.tsx // export default function Dashboard({ stats }: Props)
main.tsx // createInertiaApp
shared/
types.ts // 両側で参照する型サーバー側のコントローラはこれだけです。
// src/server/routes/dashboard.ts
import { Hono } from 'hono';
import { inertia } from '@hono/inertia';
const app = new Hono();
app.get('/dashboard', async (c) => {
const stats = await c.env.DB.prepare(
'SELECT COUNT(*) AS users FROM users'
).first<{ users: number }>();
return inertia(c, 'Dashboard', { stats });
});
export default app;フロント側のページはこれだけ。
// src/client/pages/Dashboard.tsx
type Props = { stats: { users: number } };
export default function Dashboard({ stats }: Props) {
return <p>登録ユーザー: {stats.users.toLocaleString()} 人</p>;
}stats の型がコントローラから画面コンポーネントまで一気通貫で通る点が肝です。OpenAPI スキーマも、tRPC のセットアップも要りません。
受託案件で組むときの判断軸（Next.js / Astro との比較）
受託で使うときに「Next.js じゃダメなのか」と聞かれるので、比較表で整理しておくと提案がスムーズです。
| 観点 | Hono × Inertia × React | Next.js (App Router) | Astro + React 島 |
|---|---|---|---|
| 得意領域 | 管理画面・SaaS の SPA | 大規模 Web アプリ | コンテンツサイト |
| API レイヤ | 不要（コントローラ直結） | Route Handlers / Server Actions | 別途 |
| エッジ実行 | ◎（Cloudflare Workers/Bun） | ◯ | ◎ |
| 学習コスト | 低（規約少なめ） | 中〜高 | 低 |
| MVP 立ち上げ速度 | ◎ | ◯ | △（SPA 用途には冗長） |
| 大規模開発の伸び | ◯ | ◎ | △ |
Hono × Inertia の射程は 「2〜10 画面の SPA」「PoC〜PMF 段階」「エンジニア 1〜3 人」。これを超える規模では、ルーティングや状態管理が独自実装になりやすいので Next.js への移行を視野に入れる方が安全です。
エッジ実行を活かすときは Hono × Cloudflare Workers の Edge API ガイド で書いた構成を下敷きにし、DB は D1 / Hyperdrive / 外部 PostgreSQL のいずれかを選びます。コーポレートサイトなど SPA でなく SSG が向く案件には TanStack Start RSC でのコーポレートサイト刷新 のほうが適切なケースもあるので、要件で切り分けます。
認証・権限・バリデーションの組み込み手順
受託で MVP を組むなら、最低限ここまでは初週で揃えます。
- 認証：Hono の
bearerAuthまたは Lucia ベースのセッション。Inertia のshareでauth.userを全ページに供給 - 権限：ミドルウェアで
c.set('user', user)した後、コントローラで権限チェック → 不可なら403と Inertia error ページ - バリデーション：Zod で入力検証 → 失敗時に
errorsオブジェクトを Inertia に渡す - CSRF：
@hono/csrfを Inertia 規約と組み合わせる
バリデーションエラーは Inertia 規約上「リダイレクト + flash で errors を共有」が標準で、フロント側は usePage().props.errors で受け取って表示します。フォーム周りのコードは半分以下になります。
受託案件としての価格レンジと納品物
実際に弊社で組むとすると、次のレンジ感です。
| パッケージ | 期間 | 価格レンジ | 含むもの |
|---|---|---|---|
| プロト：3 画面の MVP | 2〜3 週 | 60〜120 万円 | 認証・1 ロール・主要画面 3〜5 |
| プロト+：PoC 用 SPA | 3〜5 週 | 120〜250 万円 | 認証・複数ロール・CRUD・基本ダッシュボード |
| 受託本開発 | 8〜16 週 | 400〜900 万円 | テスト・CI/CD・運用ドキュメント・ハンドオフ |
「API 設計が要らない」分の工数を、ユーザーテストの追加サイクルや デザイン磨き込みに回せるのが、Hono × Inertia 採用の経営的なメリットです。受託発注側にとっても「PoC で本番系に流用できる土台が手に入る」点が刺さりやすく、提案書では設計時間の節約 → 検証回数の増加として価値を訳して伝えます。
まとめ ─ 「型を貫通させる」を MVP 段階から享受する
Hono × Inertia × React は、API レスで SPA を組める × エッジで動く × 型が貫通する という、受託 MVP のための歯切れのよい組み合わせです。Next.js が “万能” であるがゆえに重く感じる場面で、薄く速く立ち上げる選択肢として 2026 年は採用機会が増えそうです。
弊社では、スタートアップ向けプロトタイプ制作・受託 MVP 開発で、Hono / Astro / Next.js / TanStack Start を要件に応じて使い分けています。「4 週間で投資家向けデモを作りたい」「PoC を本番に伸ばせる土台で組みたい」というご相談は、お問い合わせフォーム からお気軽にどうぞ。MCP を活用した プライベート MCP サーバー実装 と組み合わせた AI エージェント受託も対応しています。
