TypeScriptエンジニアのためのHono入門 - Edge環境で動く超軽量Webフレームワーク

益子 竜与志
益子 竜与志
XThreads
最終更新日:2026年04月19日公開日:2026年04月19日

Honoは日本語で「炎」を意味する超軽量・超高速なWebフレームワークです。Cloudflare Workers・Bun・Deno・Node.jsなど複数のランタイムに対応し、TypeScriptとの相性も抜群。本記事ではHonoの特徴から実際のコード例まで、Edge環境でのWeb開発に興味を持つTypeScript/Node.jsエンジニア向けに解説します。

Honoとは何か - 炎のように速い超軽量フレームワーク

Honoは日本語で「炎」を意味するWebフレームワークです。その名前のとおり、圧倒的なパフォーマンスと軽量さを売りにしており、TypeScriptエンジニアの間で急速に支持を集めています。

最大の特徴は3つあります。まず「超軽量」であること。ミニマイズされた状態で約4KBという驚異的なサイズを実現しており、Expressの572KBとは比較にならないほどコンパクトです。次に「超高速」であること。独自のRegExpRouterにより1秒間に40万リクエスト超を処理するベンチマーク結果(Hono x 402,820 ops/sec ±4.78%)が示すとおり、他の軽量フレームワークを大きく引き離す性能を持ちます。そして「マルチランタイム対応」であること。Cloudflare WorkersはもちろんBun・Deno・Node.js・AWS Lambda・Vercelなど多様な実行環境で同一コードが動作します。

この3つの特性が揃っているのは、HonoがWeb Standardsと呼ばれるブラウザ標準APIをベースに設計されているからです。FetchAPIやRequestオブジェクトなど、ブラウザ環境と共通の標準仕様に準拠することで、特定のランタイムに依存しない移植性を実現しています。

Honoのマルチランタイム対応

なぜEdge環境でHonoが選ばれるのか

Edge Computingとは、ユーザーに地理的に近いエッジサーバーでコードを実行する仕組みです。Cloudflare WorkersやFastly Computeがその代表例で、データセンターで処理するよりもレイテンシを大幅に削減できます。しかし、Edge環境には独特の制約があります。実行メモリ・バンドルサイズ・起動時間に厳しい制限が設けられており、重量級のフレームワークはそもそも動かないケースもあります。

Honoがこの分野で選ばれる理由は明確です。約4KBという本体サイズはEdge環境のサイズ制限をはるかに下回ります。そして特筆すべきがルーターの設計です。HonoのデフォルトであるSmartRouterはRegExpRouterとTrieRouterを組み合わせており、すべてのルートを一つの大きな正規表現にコンパイルすることで、リクエストのたびに生じるルート探索コストを最小化しています。この設計により、コールドスタートが求められるEdge環境でも高速なレスポンスを維持できます。

また、LinearRouterという選択肢も存在します。サーバーレス環境のように「リクエストのたびに初期化が走るワンショット型」の実行環境では、ルート登録の速度が全体のパフォーマンスに直結します。LinearRouterはこのユースケース向けに最適化されており、他のルーターと比較して2倍以上高速なルート登録を実現します。用途に応じてルーターを選べる柔軟性もHonoの強みの一つです。

Cloudflare WorkersでHonoを動かす

実際にHonoをCloudflare Workers環境で動かしてみましょう。プロジェクトのセットアップは以下のコマンド一発で完了します。

npm create hono@latest my-app
cd my-app
npm install

テンプレート選択画面が表示されるので「cloudflare-workers」を選ぶだけです。生成されたプロジェクトのエントリーファイルはシンプルそのものです。

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Hello Cloudflare Workers!'))

export default app

開発サーバーを起動するには npm run dev を実行します。http://localhost:8787 でローカル確認ができます。本番へのデプロイも npm run deploy だけです。Cloudflareのアカウントと wrangler.toml が設定されていれば、このコマンドだけでグローバルなEdgeネットワークに展開できます。

環境変数やKVストレージ、R2バケットなどのCloudflareリソースへのアクセスは、コンテキストオブジェクト(c)の c.env 経由で型安全に行えます。TypeScriptのジェネリクスを使って型を明示することで、補完や型チェックが正しく機能します。

type Bindings = {
  MY_KV: KVNamespace
  API_KEY: string
}

const app = new Hono<{ Bindings: Bindings }>()

app.get('/data', async (c) => {
  const value = await c.env.MY_KV.get('key')
  return c.json({ value })
})
HonoのTypeScript型安全機能

BunとDenoでも同じコードが動く - マルチランタイム対応の魅力

Honoの大きな魅力の一つは、ランタイムを問わず同一のAPIで開発できることです。たとえばBun環境でのセットアップも、選ぶテンプレートを変えるだけです。

