SCALE — Build Lab
開発パターン · TYPESCRIPT PATTERN

Cloudflare KV キャッシュ

CATEGORY開発パターン TYPETypeScript Pattern EFFORT60〜180分 DIFFICULTY
PRIMARY CODE
ts
// Cloudflare KV キャッシュラッパー(TTL付)
type Env = { CACHE: KVNamespace };

export async function getCached<T>(
  env: Env,
  key: string,
  ttlSec: number,
  fetcher: () => Promise<T>
): Promise<T> {
  const cached = await env.CACHE.get(key, 'json');
  if (cached) return cached as T;
  const fresh = await fetcher();
  await env.CACHE.put(key, JSON.stringify(fresh), { expirationTtl: ttlSec });
  return fresh;
}

// 一括無効化(タグ方式)
export async function invalidateByPrefix(env: Env, prefix: string) {
  const list = await env.CACHE.list({ prefix });
  await Promise.all(list.keys.map((k) => env.CACHE.delete(k.name)));
}

// 使い方:
// const data = await getCached(env, 'user:123', 300, () => fetchUser(123));
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • ダッシュボードのデータキャッシュ

Cloudflare KV キャッシュ

:LiTarget: 用途

Cloudflare KV を使った高速キャッシュパターン。TTL管理含む。

:LiSparkle: 特徴

  • TTL管理
  • 型安全
  • バッチ取得

:LiCode: コード(コピペ用)

// Cloudflare KV キャッシュラッパー(TTL付)
type Env = { CACHE: KVNamespace };

export async function getCached<T>(
  env: Env,
  key: string,
  ttlSec: number,
  fetcher: () => Promise<T>
): Promise<T> {
  const cached = await env.CACHE.get(key, 'json');
  if (cached) return cached as T;
  const fresh = await fetcher();
  await env.CACHE.put(key, JSON.stringify(fresh), { expirationTtl: ttlSec });
  return fresh;
}

// 一括無効化(タグ方式)
export async function invalidateByPrefix(env: Env, prefix: string) {
  const list = await env.CACHE.list({ prefix });
  await Promise.all(list.keys.map((k) => env.CACHE.delete(k.name)));
}

// 使い方:
// const data = await getCached(env, 'user:123', 300, () => fetchUser(123));

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加