CLAUDE.md TypeScript Deno Fresh Frontend

Deno Fresh — CLAUDE.md

Deno FreshフルスタックフレームワークのCLAUDE.md。アイランド、SSR、Preactコンポーネント、Deno Deployのガイド。

CLAUDE.md · 76 lines
# Deno Fresh — CLAUDE.md

## Overview

Fresh is a next-generation web framework for Deno. Key features:
- Zero client-side JavaScript by default (Island Architecture).
- No build step — just-in-time rendering.
- File-based routing.
- Built on Preact for the component model.

## Project Structure

```
routes/          # File-based routes (.ts, .tsx)
  index.tsx      # Home page: GET /
  api/           # API routes (.ts)
islands/         # Client-side interactive components
components/      # Shared server-side components
static/          # Static assets
deno.json        # Deno config + import map
```

## Development

```bash
# Start dev server
deno task start

# Run tests
deno task test

# Type check
deno check **/*.ts
```

## Route Handlers

```typescript
// routes/api/users.ts
import { FreshContext } from "$fresh/server.ts";

export const handler = {
  async GET(req: Request, ctx: FreshContext) {
    const users = await db.users.findMany();
    return Response.json(users);
  },
  async POST(req: Request) {
    const body = await req.json();
    // handle creation
    return Response.json({ id: 1 }, { status: 201 });
  },
};
```

## Islands (Client-Side)

```typescript
// islands/Counter.tsx
import { useSignal } from "@preact/signals";

export default function Counter() {
  const count = useSignal(0);
  return (
    <button onClick={() => count.value++}>
      Count: {count}
    </button>
  );
}
```

## Deno-Specific Patterns

- Import maps in `deno.json` — no `node_modules`.
- `Deno.env.get()` for environment variables.
- Built-in TypeScript — no build step.
- Use JSR or `npm:` specifiers for packages.
Share on X

こちらもおすすめ

Frontend カテゴリの他のルール

もっとルールを探す

CLAUDE.md、.cursorrules、AGENTS.md、Image Prompts の全 223 ルールをチェック。