Hono + Inertia + React 環境構築完全手順 — Bun / Vite / TypeScript で30分で動かす最小スタートアップ【2026年版】

本記事のゴールは、以下を達成した状態です： - 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 公式