Hono.js：次世代Node.jsフレームワーク

Honoを学ぶ理由

Node.js向けのバックエンドライブラリとフレームワークはすでに市場にたくさんあります。私は以前、いくつかの小さなプロジェクトでNest.jsを使用したことがあります。Nest.jsは包括的な機能を持ち、迅速なプロジェクト実装を可能します。しかし、私の小さなプロジェクトでは、その機能の多くが本当に過剰であり、カプセル化のレベルが高く、コードを書く際の自由度がほとんどありません。

偶然、オンラインでHonoに出会いました。そのドキュメントを読んだ後：

超高速🚀 - router RegExpRouterは本当に高速です。線形ループを使用しません。とにかく速いです。
軽量🪶 - hono/tinyプリセットは12kB未満です。Honoは依存関係がなく、Web標準APIのみを使用します。
マルチランタイム🌍 - Cloudflare Workers、Fastly Compute@Edge、Deno、Bun、Lagon、AWS Lambda、またはNode.jsで動作します。同じコードがすべてのプラットフォームで実行されます。
有能🔋 - Honoには、組み込みミドルウェア、カスタムミドルウェア、サードパーティミドルウェア、およびヘルパーが付属しています。すべてが含まれています。
快適なDX 🛠️ - 非常にクリーンなAPIと優れたTypeScriptサポートがあります。今、私たちは「型」を持っています。

ユースケース

Honoは、Expressに似たシンプルなWebアプリケーションフレームワークですが、フロントエンドはありません。ミドルウェアと組み合わせることで、より大規模なアプリケーションを構築できます。以下にユースケースの例をいくつか示します。

Webインターフェースの構築
バックエンドサーバープロキシ
CDNフロントエンド
エッジアプリケーション
ライブラリ用の基本サーバー
フルスタックアプリケーション

素晴らしい、学習を開始しましょう。

Hello World

https://hono.dev/docs/getting-started/basic

portを設定することで、ポートを変更できます。

import { Hono } from 'hono';

const app = new Hono();

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

export default app;

実行するには：

npm run dev

アクセスするには：http://localhost:8787

ルート

HTTPメソッド

app.get('/', (c) => c.text('GET /'));
app.post('/', (c) => c.text('POST /'));
app.put('/', (c) => c.text('PUT /'));
app.delete('/', (c) => c.text('DELETE /'));

階層的ルート

const apiRoutes = app
   .basePath("/api")
   .route("/expenses", route1)
   .route("/", route2);

前のbasePath("/api")は、すべてのルートに/apiプレフィックスを追加します。

export const route1 = new Hono()
   .post("/", async (c) => {
        return c.json({ });
    });

上記のルートには、http://localhost:8787/api/expensesからアクセスできます。

リクエスト

リクエストパラメータとクエリの取得

app.get('/posts/:id', (c) => {
    const page = c.req.query('page');
    const id = c.req.param('id');
    return c.text(`You want see ${page} of ${id}`);
});

結果を表示：http://localhost:8787/posts/1?page=12

リクエストボディのコンテンツを取得する

app.put("/posts/:id{[0-9]+}", async (c) => {
    const data = await c.req.json();
    return c.json(data);
});

レスポンス

text()の他に、json()、html()、notFound()、redirect()などの多くのメソッドがあり、リクエストが異なる型のデータを返すようにすることができます。html()はJSXを直接返すことができます。

JSX

import type { FC } from 'hono/jsx';

const app = new Hono();

const Layout: FC = (props) => {
    return (
        <html>
            <body>{props.children}</body>
        </html>
    );
};

const Top: FC<{ messages: string[] }> = (props: {
    messages: string[]
}) => {
    return (HTTP Methods
        <Layout>
            <h1>Hello Hono!</h1>
            <ul>
                {props.messages.map((message) => {
                    return <li>{message}!!</li>;
                })}
            </ul>
        </Layout>
    );
};

app.get('/', (c) => {
    const messages = ['Good Morning', 'Good Evening', 'Good Night'];
    return c.html(<Top messages={messages} />);
});

export default app;

ファイル拡張子を.tsxに変更するだけで、JSXを直接記述できます。非常にReactに似ています。

バリデーター

バリデーターは、zodと@hono/zod-validatorを介して実装され、クライアントから送信されたリクエストが指定されたデータ形式に準拠しているかどうかを確認します。 インストール：yarn add zod @hono/zod-validator たとえば、リクエストで、クライアントから送信されたデータ形式が次のようになっていることを確認する必要がある場合： account: string; password: string

import { z } from "zod";
import { zValidator } from "@hono/zod-validator";

const loginSchema = z.object({
    account: z.string(),
    password: z.string(),
});

app.post("/login", zValidator("json", loginSchema), async (c) => {
    // do something
    const user = c.req.valid("json");
    return c.json({ });
});

詳細については、zodのドキュメントを参照してください。また、IDEはuserの型ヒントを直接表示できます。

Leapcell：Nodejsホスティング用の高度なサーバーレスプラットフォーム

最後に、Honoアプリのデプロイに非常に適したプラットフォームであるLeapcellを紹介します。

Leapcellは、次の特性を持つサーバーレスプラットフォームです。

多言語サポート
- JavaScript、Python、Go、またはRustで開発します。
無制限のプロジェクトを無料でデプロイ
- 使用量に対してのみ支払い - リクエストなし、料金なし。
比類のないコスト効率
- アイドル料金なしの従量課金制。
- 例：25ドルで、平均応答時間60msで694万リクエストをサポートします。
合理化された開発者エクスペリエンス
- 簡単なセットアップのための直感的なUI。
- 完全に自動化されたCI / CDパイプラインとGitOps統合。
- 実行可能な洞察のためのリアルタイムのメトリックとロギング。
容易なスケーラビリティと高性能
- 高い同時実行性を容易に処理するための自動スケーリング。
- 運用オーバーヘッドゼロ - 構築に集中するだけです。