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

midosuji tech #2で発表した「素敵なWebフレームワークHonoを紹介したい」の発表資料です

Transcript

1. © 2024 Classmethod, Inc. Midosuji Tech #2 9/11（水） 素敵なWebフレームワーク 🔥Honoを紹介したい クラスメソッド株式会社 AWS事業本部コンサルティング部 神野 雄大（Jinno Yudai）
2. © 2024 Classmethod, Inc. Agenda 2 1. 自己紹介 2. Honoの紹介 3. Honoの体験
3. © 2024 Classmethod, Inc. 自己紹介 3 簡単な自己紹介をさせていただきます。本日はどうかよろしくお願いいたします。 名前 神野 雄大（Jinno Yudai） 所属 classmethod株式会社 AWS事業本部 コンサルティング部 ソリューションアーキテクト 資格 • AWS Certification x 13 • Azure Solutions Architect Expert • Google Cloud Professional Architect 好きな こと • アプリケーション全体の設計・開発 • IoT • データ分析 ブログはこのアイコンで書いています！
4. © 2024 Classmethod, Inc. Agenda 4 1. 自己紹介 2. Honoの紹介 3. Honoの体験
5. © 2024 Classmethod, Inc. 🔥 Hono 5 🔥 Honoと聞いて何を思い浮かべますか？？ 炎？？焚き火？？ 実は素敵なHonoといった名前のWebフレームワークが存在するんです
6. © 2024 Classmethod, Inc. Honoの紹介 6 Honoは2021年 Yusuke Wada氏が開発した軽量・高速なWebフレームワークで、またシ ンプルさを兼ね備えています。 🔥 Hono 軽量・高速 言語仕様 実行環境 Honoは最小限のAPIと最適化されたコードベースを持ち、エッジコ ンピューティング環境で驚異的な速度を実現。ファイルサイズも小 さく、高速なロードと実行が可能。 TypeScriptをサポートしているHonoは、優れた型安全性と開発時 のインテリジェンスを提供。またフロントエンドとバックエンドの 統合も容易にします。 Honoは、Cloudflare Workers、Deno、Bun、Node.js等、多様な 実行環境をサポートしています。一度書いたコードを様々なプラッ トフォームで再利用できる柔軟性が特徴です。
7. © 2024 Classmethod, Inc. 個人的に感じるHonoの魅力① 7 シンプルさが素敵です。4行のコードだけでWebサーバーとして機能します。 Honoの実行コード • わずか4行コードを実装するだけでWebサーバー として起動可能。（処理に関しては1行のみ！） • 既存のWebフレームワークExpress.jsやNest.js に比べて記載がシンプル 参照：https://hono.dev/
8. © 2024 Classmethod, Inc. Honoができるまでの今までの選択肢 8 今まではシンプルなCRUD処理を実装するならExpress、DIベースのフレームワーク を使用したい際はnestJSを採用していました。 既存フレームワーク Express 軽量なフレームワークで手軽に実装可能。ログや 認証周りなどは別途ライブラリも活用する必要が ある。手軽に検証する際によく活用していた。 TypeScriptベースでフルスタックなWebフレームワー ク。Angular.jsと設計思想は似通っている。 DIベースや大規模な開発の際に使用を検討していた。
9. © 2024 Classmethod, Inc. Appendix.Expressとの対比 9 前提も違ったりで比較するのはナンセンスかもしれないですが、Expressもシンプル ですがHonoもシンプルで、デフォルトで認証やログ周りもサポートしているので使 い勝手がいいなと感じます。 ExpressとHono Express 🔥 Hono • シンプルなフレームワーク • JavascriptベースでTypescriptは別途ライブラ リをインストール • ログや認証周りなども別途ライブラリをインス トール • シンプルなフレームワーク • TypeScriptもサポート • ログや認証周りなどもデフォルトである程度シ ンプルに実装可能 • バリデーションやOpenAPI周りも3rd Partyの ライブラリと連携豊富 • フロントとバックエンドの統合もRPC機能で容 易に実現可能
10. © 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で、どこが検証失敗した フィールドか自動で返却してくれます。
11. © 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" } }
12. © 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", }, }, });
13. © 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; サーバー処理 クライアント処理実装時 定義した型の補完が表示されて、ミ スが発生しづらい！！
14. © 2024 Classmethod, Inc. Appendix.OpenAPI定義書のメリット 14 バックエンド側でOpenAPI定義書を自動で作成できると、フロントエンド側でモッ クサーバーの作成や型定義を自動で作成できたり、型安全を考慮してリクエスト送信 が可能になります。 OpenAPI定義書の連携例 バックエンド エンジニア OpenAPI定義書 出力 フロントエンド エンジニア 使用 バックエンド モックサーバー ソースコード サーバー 起動 自動生成
15. © 2024 Classmethod, Inc. Appendix.RPCの強み 15 小規模な開発なら、RPC機能を活かしてフロントバックエンドともに同コードベース でフロント・バックエンドの統合が容易だなと感じています。 RPC機能の連携イメージ バックエンド エンジニア フロントエンド エンジニア コードベース バックエンド処理 実装 フロントエンド処理 実装 RPC連携
16. © 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の実装も簡単にできます。
17. © 2024 Classmethod, Inc. 個人的に感じるHonoの魅力⑥ 17 Honoは多様な実行環境をサポートしているため、デプロイ先の選択肢も豊富です。 また公式ドキュメントにデプロイ方法など説明があるのも素敵です。 デプロイ環境の豊富さ 🔥 Hono AWS Lambda Azure Functions Etc・・・
18. © 2024 Classmethod, Inc. Agenda 18 1. 自己紹介 2. Honoの紹介 3. Honoの体験
19. © 2024 Classmethod, Inc. 作成した環境 19 実際に下記構成で簡易的なバックエンドAPIをCDKで作成しました。Honoの実行環境 としてLambdaを選択し、CloudFront経由で配信します。 （全てTypeScriptで書けて神・・・！！！！） サンプルのシステム構成図 OACを設定し、CloudFront経由での みアクセス可能とする cdk deploy
20. © 2024 Classmethod, Inc. 動作確認 20 実際に動かして今まで紹介した機能を紹介します！
21. © 2024 Classmethod, Inc. おわりに 21 Honoはいかがだったでしょうか？少しでも魅力 が伝わったら幸いです！ ご清聴ありがとうございましたー！！🔥
22. © 2024 Classmethod, Inc.