FreshとHonoでDeno KVを使い倒す

FreshとHonoを使ってDenoKVを使い倒す。

- Deno KV
- Deno cron
- Hono RPC/OpenAPI
- Tailwind CSS + DaisyUI
- Fresh x Hono

これらを使って、短い音声/音楽登録サービスを作ってみた。
知見と所感

Transcript

1. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. T O R A N O A N A L a b 2024 　Freshと Hono でDeno KVを使い倒す 2024/03/26 火曜DEV MEETING 虎の穴ラボ株式会社 奥谷 一陽
2. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 自己紹介 奥谷 一陽 所属：虎の穴ラボ株式会社 興味：Deno、TypeScript 最近買ったもの：除湿乾燥機 X：@okutann88 github：Octo8080X toranoana.deno 主催の1人です
3. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024
4. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Q. Deno 使ってますか？
5. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Q. Deno KV 使ってますか？
6. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 アジェンダ - やりたいこと - 発端 - 構成 - Deno KV をこう使った - 所感
7. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 やりたいこと

8. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 やりたいこと - Deno KV を実践投入 - Deno cronを実践投入 - Hono RPC/OpenAPIを素振り - Tailwind CSS + DaisyUI の素振り - Fresh x Hono を素振り
9. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 やりたいこと - Deno KV を実践投入 - Deno cronを実践投入 - Hono RPC/OpenAPIを素振り - Tailwind CSS + DaisyUI の素振り - Fresh x Hono を素振り これらを達成するために Fresh と Honoを使用した短い音データの保存サービスを作る
10. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 発端

11. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 発端1 Fresh x Hono のモチベーションUP - toranoana.deno にて、 LT「DenoとHonoでWebAuthnを使ったログインを実装する」を伺う https://speakerdeck.com/ayame113/denotohonodewebauthnwoshi-tutaroguinwoshi-zhuang-suru この中で、Fresh と Hono の組み合わせについて言及
12. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 発端1 Fresh x Hono のモチベーションUP - toranoana.deno にて、 LT「DenoとHonoでWebAuthnを使ったログインを実装する」を伺う https://speakerdeck.com/ayame113/denotohonodewebauthnwoshi-tutaroguinwoshi-zhuang-suru この中で、Fresh と Hono の組み合わせについて言及 => 試してみたい！
13. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 発端2 2023年のDeno 及び Deno Deployのサービス 新機能の実践投入 2023年 のDeno以下のような新機能/新サービスを導入 - Deno KV - Deno 内蔵 KVストア及びサービス - Deno Cron - Deno 内蔵ジョブスケジューラ及びサービス - Deno Queues(今回触りません) - Deno 内蔵メッセージキュー及びサービス
14. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 発端2 2023年のDeno 及び Deno Deployのサービス 新機能の実践投入 2023年 のDeno以下のような新機能/新サービスを導入 - Deno KV - Deno 内蔵 KVストア及びサービス - Deno Cron - Deno 内蔵ジョブスケジューラ及びサービス - Deno Queues(今回触りません) - Deno 内蔵メッセージキュー及びサービス ＝＞これら機能の実践投入してみたい！
15. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 構成

16. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 構成：アプリケーション - ランタイム　　　　 - Webフレームワーク - 関連ライブラリ - CSS フレームワーク - ストレージ/データベース　 - ジョブスケジューラ ：Deno 1.41 : Fresh 、Hono(RPC、OpenAPI) ：Preact、RecordRTC.js ：TailwindCSS + DaisyUI ：Deno KV ：Deno Cron
17. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 構成：各種リソース及びアクセス。 Deno Deployで提供されるものだけで、構成！ Deno KV Deno Cron Deno Deploy User App アクセス Push Deploy ストレージ スケジューラ
18. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 一旦アプリ紹介：Echo-Echo

19. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Echo-Echo Echo-Echo
20. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 デモ
 Echo-Echo
21. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 解説
 Echo-Echo
22. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 解説：Deno KV をこう使った - Deno KVは Key Value ストレージ - リレーション、where、join … は使えない => SQLとは考え方を切り替える必要がある - データは3種類 - 録音データ本体 - 録音データ情報 - データ削除用情報 Echo-Echo
23. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Deno KV をこう使った 録音データ - キー　：[“RECORDING_DATA”,”[ID]”,1] - データ：Uint8Array(Hogehoge~~ 録音データ情報 - キー　：[“RECORDING_INFO”,”[ID]”] - データ：{“titele”: “Test1”,”id”: “[ID]”, colorCode: “#ffffff”} リレーションがないので、なるべく1回の取得で必要な情報が取れるように構築 録音データと、録音データ情報のところで、同じIDを使うキーを使うのがポイント これらを一回のトランザクション(Deno KVではatomicと呼称)で処理する Echo-Echo
24. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 - 録音データと、録音データ情報 のところで、同じIDを使うキー を使うのがポイント - これらを一回のトランザクショ ン(Deno KVではatomicと呼称) で処理する Deno KV をこう使った Echo-Echo // utils/kvstorage.ts (一部省略) const splitArray = splitUint8Array(file); const date = new Date(); const id = ulid(date.getTime()); const createdAt = getFormatTime(date); const kv = await Deno.openKv(); const infoData = await kv.get([RECODING_INFO_KEY, id]); if (infoData.value) { throw new Error("Recording already exists");} const atomic = kv.atomic().check(infoData); for (let i = 0; i < splitArray.length; i++) { atomic.set([RECODING_DATA_KEY, id, i], splitArray[i]); } atomic.set([RECODING_INFO_KEY, id], { title, id, createdAt, colorCode: randomcolor({ luminosity: "light" }), }); atomic.set([RECODING_CREATED_AT_KEY,createdAt.slice(0, 10),id], 0); const result = await atomic.commit(); if (!result.ok) {throw new Error("Failed to save recording data");} kv.close();
25. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Deno KV をこう使った データ削除用情報 - キー　：[“RECORDING_CREATED_AT”,”2024-03-27” ”[ID]”] - データ：0 データを1週間経過したタイミングで削除するために作成する SQLのwhereのように、キー以外のデータでは検索できない ＝＞ 日付を使用したキーを設定し範囲内のIDを逆引き？するような形態にする キー全体のユニーク性は、単独でユニークなIDを付与して担保する。 // utils/kvstorage.ts const RECODING_CREATED_AT_KEY = "recording_created_at" as const; const kv = await Deno.openKv(); const results = await kv.list<string>({ start: [RECODING_CREATED_AT_KEY, "0000-00-00"], end: [RECODING_CREATED_AT_KEY, "2024-03-26"], }); // => 2024-03-25 までのデータを全て引き当てられる [“recording_created_at”, “2024-03-25”, “hogehoge”] のようなデータを含む Echo-Echo
26. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 - FreshのディレクトリルーティングベースでのAPI構築も悪くないが、 ボイラープレートのように同じようなものを複数書くことは多い Honoを入れてあげるとスッキリ書きやすくなるように思う。 - アプリケーション全体のミドルウェアはFreshで担保し、 APIに関するミドルウェアはHonoで担保させるということも簡単だった。 - Freshのミドルウェアの中でHonoに部分的に応答させることもできる。 - 1アプリの中でhonoのインスタンスは複数あってもいい！ 所感：Hono(RPC、openAPI) Echo-Echo
27. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 - Freshのミドルウェアの中でHonoに部分的に応答させることもできる。 - 1アプリの中でhonoは複数あってもいい！ 所感：Hono(RPC、openAPI) Echo-Echo // ミドルウェアの中に Honoを埋め込むケース // middlewares/hono_swagger_ui.ts import { FreshContext } from "$fresh/server.ts"; import { Hono } from "$hono/mod.ts"; import { swaggerUI } from "@hono/swagger-ui"; import { CONSTS } from "../utils/consts.ts"; // OpenAPI Documentation swaggerUI for development const app = new Hono(); app.get("/ui", swaggerUI({ url: "http://localhost:8000/api/doc" })); export async function swaggerUiHandler( req: Request, ctx: FreshContext, ) { if (CONSTS.APP_ENV === undefined || CONSTS.APP_ENV === "development") { if (new URLPattern(req.url).pathname === "/ui") { return app.fetch(req); } } return await ctx.next(); }
28. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 - Deno KVは、 RDB脳からのスイッチは必要、そこだけ注意すればかなり使える - Deno Cronが導入され、以前は外部で用意していた定期実行タスクの実装が楽 - TailwindCSS + Daisy UI 全体に使いやすかった - ＝＞これのおかげで、開発/実装期間がだいぶ圧縮できた - 他のTailwind CSS プラグイン/非プラグインのライブラリも有効そう - Freshに限定していうならCSSだけ(React/コンポーネントではない)もの の導入がはるかに楽(または、そうでないと使えないかも) 所感：そのほか今回の構成でよかったこと Echo-Echo
29. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 まとめ - Deno KV、Deno Cronを使ってアプリケーションを開発 ＝＞有効に使えた そして現状0円で運用できている - Tailwind CSS + Daisy UI 非常に体験がいい ＝＞他の選択肢を選ぶ理由がなければ、また採用したい - ぜひ、Echo-Echo で遊んでみて - ぜひ、Deno/Deno KV/Deno Cron を触ってみて
30. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 Echo-Echo はソースコードを公開しています。プルリク歓迎！ https://github.com/Octo8080X/Echo-Echo ここに画像
31. Copyright (C) 2023 Toranoana Lab Inc. All Rights Reserved. 2024 ありがとうございました