Hono "だけ" で作るミニマルな SPA
こちらはフロントエンドもバックエンドもHonoのみで作成したアプリです。
以下のように、JSXやState、TailwindCSSを使用できて、普段Next.jsを使っている私も大きな違和感なく快適に開発できました。
とても体験が良かったので、記事にまとめさせていただきます。
function App() {
const [model, setModel] = useState("");
const [input, setInput] = useState("");
...
const onSubmit = async (e: SubmitEvent) => {
e.preventDefault();
if (!model.trim()) return;
...
return (
<div class="space-y-4">
<div class="flex items-center space-x-2">
<p>Docs: </p>
<a
href="https://ai.google.dev/gemini-api/docs/models?hl=ja"
class="underline text-blue-600"
target="_blank"
rel="noopener noreferrer"
>
Gemini API
</a>
</div>
<form onSubmit={onSubmit as any} class="space-y-2">
...
</div>
);
}
Honoに出会う
普段はNext.jsでアプリケーションを作成しているので、恥ずかしながらHonoは名前を知っているくらいでした。しかし、最小のAPIが必要になった際に触れることがあり、初めて使用しました。
Honoの思想に惚れる
色々と調べているうちに、軽量、ミニマル、Web標準のようなHonoの魅力を知りました。
Next.js以外の選択肢も欲しい
Next.jsは環境構築が楽で、さまざまな機能をサポートしていてとても便利なのですが、小さいアプリを作成するにしてもファイル数がついつい多くなったり、依存関係も大袈裟になってしまうことがしばしばありました。AI駆動開発の波に乗ってアプリ開発を始めた私はほぼ最初からReact、Next.jsと便利なものに触れてしまった弊害です。
（単純にNext.js以外のフレームワークで開発してみたい欲もありました...）
1つのフレームワークで完結させたい
フロントエンドだけであればNext.js以外に選択肢はたくさんあると思うのですが、楽にアプリを作りたいからこそフルスタックフレームワークであることは結構重要です。
React + FastAPIなどで作ることもあるのですが、やはり1つのフレームワークでフルスタックに作るとローカルホストで立ち上げるのも楽だし、デプロイするときも複雑な設定が不要だったり、フロントーバックの通信で詰まったりなどがないので、やはり、1つのフレームワークで作るのは楽だなと感じています。
フルスタックフレームワークとしてのHono
Honoではさまざまなアプローチでフロントエンドを賄うことができます。
作者のyusukebeさんがこのような具体的な活用方法を積極的に発信されているのもHonoの魅力です。
いろんなパターンで実際に作ったのですが、アプリケーションがブラウザに表示される仕組みを改めて確認できてとても勉強になりました。
↓ 色々なパターンで作ってみた履歴です。
React + Hono という選択肢 もあるのですが、Honoでは クライアントコンポーネント の機能を提供していて、Reactを使わずともJSXやStateが使えます。
前述した通り、1つのフレームワークで完結させるため & 今回はHonoの勉強のためにも全てHonoで作ってみることにしました。
作ったもの
こちらのようなGeminiのモデル名を指定してリクエストを送ったら返答が返ってくる超シンプルなアプリです。
無料枠のAPIキーで使用できるモデルなのか確認したり、gemini-2.5-flash-preview-09-2025みたいなモデルが出た時に疎通をテストしたり、意外と欲しいアプリでした。
最小のディレクトリ
├── src/
│ ├── app.tsx # サーバーサイドアプリケーション（Hono）
│ ├── client.tsx # クライアントサイドアプリケーション（SPA）
│ ├── server.ts # サーバーエントリーポイント
│ ├── style.css # スタイルシート
│ └── types.ts # 型定義
├── README.md
├── package.json
├── pnpm-lock.yaml
├── tsconfig.json
└── vite.config.ts
通信の流れ
依存関係
以下のように非常にミニマルになっています！！（感動）
"dependencies": {
"@google/genai": "1.30.0",
"@hono/node-server": "1.19.6",
"hono": "4.10.7"
},
以上のように、Honoでミニマルなアプリケーションの開発ができました！
Next.jsよりも圧倒的に軽量に済ませられました。
また、サーバーサイドからクライアントサイドにグローバル変数を渡すのにも自分で実装が必要だったりと、Reactの便利さに浸ってしまっている自分にとって、とても勉強になりました。
まとめ
今回はあえてHonoだけで完結させたのですが、とても良い開発体験でした！！
Next.jsほど高機能はいらないんだよな...という時はこのパターンを使ってみようと思います！
本当の意味でHonoだけで完結させようというのがHonoXだと思いますので、HonoXが成熟してきたらいつかNext.jsの代替として使用できたらなあ...
ここまでお読みいただきありがとうございました！
間違っている点などありましたら、お気軽にご指摘いただけますと大変ありがたいです！
Discussion