Fresh と Deno KV で超速プロダクト開発

Sep 28th, 2023 typescript deno fresh

所感

Fresh とは

Deno の Web フレームワーク．今回は詳しく触れないが，簡単な Web アプリケーションを実装するには十分な機能がある．

Deno KV とは

Deno で使用できる key-value ストレージ．ローカルで実行する場合は Deno KV は SQLite で動作し，アプリケーションを Deno Deploy にデプロイすると Deno KVデータベースは自動的に FoundationDB によって動作する．詳しくはドキュメントとブログ参照．

Deno KV is a key-value database built directly into the Deno runtime, available in the Deno.Kv namespace. It can be used for many kinds of data storage use cases, but excels at storing simple data structures that benefit from very fast reads and writes. Deno KV is available in the Deno CLI and on Deno Deploy.

実装

実装したソースコード全体は https://github.com/taroosg/fresh-kv．

Fresh でプロジェクトを作成するには下記コマンドを実行する．

deno run -A -r https://fresh.deno.dev

プロジェクトができたら，deno.json を編集する．Deno KV はベータ版（2023 年 9 月時点）であるため，アプリケーション実行時に --unstable オプションを付与する必要がある．

下記のように，"tasks" の "start" 部分に --unstable を追加する．該当部分以外は操作しないため省略．

{
  "lock": false,
  "tasks": {
    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
    "start": "deno run -A --watch=static/,routes/ --unstable dev.ts",
    "build": "deno run -A dev.ts build",
    "preview": "deno run -A main.ts",
    "update": "deno run -A -r https://fresh.deno.dev/update ."
  },
  ...
}

あとは index.tsx などに Deno KV を使用するためのコードを記述すればOK．今回は例として Twitter のような投稿アプリケーションを実装してみた．

例えば，Deno KV に接続するには以下のようなコードを記述する．

const kv = await Deno.openKv();

Deno KV に接続したらデータの作成と参照を行ってみる．フォームから受け取ったデータを取り出し，Deno KV に保存するには以下のような記述となる．今回は key として tweets とタイムスタンプを指定している．

// フォームデータの受取と取り出し
const formData = await req.formData();
const name = formData.get("name")?.toString();
const tweet = formData.get("tweet")?.toString();
// 登録処理
const kv = await Deno.openKv();
await kv.set(["tweets", Date.now()], {
  tweet,
  name,
});

続いて，データの参照は以下のようになる．key で tweets を指定し，100 件のデータを取得している．

const iter = await kv.list({ prefix: ["tweets"] }, { limit: 100 });
const tweets = [];
for await (const res of iter) {
  tweets.unshift(res.value);
}

作成したコードを動かすと Deno KV にデータが保存される．取り出したデータは下記のような形となっている．

[
  { tweet: "おまえは今まで食ったパンの枚数をおぼえているのか?", name: "ディオ" },
  { tweet: "君が", name: "ジョナサン" },
  { tweet: "泣くまで", name: "ジョナサン" },
  { tweet: "殴るのをやめないッ！", name: "ジョナサン" },
  { tweet: "wryyy", name: "ディオ" }
]

本番環境

Deno Deploy を使用してアプリケーションの GitHub リポジトリを連携させる．以上だッ！

Deno Deploy

何を言ってるのかわからないと思うが DB の設定など何も行わなくても本番環境で Deno KV が使用できる．Deno Deploy の管理画面では 「KV」のタブがあり，データが保存されている場合にはデータの検索や確認ができる．

まとめ