Honoの始め方 — 商品のJSONを返す小さなAPIを作ろう

ひよこ

商品の名前と値段を返すAPIを作ってみたい！

ペンギン先生

Honoで小さく始めよう。URLと処理を組み合わせ、JSONの応答を返すWebフレームワークだよ。今回は自分の端末のNode.jsで、りんご200円を返す。

ひよこ

Edge専用のツールなの？

ペンギン先生

Cloudflare Workersなどで使えるほか、Node.jsでもアダプターを介して動く。Honoと実行環境は別。Edgeだから必ず近い拠点で速く返るとまでは言えないよ。

ひよこ

どうやって始めるの？

ペンギン先生

Node.jsとnpmを準備し、新しいフォルダーでhonoと@hono/node-serverを入れる。本文はJavaScriptの.mjsファイル一つで、使っていないローカルのポートへ起動する例だよ。

ひよこ

URLと処理はどう結び付ける？

ペンギン先生

app.getにパスと関数を書く。今回の/api/products/appleではc.jsonで商品を返す。cはリクエストや応答を扱うContext。GETはHTTPの方法、パスは行き先だよ。

ひよこ

動いたことは何を見れば分かる？

ペンギン先生

ブラウザーでそのURLを開き、nameがりんご、priceが200のJSONを読む。登録していないパスは404になる。この二つを確認すると、道筋を分ける役割が見えるよ。

ひよこ

TypeScriptで書けば入力は安全になる？

ペンギン先生

型のチェックと外から来た入力の検証は別だよ。値の形式・範囲、認証、操作してよい対象を確認する認可が必要。サンプルの固定商品は、注文を受け付けるAPIではない。

ひよこ

CORSを設定すれば認証もできる？

ペンギン先生

CORSはブラウザーの別オリジンからの利用を制御する仕組み。認証の代わりではないよ。トークンをソースに直書きせず、実行環境の秘密管理や認証方式を確認する。

ひよこ

後からCloudflareへ移してもそのまま？

ペンギン先生

共通のWeb標準APIを使える部分は多いが、Node.js専用機能、DB接続、環境変数、実行時間などは確認がいる。最初はこのAPIの応答を説明できたら、公式の環境別導入案内へ進もう。

まず、りんごのJSONを返す

Node.jsのサポート中のLTSとnpmを用意します。この確認はNode.js 24で行いました。新しい練習フォルダーで実行してください。

mkdir hono-products-demo
cd hono-products-demo
npm init -y
npm install hono @hono/node-server

server.mjsを作ります。8787番が空いていることを確認します。

import { Hono } from 'hono';
import { serve } from '@hono/node-server';
const app = new Hono();
app.get('/api/products/apple', (c) => {
  return c.json({
    name: 'りんご',
    price: 200,
  });
});
serve({
  fetch: app.fetch,
  hostname: '127.0.0.1',
  port: 8787,
});

node server.mjs

ブラウザーでhttp://127.0.0.1:8787/api/products/appleを開きます。nameがりんご、priceが200なら成功です。/missingも開き、404の応答と比べましょう。終わったら、このサーバーの端末でCtrl+Cを押します。

GET、パス、応答を分ける

固定の商品を返す練習なので、DBやアカウントは不要です。販売・注文APIにするなら、入力検証、認証と認可、保存、失敗時の応答などを別に設計します。

サーバーを起動しないテストもできる

Honoのapp.request()へリクエストを渡すと、応答を検査できます。ただし、公開ネットワークや本番の実行環境まで確認したことにはなりません。Jest入門で期待値の比較を学んだら、商品名とステータスの検査へつなげられます。

よくある詰まりポイント

• ポートが使用中：別の空いている番号へ変更します。他のサーバーをまとめて止めません。
• 404：HTTPの方法とパスを確かめます。ハンドラーの登録順も動作に影響します。
• ブラウザーのCORSエラー：オリジンの条件を確認します。CORSを認証や権限チェックの代わりにしません。

もう少し詳しく：別の環境へ移す

HonoはFetch・Request・ResponseなどのWeb標準APIを使います。環境ごとのアダプターや設定は異なり、Node.jsのファイルアクセスなどをすべての実行環境でそのまま使えるとは限りません。Workersで公開する際は、公式テンプレート、秘密の管理、利用枠、DBや外部通信も確認します。

ペンギン先生のまとめ

「Hono」って出てきたら「URLに合う処理を選び、応答を返す小さなWebフレームワーク」と思えばだいたいOK！ まず一つの商品のJSONと404を見比べてみよう。

参考資料

• Hono：Node.js — アダプター・起動・終了
• Hono：ルーティング — パスと登録順
• Hono：テスト — app.requestと応答検査
• Hono：検証 — 実行時入力検証
• Hono：CORS — オリジンの制御
• Node server：オプション — hostnameオプション
• MDN：CORS — ブラウザーの別オリジンの制御