bun create hono@latest my-bun-app

エントリーファイルの記述はほぼ変わりません。Cloudflare Workersの例と同一のルーティングコードが動作します。

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Hello Bun!'))

export default app

Bunでの開発時は bun run --hot src/index.ts でホットリロードを有効化できます。コードを変更するたびにサーバーが自動再起動するため、開発体験が向上します。

Node.js環境でHonoを使う場合は @hono/node-server アダプターを追加します。Denoでは deno run から直接実行できます。このように、ビジネス要件や既存インフラに合わせてランタイムを選べる柔軟性は、チームやプロジェクトの状況に応じた判断がしやすいという点で大きなメリットです。

リソースが極端に限られた環境向けには hono/tiny というプリセットも用意されています。14kB以下という制約の中でもHonoのコアルーティング機能を使えるため、IoTデバイスやWasmコンテナなど特殊な制約環境でも動作します。

TypeScriptと組み合わせた実践的な使い方

HonoはTypeScriptとの親和性が非常に高く、型安全なWebサーバー開発を実現できます。代表的な機能を見ていきましょう。

まずミドルウェアです。Honoには20種類以上の組み込みミドルウェアが用意されており、インポートするだけで使えます。ロギング・CORS設定・JWT認証などをワンライナーで追加できます。

import { Hono } from 'hono'
import { logger } from 'hono/logger'
import { cors } from 'hono/cors'
import { jwt } from 'hono/jwt'

const app = new Hono()

app.use('*', logger())
app.use('/api/*', cors())
app.use('/private/*', jwt({ secret: 'secret' }))

app.get('/api/hello', (c) => c.json({ message: 'Hello!' }))

次に、JSXを使ったHTMLレンダリングです。HonoはサーバーサイドでのJSXレンダリングをネイティブサポートしており、ReactなしでコンポーネントベースのHTML生成ができます。拡張子を .tsx にするだけで利用可能です。

/** @jsx jsx */
import { Hono } from 'hono'
import { jsx } from 'hono/jsx'

const app = new Hono()

app.get('/', (c) => {
  return c.html(
    <html>
      <body>
        <h1>Hello Hono!</h1>
      </body>
    </html>
  )
})

特に注目したいのが hono/client によるRPC機能です。サーバー側のルーター定義の型を直接クライアント側で利用することで、エンドツーエンドの型安全性を実現します。バックエンドのAPIの型変更がフロントエンドの補完にリアルタイムで反映されるため、型の不一致によるバグを事前に検出できます。

// server.ts
const route = app.get('/posts/:id', async (c) => {
  const id = c.req.param('id')
  return c.json({ id, title: 'Hello' })
})

export type AppType = typeof route

// client.ts(フロントエンド側)
import { hc } from 'hono/client'
import type { AppType } from './server'

const client = hc<AppType>('http://localhost:8787')
const res = await client.posts[':id'].$get({ param: { id: '1' } })
// res.json() の型が自動推論される

この型安全なRPC機能は、特にフルスタックTypeScriptプロジェクトでの開発効率を大幅に向上させます。tRPCのようなアプローチをHonoだけで実現できる点は、ライブラリの追加を最小限に抑えたいプロジェクトにとって魅力的です。

まとめ - Honoが変えるEdge開発のスタンダード

Honoはその超軽量・超高速・マルチランタイム対応という三拍子揃った特性により、Edge Computing時代のWebフレームワークとして急速に存在感を高めています。Cloudflare Workersを筆頭に、Bun・Deno・Node.jsといった多様なランタイムで動作する柔軟性は、特定のインフラに縛られたくないプロジェクトにとって大きな強みです。

TypeScriptとの高い親和性も見逃せません。型安全なミドルウェア・JSXレンダリング・hono/clientによるエンドツーエンドRPCなど、TypeScriptエンジニアが欲しい機能が揃っています。記述量が少なく読みやすいAPIを提供しながら、本番環境で必要とされる認証・CORS・ロギングといった機能も豊富に組み込まれています。

Edge Computingはクラウドインフラのトレンドとして今後も普及が加速すると予想されます。Honoはすでにそのエコシステムの中心的なフレームワークとして認知されており、GitHubリポジトリのスター数は急速に増え続けています。

まず試してみるなら npm create hono@latest でプロジェクトを作り、Cloudflare Workersにデプロイしてみることをおすすめします。セットアップからデプロイまで数分で体験できます。TypeScriptによるEdge開発の新しいスタンダードを、ぜひ体感してみてください。

IT/DXプロジェクト推進するPMO・コンサル人材を提供しています

AI利活用×高生産性のリソースで、あらゆるIT/DXプロジェクトを一気通貫支援します

詳しく見る →
AI駆動型ITコンサルティング
Careerバナーconsultingバナー