Honoって何？ 高速性・軽量性に優れたWebフレームワーク❤️‍🔥

## はじめに
Web標準に基づいた、小型でシンプル & 高速なWebフレームワーク`Hono（ホノ）`。

最近アサインとなった新規プロジェクトでWebフレームワークとして採用されているということで、軽く調べた内容を記録します。

![ChatGPT Image 2025年5月19日 00_29_32 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3427082/f969a07f-fe1d-4cae-a3fe-0ed5bb8f89a0.png)


## 目次

1. [Honoって何？](#-honoって何)
2. [Honoの主な特徴](#-honoの主な特徴)
3. [Honoを使うメリット](#-honoを使うメリット)
4. [基本的な使い方](#-基本的な使い方)
5. [サンプルコード：ルーティング](#-サンプルコードルーティング)
6. [サンプルコード：ミドルウェア](#-サンプルコードミドルウェア)
7. [まとめ](#-まとめ)
8. [参考文献](#-参考文献)

## 🪄 Honoって何？

Honoは、Web標準の技術（主にFetch API）をベースにした、小さくて、速くて、使いやすいWebフレームワークです。
まるで「炎（ほのお）」のように、あなたのWebアプリケーションを素早く立ち上げ、パワフルに動かすことができる。由来があるとかないとか...

## 🪄 Honoの主な特徴
### 超高速
独自のルーティングエンジンが非常に高速で、たくさんのリクエストを効率的に処理できます。
### 軽量
フレームワーク自体のサイズが非常に小さいので、アプリケーションの起動も速く、リソースの使用量も抑えられます。
### マルチプラットフォーム
Cloudflare Workers、Deno、Node.jsなど、様々な環境で動かすことができます。これは、Web標準のAPIを使っているおかげです。
### シンプルなAPI
学習コストが低く、直感的にコードを書くことができます。
### 豊富な機能
ルーティング、ミドルウェア、テンプレートエンジン、JSONレスポンスなど、Webアプリケーション開発に必要な基本的な機能が揃っています。
### TypeScriptフレンドリー
TypeScriptとの相性が抜群で、型安全な開発が可能です。

## 🪄 Honoを使うメリット
### パフォーマンス重視
高速なレスポンスが求められるAPIやWebサイトを構築したい場合に最適です。
### エッジコンピューティング
Cloudflare Workersなどのエッジ環境で効率的に動作させたい場合に強みを発揮します。
### シンプルな構成
大規模なフレームワークほど多くの機能を必要としない、小規模なAPIやWebサイトを開発したい場合に便利です。
### モダンな開発
最新のJavaScriptの機能やWeb標準のAPIを活用したい開発者にとって魅力的です。

## 🪄 基本的な使い方
まずは、Honoの基本的な使い方を見てみましょう。**Node.js環境が必要**です。
### 1. プロジェクトの作成とHonoのインストール
```bash
mkdir hono-app
cd hono-app
npm init -y
npm install hono
```

### 2. index.js ファイルの作成
以下のコードを `index.js` ファイルに記述します。
```bash
const { Hono } = require('hono');

const app = new Hono();

app.get('/', (c) => {
  return c.text('Hello Hono!');
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});
```
* `const { Hono } = require('hono');`
Honoのクラスをインポート
* `const app = new Hono();`
Honoのインスタンスを作成 = これがアプリケーションの本体
* `app.get('/', (c) => { ... });`
GETリクエストに対するルートを定義
  * `'/'`
ルートパス（ここではトップページ）。
  * `(c) => { ... }`
リクエストを処理するハンドラー関数。
`c` は Contextオブジェクトで、リクエストやレスポンスに関する情報を持っています。
  * `return c.text('Hello Hono!');`
テキスト形式のレスポンスを返しています。
`c.text()` は、`Content-Type`が `text/plain` のレスポンスを生成します。
* `app.listen(3000, () => { ... });`
サーバーをポート3000で起動し、起動時にコンソールにメッセージを表示

### 3.サーバーの起動
```bash
node index.js
```
ブラウザで http://localhost:3000 にアクセスすると、「Hello Hono!」と表示されます。

## 🪄 サンプルコード：ルーティング
Honoでは、HTTPメソッド（GET、POST、PUT、DELETEなど）とパスを組み合わせて、様々なURLへのリクエストを処理できます。
```js
app.get('/users/:id', (c) => {
  const id = c.req.param('id');
  return c.json({ message: `User ID: ${id}` });
});

app.post('/items', async (c) => {
  const body = await c.req.json();
  return c.json({ received: body });
});
```
* `app.get('/users/:id', ...)`
`/users/` に続く任意の文字列を `id` パラメータとして受け取ります。`c.req.param('id')` で取得できます。
* `app.post('/items', ...)`
`/items` へのPOSTリクエストを処理します。
`c.req.json()` でリクエストボディをJSONとして取得できます。
* `c.json({ ... })`
JSON形式のレスポンスを返します。
`Content-Type`は `application/json` に設定されます。

## 🪄 サンプルコード：ミドルウェア
ミドルウェアは、リクエストとレスポンスの間に処理を挟むための仕組みです。認証、ロギング、CORS設定など、複数のルートで共通の処理を行いたい場合に便利です。
```js
// グローバルミドルウェア
app.use(async (c, next) => {
  console.log('リクエストがありました');
  await next(); // 次のミドルウェアまたはハンドラーを実行
  console.log('レスポンスを送信します');
});

// 特定のルートに適用するミドルウェア
const authMiddleware = async (c, next) => {
  const token = c.req.headers.get('Authorization');
  if (!token) {
    return c.text('Unauthorized', 401);
  }
  // 認証処理...
  await next();
};

app.get('/protected', authMiddleware, (c) => {
  return c.text('Protected resource');
});
```
* `app.use(...)`
グローバルに適用されるミドルウェアを登録
* ルート定義時にミドルウェア関数を渡すことで、特定のルートにのみ適用
* ミドルウェア関数は、Contextオブジェクト `c` と `next` 関数を受け取ります。
`next()` を呼び出すことで、次のミドルウェアまたはルートハンドラーが実行されます。

## 🪄 その他の機能
Honoには、他にも以下のような便利な機能があります。
### テンプレートエンジン
EJSやJSXなどを利用して、動的なHTMLを生成できます。
### 静的ファイル配信
CSS、JavaScript、画像などの静的ファイルを簡単に配信できます。
### リダイレクト
別のURLへリダイレクトする処理も簡単です。
### クッキーとセッション
クッキーの操作やセッション管理もサポートしています。

## 🎉 まとめ
* Honoは、高速性、軽量性、そして開発のしやすさを兼ね備えた、モダンなWebフレームワーク
* 特に、パフォーマンスが重要なAPI開発や、エッジコンピューティング環境でのアプリケーション開発において、その力を発揮します。

## 💫 参考文献
* [Hono](https://hono.dev/)