Hono

HonoとSPA

Cloudflareを使って個人開発をしようとしたところ、honoが相性がいいというものを聞き、環境構築の仕方を調べるといろいろあってめちゃくちゃ詰まってました。

個人的にはPWAをやってみたい、初回はかかってもいいから初回以降を高速にしたい、SEOは別に不要であるので、SPAでいきたかったのですが、結局まとめきれなかったので、一旦個人的に見つけたものをまとめていきます

SPA, SSR参考: https://qiita.com/manabito76/items/fe91eefe11a74dcf5126

Hono (SSR)

1. cloudflareでアカウントを作る
2. pnpm create hono@latest my-app --template cloudflare-workers+vite
3. npx wrangler login
4. wrangler d1 create <データベース名>

vite-ssr-componentsという依存関係が自動でついてくる

monorepoにすると管理が大変そうだったので、一緒にできるならとやってみたが別に必要ないものがついてき大変だった

しかも下手に消すとエラー地獄になってしまうので、SSRにするならNext.jsにした方が楽だと思う

参考: Hono + Vite + Cloudflare Workers プロジェクト作成

Hono (SPA, Vite)

1. pnpm create vite@latest my-app
2. pnpm add hono
3. functions/[[route]].ts

my-app/
├── functions/
│   └── [[route]].ts        # Cloudflare Pages Functions（Honoのエントリ）
├── src/
│   ├── main.tsx            # Viteのエントリ（React SPA）
│   ├── App.tsx
│   └── ...
├── public/
├── vite.config.ts
├── wrangler.toml           # Cloudflare設定
└── package.json

Geminiに作らせた。Vite用のサーバーとHono用のサーバーを同時に実行せねばならず、若干面倒だと感じた。ただ実務ではこうするのも当たり前なのでこれが無難かもしれない。

Hono (SPA, inertia)

1. npm i @hono/inertia
2. サーバー（Hono）の設定
3. フロントエンド（React）の設定

.
├── src/
│   ├── index.ts          # Hono サーバーのエントリポイント（ルート、Inertia設定）
│   ├── components/       # UIパーツ（Button, Layout など）
│   └── pages/            # 各画面のReactコンポーネント（Inertiaで表示されるページ）
│       ├── Home.tsx      # メイン画面
│       └── List.tsx      # 曲一覧画面
├── public/               # 静的ファイル（favicon, imagesなど）
├── package.json
├── tsconfig.json
└── vite.config.ts        # Hono と React をビルドするための Vite 設定

最近(2026年4月28日)Hono公式で作られた機能。最近すぎるが、公式発でinertia自体は初見の技術ではないので、型貫通というGraphQLにもあるトレンドを扱えるのはあり。

API開発の手間を省き、サーバーサイド（Hono）から直接フロントエンド（React等）を制御してSPAを作る。普通のSPAはAPI管理が面倒。

Hono + Inertia + Reactで行う場合、Inertia の「APIを書かなくていい」開発体験: REST API の設計・バージョニング・フロント側の状態管理ライブラリ等、フルスタックで重い部分の多くが消えるとのこと。

おそらく公式のhttps://github.com/yusukebe/hono-inertia-example
これをそのまま持ってくるだけで実装可能

Hono (SPA, CloudWorkers)

pnpm create cloudflare@latest my-app
https://developers.cloudflare.com/pages/get-started/c3/

結論これにしました

ただ、honoはデフォルトで入っていないので後から追加してください

参考

• https://x.com/yusukebe/status/2049020835516854392?s=20
• https://github.com/yusukebe/hono-inertia-example
• https://github.com/honojs/middleware/tree/main/packages/inertia
• https://www.oflight.co.jp/ja/columns/hono-inertia-react-fullstack-2026

最後に

フロントエンドとバックエンドを意識した要件定義から始める個人開発は少なめ（コーディングテストで触ったり、アルバイトで既に完成されたものを触ったくらい）なので、バックエンドでフロントエンドも制御するか、フロントとバックを切り分けるか、フロントエンドの中でバックエンドを制御するかいろいろあるんだなあ。悩んでも仕方ないので、4月中にはどれか決めて、ミスっても経験として作り直したいなあ。

引用: https://speakerdeck.com/yusukebe/honowohurontoendodeshi-u-3tunoyarifang?slide=7