素敵なWebフレームワーク🔥Honoを紹介したい

by Yudai Jinno

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

© 2024 Classmethod, Inc. 自己紹介 3 簡単な自己紹介をさせていただきます。本日はどうかよろしくお願いいたします。名前神野雄大（Jinno Yudai）所属 classmethod株式会社 AWS事業本部コンサルティング部ソリューションアーキテクト資格 ● AWS Certiﬁcation x 13 ● Azure Solutions Architect Expert ● Google Cloud Professional Architect 好きなこと ● アプリケーション全体の設計・開発 ● IoT ● データ分析ブログはこのアイコンで書いています！

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

© 2024 Classmethod, Inc. Honoの紹介 6 Honoは2021年 Yusuke Wada氏が開発した軽量・高速なWebフレームワークで、またシンプルさを兼ね備えています。 🔥 Hono 軽量・高速言語仕様実行環境 Honoは最小限のAPIと最適化されたコードベースを持ち、エッジコンピューティング環境で驚異的な速度を実現。ファイルサイズも小さく、高速なロードと実行が可能。 TypeScriptをサポートしているHonoは、優れた型安全性と開発時のインテリジェンスを提供。またフロントエンドとバックエンドの統合も容易にします。 Honoは、Cloudﬂare Workers、Deno、Bun、Node.js等、多様な実行環境をサポートしています。一度書いたコードを様々なプラットフォームで再利用できる柔軟性が特徴です。

Slide 7

Slide 7 text

© 2024 Classmethod, Inc. 個人的に感じるHonoの魅力① 7 シンプルさが素敵です。4行のコードだけでWebサーバーとして機能します。 Honoの実行コード ● わずか4行コードを実装するだけでWebサーバーとして起動可能。（処理に関しては1行のみ！） ● 既存のWebフレームワークExpress.jsやNest.js に比べて記載がシンプル参照：https://hono.dev/

Slide 8

Slide 8 text

© 2024 Classmethod, Inc. Honoができるまでの今までの選択肢 8 今まではシンプルなCRUD処理を実装するならExpress、DIベースのフレームワークを使用したい際はnestJSを採用していました。既存フレームワーク Express 軽量なフレームワークで手軽に実装可能。ログや認証周りなどは別途ライブラリも活用する必要がある。手軽に検証する際によく活用していた。 TypeScriptベースでフルスタックなWebフレームワーク。Angular.jsと設計思想は似通っている。 DIベースや大規模な開発の際に使用を検討していた。

Slide 9

Slide 9 text

© 2024 Classmethod, Inc. Appendix.Expressとの対比 9 前提も違ったりで比較するのはナンセンスかもしれないですが、ExpressもシンプルですがHonoもシンプルで、デフォルトで認証やログ周りもサポートしているので使い勝手がいいなと感じます。 ExpressとHono Express 🔥 Hono ● シンプルなフレームワーク ● JavascriptベースでTypescriptは別途ライブラリをインストール ● ログや認証周りなども別途ライブラリをインストール ● シンプルなフレームワーク ● TypeScriptもサポート ● ログや認証周りなどもデフォルトである程度シンプルに実装可能 ● バリデーションやOpenAPI周りも3rd Partyのライブラリと連携豊富 ● フロントとバックエンドの統合もRPC機能で容易に実現可能

Slide 10

Slide 10 text

© 2024 Classmethod, Inc. 個人的に感じるHonoの魅力② 10 HonoはZodでリクエストの検証もサポートしていて、バリデーションチェックが簡単に可能です。 Validationのサンプル import { zValidator } from '@hono/zod-validator' import { z } from 'zod' app.get( '/hello', zValidator( 'query', z.object({ name: z.string(), }) ), (c) => { const { name } = c.req.valid('query') return c.json({ message: `Hello! ${name}`, }) } ) ● 左のコードはクエリパラメータnameが文字列形式で存在するか検証する例です。 ● query以外にも勿論jsonでBodyの中身を検証することも可能です ● app.get()関数の引数で定義することも可能ですし、検証スキーマを変数化して別ファイルで管理することももちろん可能です。 ● リクエスト送信時に検証し、検証失敗した場合はステータスコード400で、どこが検証失敗したフィールドか自動で返却してくれます。

