今回は軽量で高速な次世代のJavaScriptのWebアプリケーションフレームワーク「Hono」をご紹介します。
目次
はじめに
サーバーサイドのJavaScriptはその応答性の速さや開発の利便性などで優れることから利用が普及し、関連するフレームワークや実行環境が整備されてきました。さらに、実行環境の構築作業を省略できる便利なインフラサービスも増えており、アプリケーション開発に集中できるようになりました。
Honoは、様々なインフラサービスや異なる実行環境で動作するアプリケーションフレームワークで、特に高速な応答が求められるリアルタイム処理の実現において有力な選択肢の1つです。今回はHonoの特長や簡単な使い方を解説していきます。
Honoとは
Honoは、サーバーサイドJavaScriptによるWebアプリケーション構築に必要な標準機能を提供するシンプルで拡張性の高いフレームワークです。現在はCloudflare社に所属している和田裕介氏が開発し、名前は日本語の「炎」に由来します。
フレームワーク自体が軽量で動作が速く、柔軟なルーティング機能と合わせて高い応答性を実現します。
また、Web標準APIに基づいて実装されているため、Node.jsやDeno、BunなどのJavaScript実行環境に加えて、CloudflareやAWSなどのインフラサービス上でも動作が可能で、それぞれの仕様の差異を気にせずに開発を進められます。
さらに、Webアプリケーションに必要な認証やセキュリティ、その他便利な関数を備えたフレームワークで、様々な規模の開発に対応できます。
Honoの特長
状況に合わせた高速ルーティング処理
Honoの応答性の高さを支える要因の1つがルーター機能です。ルーターはリクエストされたURLを解析し、該当する処理へと導く機能です。
従来のルーターは全てのURLパターンに対して正規表現で網羅的に探していましたが、Honoのルーターでは大きな1つの正規表現にまとめることで探索回数を大幅に削減しています。また、正規表現だけでは表せないURLパターンに関しては、別のルーターを適用する2段構えの構成を採ることも可能です。
その他にも、初期化速度を重視したルーターや小規模向けの軽量なルーターが用意されており、アプリケーションの用途に応じて最適なルーターを選べます。
基本機能を備えた軽量なWebフレームワーク
Honoには、Webアプリケーションの開発に必要な充分な機能が備わっています。
他のモダンなフレームワークと同様に、JSXとReact互換のモジュールによるコンポーネントベースの開発が可能です。また、HTTP認証やCORS、ロギングなどのWebアプリケーション開発に必要な基本機能を満たす組み込みモジュールに加えて、便利なヘルパー関数も備えています。
ミドルウェアと呼ばれるサードパーティ製のモジュールも整備されてきており、今後の発展でさらなる利便性の向上が期待できます。
環境を選ばずアプリケーションを展開可能
Honoは様々なJavaScript実行環境で動作するようにWeb標準APIに準拠して作られています。幅広く普及しているNode.jsをはじめとして、後発で応答性が高いDenoやBunにも対応しています。また、Cloudflare WorkersやAWS Lambda@Edgeなどのサーバーレスのプラットフォームにも簡単に配置可能で、低遅延な高速処理の要件と相性が良いです。
各実行環境との差異を埋めるために、アプリケーションを作るときのプロジェクトテンプレートや、機能実装するときに仕様の違いを補うアダプタが用意されています。
Honoを使ってみよう
ここからはHonoを使ってWebアプリケーションを作成する手順を紹介していきます。
Node.jsのインストール
まずはアプリケーション作成に必要なNode.jsをインストールしましょう。Node.jsの公式サイトにアクセスします。
表示されている緑色のボタン［Node.js（LTS）をダウンロードする］をクリックして、インストーラのダウンロードを行います。
2025年2月時点の推奨版は「v22.14.0 LTS」となっていますが、その時点のバージョンをダウンロード頂ければ問題ありません。尚、最新版は最新機能が使用できる反面、動作が安定しないことがありますので、特別な理由がない限りは推奨版を使用するようにしてください。
インストーラのダウンロードが終わったらダブルクリックで起動し、指示の通りインストールを行ってください。
インストール後、コマンドを実行できるアプリを起動し、Node.jsおよびnpmが使用できるようになっていることを確認します。
- macOSの場合は、「ターミナル」アプリ
- Windowsの場合は「PowerShell」または「コマンドプロンプト」
以下のコマンドを実行し、結果を確認します。
node -v
npm -v実行結果に自分のインストールしたバージョンが表示されれば、使用する準備ができています。コマンドが実行できない場合はOSを再起動して再度試すようにしてください。
Honoプロジェクトの作成
下記のコマンドを入力してHonoのプロジェクトを新しく作成しましょう。
npm create hono@latest hono-tutorial
> cloudflare-workers
> y
> npm作成が終わると、カレントディレクトリ配下にプロジェクトディレクトリが作成されます。続けて、プロジェクトディレクトリに移り、必要なパッケージをインストールします。
cd hono-tutorial
npm installインストールが完了したら、下記のコマンドでローカルサーバーを動かしてみましょう。
npm run devローカルサーバーが起動するとコンソールに下記のようなメッセージが表示されます。
コンソールにローカルサーバーのURL（http://127.0.0.1:8787）が表示されるので、ブラウザからアクセスしてみましょう。
上記のようなページが表示されれば動作確認は完了です。
Honoで簡単なWeb APIの作成
今度は特定のURLで動作するAPIのエンドポイントを追加してみましょう。プロジェクトディレクトリ内のsrc/index.tsを下記のように変更します。
import { Hono } from 'hono'
// APIが返却するブログ記事情報の配列データ
let blogs = [
{
id: "1",
title: "blog1",
content: "content1"
},
{
id: "2",
title: "blog2",
content: "content2"
},
{
id: "3",
title: "blog3",
content: "content3"
}
]
const app = new Hono()
app.get('/', (c) => {
return c.text('Hello Hono!')
})
// API用のHonoインスタンスを作成
const api = new Hono()
// ブログ記事を取得するAPIエンドポイント
api.get('/posts/:id', (c) => {
// URLパラメータからIDを取得
const id = c.req.param("id");
// 指定されたIDのブログ記事情報を取得
const blog = blogs.find((b) => b.id == id);
// JSON形式でブログ記事情報を返却
return c.json(blog);
})
// '/api'以下のルートにapiインスタンスを登録
app.route('/api', api)
export default app上記のコードには、配列に用意したブログ記事情報を取り出す処理を追記しています。例えば、「/posts/1」へのリクエストであれば1番目のブログ記事データを返します。
変更ができたらローカルサーバーで確認してみましょう。動いていない場合は下記のコマンドで起動しておきましょう。
npm run dev続いて、追加したエンドポイントにブラウザからアクセスしてみましょう。コードで追加したルート情報を反映すると、作成したWeb APIのエンドポイントは下記のURLになります。
http://127.0.0.1:8787/api/posts/1ブラウザに下記のようなJSONが表示されれば成功です。
今回作成したプロジェクトは、Cloudflare Workersのテンプレートを選んでいますので、このままCloudflareの環境に配置して動かすことができます。
さいごに
Honoは高速なパフォーマンスを追求したJavaScriptベースのWebアプリケーションフレームワークです。特に物理的な距離によるネットワーク遅延の差を埋めるエッジサーバーのサービスと相性が良く、CDNサービスやWeb APIなどの用途に適しています。
また、長らく使われてきたExpressのようなシンプルさと拡張性の高さを持ちながらも、実行環境を選ばずに展開できる用途の広いフレームワークで、今後活用できる場面も広がっていくと期待できます。
メシウスでは様々なWebアプリケーションフレームワークと一緒に使えるJavaScriptライブラリを提供しています。もちろんHonoで作成されたWeb APIとも連携可能です。
無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。