Hono + Inertia + React 環境構築完全手順

本記事のゴールは、以下を達成した状態です：

- Bun ランタイム上で Hono サーバが動く
- Inertia アダプタ経由で React コンポーネントが描画される
- Vite で TypeScript + React のホットリロードが効く
- ブラウザで初回ページに「Hello, Inertia」が表示される

ここから先（CRUD、認証、デプロイ）は本シリーズの別コラムで扱います。

- Node.js 20+ もしくは Bun 1.0+（本記事は Bun を採用）
- パッケージマネージャ: Bun（bun コマンド）
- エディタ: VS Code + TypeScript / ESLint / Tailwind 拡張を推奨
- 動作確認用のブラウザ

Bun は curl -fsSL https://bun.sh/install | bash で入ります。

シンプルなモノリポ風の構成が扱いやすいです。

my-app/
├─ server/        ← Hono アプリ
│  ├─ index.ts    ← エントリポイント
│  ├─ routes/     ← ルート定義
│  └─ inertia.ts  ← Inertia アダプタ初期化
├─ client/        ← React アプリ
│  ├─ main.tsx    ← createInertiaApp
│  └─ pages/      ← Inertia がページとして解決する React コンポーネント
├─ vite.config.ts
├─ tsconfig.json
└─ package.json

大規模化したら Turborepo / pnpm workspaces で apps/server と apps/web に分けるのが定石です。

ターミナルで：

mkdir my-app && cd my-app
bun init -y
bun add hono @hono/vite-build @hono/vite-dev-server
bun add @inertiajs/react @inertiajs/server
bun add react react-dom
bun add -d typescript @types/react @types/react-dom @vitejs/plugin-react vite

これで Hono / Inertia / React と開発ツール一式が揃います。

vite.config.ts で React プラグインを有効にし、開発時は Hono dev server を使います。詳細な書き方は Hono 公式の Vite 連携ドキュメント と Inertia.js 公式の React アダプタ を参考に、自プロジェクトの構成に合わせて設定してください。Tailwind CSS を併用する場合は @tailwindcss/vite プラグインを足すのが2026年の標準です。

server/index.ts の役割は次の通りです。

1. Hono インスタンスを作る
2. Inertia アダプタをミドルウェアとして登録（共有プロパティ・ルートヘルパーを束ねる）
3. ルート（例: / → ページ Home を Inertia レスポンスとして返す）を定義
4. 起動（Bun なら Bun.serve、Node なら @hono/node-server、Workers なら export default app）

Inertia レスポンスは c.inertia('Home', { title: 'Hello' }) のような形でページ名 + 共有プロパティを返すのがイメージしやすい書き方です。実際の関数名やAPIは利用するアダプタライブラリのバージョンを公式ドキュメントで確認してください。

client/main.tsx で Inertia の createInertiaApp を呼び出します。

- resolve: ページ名を pages/{name}.tsx に解決する関数
- setup: ReactDOM.createRoot でマウントする関数
- progress: ナビゲーション進捗バーの設定

client/pages/Home.tsx には素直な React コンポーネントを置き、usePage() フックで Hono 側から渡された props を受け取ります。最初の1ページでは <h1>{props.title}</h1> を返すだけで充分です。

bun run dev でサーバを起動し、ブラウザで http://localhost:3000 を開きます。

- 初回 GET ではサーバが完全な HTML を返す（Inertia の SSR or CSR 構成による）
- 以降のリンク遷移は XHR + JSON ベースに切り替わり、SPA ライクに動く
- React コンポーネントを編集すると Vite のHMRで即時反映

ここまで動けば、シリーズ第3回以降で扱う CRUD / 認証 / デプロイの土台が整っています。

- pages/ 解決のミスマッチ: resolve の glob と実ファイル配置が一致していないと Page not found になる
- 共有プロパティの過大化: Inertia の共有プロパティは全ページに渡されるため、重いデータを共有 props に積むと初期表示が遅くなる。本当に共有すべきもの（ユーザー情報、フラッシュメッセージ等）に限定する
- CSRF / セッションCookie: Inertia のリクエストにはCSRFトークンを通す必要があるため、ミドルウェアで設定しておく
- TypeScript の型を厳格に: usePage<{ title: string }>() のように page props を型付けしておくと、後の章で詰まらない

次回は フォーム＆CRUD 実装パターン で、Drizzle ORM・Zod バリデーション・Inertia の useForm を組み合わせた実装パターンを扱います。本シリーズの全体像は Part 1: スタック概要 を参照ください。

Q1: Bun ではなく Node を使いたい場合は？
A: @hono/node-server をインストールして起動方法を serve(app) に置き換えるだけです。コード本体は同じです。

Q2: Cloudflare Workers でローカル開発するには？
A: wrangler dev を使います。Hono は Workers ネイティブに動くため特別な設定は不要です。

Q3: Vite を使わない構成はありえますか？
A: 可能ですが、React + TypeScript のHMR体験で Vite を超える選択肢は今のところほぼありません。Vite を使うのが現代的です。

Q4: モノレポ化はいつすべき？
A: サーバ・クライアントで共通の型・バリデーション・ユーティリティが3つ以上出てきたタイミングが目安です。

- Hono 公式（hono.dev）
- Hono と Vite の連携
- Inertia.js 公式
- Inertia.js React アダプタ — クライアントセットアップ
- Vite 公式
- Bun 公式