Slide 11

Slide 11 text

© 2024 Classmethod, Inc. Appendix.リクエストの検証失敗時のレスポンス 11 リクエストの検証に失敗すると自動でレスポンスを400で返却してくれていい感じです。自前でエラーメッセージを実装することも勿論可能です。こういったエラーハンドリング周りを一括で設定できるのは嬉しいですよね。レスポンスの例 import { zValidator } from "@hono/zod-validator"; import { Hono } from "hono"; import { z } from "zod"; const app = new Hono(); const CreateTodoSchema = z.object({ title: z.string(), completed: z.boolean().optional().default(false), }); const route = app.post("/todo", zValidator("json", CreateTodoSchema), (c) => { return c.text("Todo Created"); }); export type AppType = typeof route export default app; bodyを空でリクエスト { "success": false, "error": { "issues": [ { "code": "invalid_type", "expected": "string", "received": "undefined", "path": [ "title" ], "message": "Required" } ], "name": "ZodError" } }

Slide 12

Slide 12 text

© 2024 Classmethod, Inc. 個人的に感じるHonoの魅力③ 12 HonoはOpenAPIドキュメント連携も可能で、API定義を記載したコードを元に OpenAPIドキュメントの作成も可能にします。 Open API定義書出力 const getAllTodosRoute = createRoute({ method: "get", path: "/", responses: { 200: { content: { "application/json": { schema: TodoSchema.array(), }, }, description: "List all todos", }, }, });

Slide 13

Slide 13 text

© 2024 Classmethod, Inc. 個人的に感じるHonoの魅力④ 13 Honoはバックエンドとフロントエンドの統一を容易にするRPC機能も備わっています。バックエンドの実装からフロントエンドにクライアントを作成し型補完まで効く素晴らしい機能です。（OpenAPI連携を実装した後に気がつきました・・・） RPC機能の紹介 import { zValidator } from "@hono/zod-validator"; import { Hono } from "hono"; import { z } from "zod"; const app = new Hono(); const CreateTodoSchema = z.object({ title: z.string(), completed: z.boolean().optional().default(false), }); const route = app.post("/todo", zValidator("json", CreateTodoSchema), (c) => { return c.text("Todo Created"); }); export type AppType = typeof route export default app; サーバー処理クライアント処理実装時定義した型の補完が表示されて、ミスが発生しづらい！！

Slide 14

Slide 14 text

© 2024 Classmethod, Inc. Appendix.OpenAPI定義書のメリット 14 バックエンド側でOpenAPI定義書を自動で作成できると、フロントエンド側でモックサーバーの作成や型定義を自動で作成できたり、型安全を考慮してリクエスト送信が可能になります。 OpenAPI定義書の連携例バックエンドエンジニア OpenAPI定義書出力フロントエンドエンジニア使用バックエンドモックサーバーソースコードサーバー起動自動生成

Slide 15

Slide 15 text

Slide 16

Slide 16 text

© 2024 Classmethod, Inc. 個人的に感じるHonoの魅力⑤ 16 Honoはログや認証などのMiddlewareも標準で備わっているので、複雑な要件がなければ簡単に実装できます。ログや認証周りの実装 import { basicAuth } from "hono/basic-auth"; import { logger } from "hono/logger"; import { OpenAPIHono } from "@hono/zod-openapi"; const app = new OpenAPIHono(); // ログの設定 app.use("*", logger()); // Basic認証の設定 app.use( "*", basicAuth({ username: "hono", password: "password", }) ); ● 左のコードはログの設定、Basic認証を有効化しています。 ● ログはリクエストの応答時間やパスなど詳細な情報がわかります。 ● Basic認証だけでなく、JWTやトークンでの認証も標準で備わっているので可能です ● 自作Middlewareの実装も簡単にできます。