Honoとは
Honoは、Cloudflare Workers、Deno、Bun、Node.jsなど複数のランタイムで動作する超軽量・高速なWebフレームワークです。Express風のAPIと優れたTypeScriptサポートが特徴です。
Hono 4の新機能
hono/jsx の強化
import { Hono } from 'hono';
import { FC } from 'hono/jsx';
const Layout: FC = (props) => {
return (
<html>
<head>
<title>{props.title}</title>
</head>
<body>{props.children}</body>
</html>
);
};
const app = new Hono();
app.get('/', (c) => {
return c.html(
<Layout title="Home">
<h1>Welcome to Hono!</h1>
</Layout>
);
});
JSXストリーミング
import { Suspense } from 'hono/jsx';
import { renderToReadableStream } from 'hono/jsx/streaming';
const AsyncComponent: FC = async () => {
const data = await fetchData();
return <div>{data}</div>;
};
app.get('/stream', (c) => {
const stream = renderToReadableStream(
<Layout>
<Suspense fallback={<div>Loading...</div>}>
<AsyncComponent />
</Suspense>
</Layout>
);
return c.body(stream, {
headers: { 'Content-Type': 'text/html' }
});
});
RPC機能
型安全なクライアント・サーバー間通信を実現します。
サーバー側
import { Hono } from 'hono';
import { zValidator } from '@hono/zod-validator';
import { z } from 'zod';
const app = new Hono()
.get('/users', async (c) => {
const users = await db.users.findMany();
return c.json(users);
})
.post(
'/users',
zValidator('json', z.object({
name: z.string(),
email: z.string().email()
})),
async (c) => {
const data = c.req.valid('json');
const user = await db.users.create(data);
return c.json(user, 201);
}
)
.get('/users/:id', async (c) => {
const id = c.req.param('id');
const user = await db.users.findById(id);
return c.json(user);
});
export type AppType = typeof app;
export default app;
クライアント側
import { hc } from 'hono/client';
import type { AppType } from './server';
const client = hc<AppType>('http://localhost:3000');
// 完全な型推論！
const users = await client.users.$get();
const usersData = await users.json(); // User[]型
const newUser = await client.users.$post({
json: { name: 'Alice', email: 'alice@example.com' }
});
const user = await client.users[':id'].$get({
param: { id: '123' }
});
ミドルウェア
組み込みミドルウェア
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { logger } from 'hono/logger';
import { secureHeaders } from 'hono/secure-headers';
import { compress } from 'hono/compress';
import { cache } from 'hono/cache';
const app = new Hono();
app.use('*', logger());
app.use('*', cors());
app.use('*', secureHeaders());
app.use('*', compress());
app.use('/api/*', cache({ cacheName: 'api-cache', cacheControl: 'max-age=60' }));
認証ミドルウェア
import { jwt } from 'hono/jwt';
import { bearerAuth } from 'hono/bearer-auth';
// JWT認証
app.use('/api/*', jwt({
secret: 'your-secret-key'
}));
app.get('/api/protected', (c) => {
const payload = c.get('jwtPayload');
return c.json({ userId: payload.sub });
});
// Bearer認証
app.use('/admin/*', bearerAuth({
token: 'admin-token'
}));
バリデーション
Zodとの統合
import { zValidator } from '@hono/zod-validator';
import { z } from 'zod';
const createUserSchema = z.object({
name: z.string().min(1),
email: z.string().email(),
age: z.number().int().positive().optional()
});
app.post(
'/users',
zValidator('json', createUserSchema),
async (c) => {
const data = c.req.valid('json');
// dataは型安全
return c.json({ message: 'Created', user: data });
}
);
マルチランタイム対応
// Cloudflare Workers
export default app;
// Deno
Deno.serve(app.fetch);
// Bun
export default {
port: 3000,
fetch: app.fetch
};
// Node.js
import { serve } from '@hono/node-server';
serve(app);
ベンチマーク
リクエスト/秒 (シンプルなJSON応答):
- Express: 15,000
- Fastify: 45,000
- Hono (Bun): 120,000
- Hono (Cloudflare Workers): 100,000+
ファイルベースルーティング
// routes/users.ts
import { Hono } from 'hono';
const users = new Hono();
users.get('/', (c) => c.json([]));
users.get('/:id', (c) => c.json({ id: c.req.param('id') }));
export default users;
// index.ts
import { Hono } from 'hono';
import users from './routes/users';
const app = new Hono();
app.route('/users', users);
export default app;
まとめ
Hono 4は、TypeScriptファーストの設計とマルチランタイム対応により、モダンなWebアプリケーション開発に最適なフレームワークです。RPC機能による型安全なAPIクライアントは、特にフルスタック開発で大きな生産性向上をもたらします。
← 一覧に戻る