Webアプリケーションを開発する際には、何らかのフレームワークを利用するケースが多いです。例えばNext.jsやExpress.jsなどが有名ですが、Honoもその一つです。Honoは軽量で高速なWebフレームワークであり、特にサーバーレス環境での利用に適しています。
今回は、このHonoを使って、簡単なWebアプリケーションを作成し、クラウド環境にデプロイするまでの流れを紹介します。
Honoとは
HonoはYusuke Wada (@yusukebe)さんの開発するWebフレームワークで、以下のような特徴があります。
- 軽量・高速
- CloudflareやFastly、Deno、Bun、AWS、Node.jsなどで利用可能
- 豊富なミドルウェア
- Web標準に準拠し、強力なTypeScriptサポート
特にCloudflare Workersで利用できるほど軽量、かつ高速なのが特徴です。Cloudflare Workersは無料プランでは1リクエストあたり10msに制限されているので、高速に動作するのは大事です（有料の場合、30秒まで可能です）。
立ち上げ
Honoのプロジェクトを作る際には、以下のコマンドではじめるのが手軽です。
npm create hono@latest
ウィザード方式で進めていきますが、実行ランタイムを途中で選択します。
% npm create hono@latest
Need to install the following packages:
create-hono@0.19.2
Ok to proceed? (y) y
> npx
> create-hono
create-hono version 0.19.2
✔ Target directory my-app
? Which template do you want to use?
aws-lambda
bun
❯ cloudflare-workers
cloudflare-workers+vite
deno
fastly
lambda-edge
インストールが終わったら、アプリケーションのディレクトリに入って開発用のサーバを立ち上げます。今回は yarn を使っています。
% yarn dev
yarn run v1.22.22
warning package.json: No license field
warning ../../package.json: No license field
$ wrangler dev
Cloudflare collects anonymous telemetry about your usage of Wrangler. Learn more at https://github.com/cloudflare/workers-sdk/tree/main/packages/wrangler/telemetry.md
⛅️ wrangler 4.28.1
───────────────────
╭──────────────────────────────────────────────────────────────────────╮
│ [b] open a browser [d] open devtools [c] clear console [x] to exit │
╰──────────────────────────────────────────────────────────────────────╯
⎔ Starting local server...
これでHonoが立ち上がります。ブラウザで http://localhost:8787 にアクセスすると、Honoのウェルカムページが表示されます。
Honoの基本構文
src/index.ts に以下のようなコードが生成されています。
import { Hono } from 'hono'
const app = new Hono()
app.get('/', (c) => {
return c.text('Hello Hono!')
})
export default app
Express.jsに似た構文で記述できます。 get 以外にも post や put、delete などのHTTPメソッドに対応しています。
HTMLを返す場合
HTMLを返す場合には、 html を利用します。
import { Hono } from 'hono'
import { html, raw } from 'hono/html'
const app = new Hono()
app.get('/:username', (c) => {
const { username } = c.req.param()
return c.html(
html`<!doctype html>
<h1>Hello! ${username}!</h1>`
)
})
export default app
ReactのようにJSXも利用できます。
import { Hono } from 'hono'
import type { FC } from 'hono/jsx'
const app = new Hono()
const Layout: FC = (props) => {
return (
<html>
<body>{props.children}</body>
</html>
)
}
const Top: FC<{ messages: string[] }> = (props: {
messages: string[]
}) => {
return (
<Layout>
<h1>Hello Hono!</h1>
<ul>
{props.messages.map((message) => {
return <li>{message}!!</li>
})}
</ul>
</Layout>
)
}
app.get('/', (c) => {
const messages = ['Good Morning', 'Good Evening', 'Good Night']
return c.html(<Top messages={messages} />)
})
export default app
なお、Hono自体はHTMLを返すのみなので、ユーザーインタラクティブな仕組みを作る場合には、別途クライアントサイドのJavaScriptの実装が必要です。
Cookie
Cookieを利用する場合には、 hono/cookie を使います。
import { Hono } from 'hono'
import {
deleteCookie,
getCookie,
getSignedCookie,
setCookie,
setSignedCookie,
generateCookie,
generateSignedCookie,
} from 'hono/cookie'
app.get('/cookie', (c) => {
setCookie(c, 'cookie_name', 'cookie_value')
const yummyCookie = getCookie(c, 'cookie_name')
deleteCookie(c, 'cookie_name')
const allCookies = getCookie(c)
// ...
})
API向けの認証
HonoはAPIサーバーとして使われることも多いですが、その際に使われる認証方式がAuthorizationヘッダーです。Honoでは、以下のようにしてAuthorizationヘッダーに対応できます。
use はミドルウェアを定義するためのメソッドで、特定のパスに対して共通した処理を実行できます。
import { Hono } from 'hono'
import { bearerAuth } from 'hono/bearer-auth'
const app = new Hono()
const token = 'honoiscool'
app.use('/api/*', bearerAuth({ token }))
app.get('/api/page', (c) => {
return c.json({ message: 'You are authorized' })
})
SSE
サーバーからクライアントへリアルタイムでデータを送信する場合、SSE（Server-Sent Events）を利用できます。Honoでは以下のように実装できます。
import { Hono } from 'hono'
import { stream, streamText, streamSSE } from 'hono/streaming'
const app = new Hono()
let id = 0
app.get('/sse', async (c) => {
return streamSSE(c, async (stream) => {
while (true) {
const message = It is ${new Date().toISOString()}
await stream.writeSSE({
data: message,
event: 'time-update',
id: String(id++),
})
await stream.sleep(1000)
}
})
})
デプロイ
Hono + Cloudflare Workersであれば、 npm run deploy でデプロイできます。
npm run deploy
ログが流れて、デプロイが完了します。
> deploy
> wrangler deploy --minify
⛅️ wrangler 4.28.1
───────────────────
Total Upload: 19.32 KiB / gzip: 7.86 KiB
Uploaded my-app (2.05 sec)
Deployed my-app triggers (1.29 sec)
https://my-app.your-id.workers.dev
Current Version ID: d504b360-11e8-4553-a65d-f22a3e586670
とても簡単に利用できます。
まとめ
今回はHonoの基本的な使い方と、Cloudflare Workersへのデプロイ方法を紹介しました。Honoは軽量で高速なWebフレームワークであり、特にサーバーレス環境での利用に適しています。HTMLのレンダリングやCookieの操作、API認証、SSEなど、Webアプリケーション開発に必要な機能が揃っており、非常に便利です。
サーバーレスで機能を実装し、アプリと連携させるのにHonoは適しています。ぜひ試してみてください。