JavaScriptフレームワーク界隈でここ最近 Hono が熱いです。
弊社でもバックエンドFWの一つとしてHonoに注目しています。
Honoは「API開発の効率化」「高速なレスポンス」「軽量な構造」という3拍子を兼ね備えており、特にエッジコンピューティング環境に最適化された次世代のJSフレームワークです。
今までだとJS(TS)のバックエンドはExpressがかなりメジャー（最近だとNext.jsが台頭しはじめてきた）でしたが、このHonoがもしかしたらそこに風穴を開けてくれるかもしれません。今回はHonoがなぜこれほど熱いのか、その魅力を紹介しつつ、簡単なAPI実装をしてCloudflare Pagesというエッジ環境に爆速でデプロイします。
※ちなみにCloudflare Pagesは今回のように個人で少し試す分にはfreeプランで十分対応できます
Honoとは？
Hono（ホノ）は超軽量で高速な次世代JSフレームワークです。
名前の由来である日本語の 「炎（ほのお）」 が由来で、Cloudflareの"flare"とかかっているみたいです。
PythonのmekabuやReactの状態管理ライブラリJotaiなど日本語がライブラリやFWの名前に使われてるのいいですよね。
お察しの通り、開発者は和田裕介さんという日本人の方です！
OSSで日本人の名前がこうして挙がるのを見ると、それだけでめちゃくちゃ応援したくなります。
ちなみにこの方、Honoの技術に注目したCloudflareにスカウトされ、2023年にCloudflareに入社しています。すごすぎる...
和田さんのCloudflare入社やHono開発についての対談記事はこちら
和田さんは今から10年以上前の当時から、アプリケーションだけでなく、そのためのフレームワークも好きで自作していたそうです。
Honoの概要
- GitHub公式リポジトリ: Hono.js
- スター数: 2024年12月時点で約21.1K（継続的に増加中）
- 用途: Cloudflareなどエッジコンピューティング向けに最適化されたAPI構築
GitHubスター数の推移がこちらです。
2023年下半期から急激に伸びてきているのがわかります。
Honoのメリット
1. 圧倒的な軽量さ
Honoのライブラリサイズはわずか数KB~
数十KB。
他のフレームワークと比較しても極めて軽量で、プロジェクトが肥大化する心配がないです。
開発には最低限の機能さえあれば良いというミニマリストな開発者にピッタリですね。
2. 高速なパフォーマンス
徹底的に最適化されたコードベースにより、Honoは驚異的なスピードを発揮します。
APIリクエストのレスポンスが速いことはもちろん、スケール時の負荷にも強く、ユーザー体験を向上させてくれます。
3. シンプルな設計
「直感的かつシンプルな構文」で使いやすさ抜群です。
初学者でも簡単に学べる一方で、熟練開発者にはその拡張性と柔軟性が魅力的。
4. ミドルウェアで簡単に拡張可能
認証、バリデーション、CORS設定など、ミドルウェアが豊富です。
必要な機能を選んで組み込むだけで、プロジェクトに応じた最適なAPIを構築可能です。
5. エッジ環境への最適化
Cloudflare Workersなど、分散型のコンピューティング環境に特化。
Fastly ComputeやDeno、Bunなどの他のプラットフォームにも対応しています。
地理的に離れたユーザーにも爆速のレスポンスを届けられるのがHono真骨頂です。
ちなみに、なんでCloudflare 専用のFWでないかというと、
いろいろなプラットフォームで使ってもらうことが、結果として製品のクオリティを上げることにつながるからです。もし、あのときCloudflare Workersだけに閉じていたら、今みたいに多くの人に使ってもらえるフレームワークには成長しなかったでしょう。そう思うと、たとえ僕がCloudflareに入社したからといって、Cloudflare Workersを贔屓するようなことはしたくないんです。そんな想いをCloudflareも尊重してくれました。
引用: https://findy-code.io/engineer-lab/yusukebe
という考えをもっているからだそうです。
エンジニアとしての技術力だけでなく、思想も素晴らしいですよね...
もう一つ余談ですが、Honoはrouterにめちゃくちゃこだわっています。
routerだけで5種類あり、それぞれ効果的に使うことで高速な実行環境を実現できます。
routerについてこれ以上書くと記事が長くなってしまうので、詳しく知りたい方はこちら。
実際にHono.jsを触ってみよう！
ここからは、Honoを使って超基本的なAPIを作ってみます。
1. プロジェクトのセットアップ
公式ドキュメントを参考に、以下の手順でHonoのプロジェクトを作成します。
今回は hono-tutorial という名前でプロジェクトを作ります。
npm create hono@latest hono-tutorial
npm createコマンドを叩くと、以下のようにいろいろ聞かれます。
今回は後でCloudflare Pagesにデプロイ予定なので、cloudflare-pages を選択、その他はデフォルトでOKです。
Ok to proceed? (y)
create-hono version 0.14.3
**✔** **Using target directory** … hono-tutorial
? **Which template do you want to use?** cloudflare-pages
? **Do you want to install project dependencies?** yes
? **Which package manager do you want to use?** npm
プロジェクトができたら、
npm run dev （yarnの方は yarn dev）をして、開発サーバー（http://localhost:5173）を起動します。
画面にHello!と出てくれば、無事初期セットアップ完了です。
といっても、ほとんどnpmがやってくれましたが...
2. APIを構築する
ここからは実際に簡単なAPIを構築してみましょう。
/src/index.tsx を見るとこのような記述になっていると思います（バージョンによって多少スターターキットが異なる可能性あり）。
普段Reactを多く書いている私からすると、jsxは馴染みがあって使えるの嬉しいです。今回はバックエンドAPIなのであまり関係ないですが、フロントもHonoで書いてフルスタックで開発したい時などに便利ですね。
import { Hono } from 'hono'
import { renderer } from './renderer'
const app = new Hono()
app.use(renderer)
app.get('/', (c) => {
return c.render(<h1>Hello!</h1>)
})
export default app
ここに以下のエンドポイントを追加してみましょう。
// json型エンドポイント
app.get('/hello', (c) => {
return c.json({
name: 'John Doe',
age: 25,
message: 'Hello, World!'
})
})
作成したエンドポイントにアクセスしてみましょう。
http://localhost:5173/hello/
正常にレスポンスが確認できます。
続いて、以下のエンドポイントを追加しましょう。
// パラメータ付きエンドポイント
app.get('/hello/:name', (c) => {
const name = c.req.param('name')
return c.render(<h2>Hello, {name}!</h2>)
})
作成したエンドポイントにアクセスしてみましょう。
http://localhost:5173/hello/John
Hello, John!と表示されます。
:name とすることによりname部分のパラメータ文字列を取得することができます。
Honoのデプロイ（Cloudflare Pages）
Honoは、Cloudflareへのデプロイがめちゃくちゃ簡単で手軽にできます。
以下の手順で、実際にデプロイしてHonoを動かしてみましょう。
1. Cloudflareにサインアップ
Cloudflareのアカウントにまだサインアップしていない方は
デプロイ前にこちらからアカウント作成をしておきましょう。
https://dash.cloudflare.com/sign-up
2. デプロイコマンドを叩く
npm createコマンドでCloudflare Pagesのプロジェクトを作成した場合は、
pageage.jsonに既にdeployコマンドが登録されているはずです。
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "wrangler pages dev",
"deploy": "npm run build && wrangler pages deploy"
},
なのでありがたくこのコマンドをそのまま使っていきましょう。
npm run deploy
すると以下のようにブラウザが立ち上がるので、allowを押して先に進みます。
その後ターミナルでproduction環境のブランチ名を聞かれますが、今回は特にいじらずそのまま production とします。
すると、プロジェクトがアップロードされ、
最終的に以下のように
Deployment complete! Take a peek over at [CloudflareのURL]
と表示されればデプロイ成功です！
Cloudflareのアカウントホームを確認すると、ちゃんと今デプロイしたプロジェクトが表示されています。
早速、[CloudflareのURL]（https://xxxxxx.PJ名-deb.pages.dev）にアクセスしてみましょう。
アクセスすると、もしかしたら以下のような画面になっているかもしれません。
原因を調べてみましょう。
どうやらDNSのエラーのようなので、Cloudflareのdashboardで調べつつ少し待ってみましょう。
はい、正常に表示されました！
これでデプロイ完了です。
まとめ
Honoは、軽量さと高速性、そしてエッジ環境への最適化を兼ね備えた、次世代のAPI開発フレームワークです。
その直感的な設計と拡張性の高さから、小規模なプロジェクトから大規模な分散システムまで、幅広いシーンで今後デファクトスタンダードになっていくかもしれません。
「軽量なフレームワークを試してみたい」「エッジ環境に最適なAPIを構築したい」という方は、ぜひHonoを触ってみてください🔥
採用拡大中！
アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニア仲間を大募集しています！
少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！
お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/