【Deno】Fresh + TypeScriptで高速なWEBサイトを作る方法

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

cd fresh-example
deno task start

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

export default function AboutPage() {
  return (
    <main>
      <h1>About Page</h1>
      <p>ここは概要ページです</p>
    </main>
  );
}

import { PageProps } from "$fresh/server.ts";

export default function ProfilePage({ params }: PageProps) {
  const { name } = params;

  return (
    <main>
      <h1>{name}さんのプロフィール</h1>
      <p>ここはプロフィールページです</p>
    </main>
  );
}

import { Handlers, PageProps } from "$fresh/server.ts";

type User = {
  id: string;
  name: string;
};

export const handler: Handlers<User> = {
  // GETアクセスされた時の処理
  GET(req, ctx) {
    // ページコンポーネントにデータを渡してレンダリングする
    return ctx.render({
      id: "@exampleuser",
      name: "Example User",
    });
  },
};

// コンポーネントはハンドラーからデータを受け取ることができる
export default function AboutPage({ data }: PageProps<User>) {
  return (
    <main>
      <h1>About Page</h1>
      <div>{data.name}</div>
      <div>{data.id}</div>
    </main>
  );
}

import { Handlers, PageProps } from "$fresh/server.ts";

type User = {
  id: string;
  name: string;
};

export const handler: Handlers<User> = {
  // GETアクセスされた時の処理
  GET(req) {
    const user: User = {
      id: "@exampleuser",
      name: "Example User",
    };

    // JSONに変換してレスポンスを返す
    return new Response(JSON.stringify(user), {
      headers: { "Content-Type": "application/json" },
    });
  },
};

{
  "id": "@exampleuser",
  "name": "Example User"
}

import { Handlers, PageProps } from "$fresh/server.ts";

type Repository = {
  total_count: number;
  items: RepositoryItem[];
};

type RepositoryItem = {
  id: number;
  full_name: string;
  description: string;
};

export const handler: Handlers<Repository | null> = {
  // GETアクセスされた時の処理
  GET(req, ctx) {
    return ctx.render(null);
  },
  // POSTアクセスされた時の処理
  async POST(req, ctx) {
    // フォームデータを取得する
    const form = await req.formData();
    const query = form.get("query") || "";

    // フォームデータを使用してAPIリクエストする
    const resp = await fetch(
      `https://api.github.com/search/repositories?q=${query}`,
    );
    if (resp.status !== 200) {
      return ctx.render(null);
    }
    const repo: Repository = await resp.json();

    // ページコンポーネントにデータを渡してレンダリングする
    return ctx.render(repo);
  },
};

export default function SearchPage({ data }: PageProps<Repository | null>) {
  // データがnullの場合は入力フォームを表示、それ以外は一覧を表示する
  return data == null
    ? (
      <main>
        <h1>Search Repository</h1>
        <form method="POST" action="/search">
          <input type="text" name="query" placeholder="検索キーワード" />
          <button type="submit">Search</button>
        </form>
      </main>
    )
    : (
      <main>
        <a href="/search">入力フォームへ戻る</a>
        <h1>Search Repository</h1>
        <p>Total: {data.total_count}</p>
        <div>
          {data.items.map((item) => (
            <div key={item.id}>
              <h2>{item.full_name}</h2>
              <div>{item.description}</div>
            </div>
          ))}
        </div>
      </main>
    );
}

import { MiddlewareHandlerContext } from "$fresh/server.ts";

export const handler = [
  async function addHeaderMiddleware(
    req: Request,
    ctx: MiddlewareHandlerContext,
  ) {
    const resp = await ctx.next();
    if (!req.headers.has("my-header")) {
      resp.headers.set("my-header", "my-value");
    }
    return resp;
  },
];

import { useEffect, useState } from "preact/hooks";

export default function SwitchButton() {
  const [value, setValue] = useState(false);
  const [label, setLabel] = useState("");

  useEffect(() => {
    const newLabel = value ? "Enabled" : "Disabled";
    setLabel(newLabel);
  }, [value]);

  return <button onClick={() => setValue((v) => !v)}>{label}</button>;
}

import SwitchButton from "../islands/SwitchButton.tsx";

export default function AboutPage() {
  return (
    <main>
      <h1>About Page</h1>
      <SwitchButton />
    </main>
  );
}

import { computed, signal } from '@preact/signals';

// Signalを作成する
const count = signal(0);

// Signalの値を変更する
count.value = 1;

// Signalの値を取得する
count.value;

// Signalの値を使用して新しい値を作る
const doubleCount = computed(() => {
  // Signalの値が変更される度に再計算された値を返す
  return count.value * 2;
});

import { computed, signal } from "@preact/signals";

export const todos = signal<string[]>([
  "JavaScriptを学習する",
  "TypeScriptを学習する",
  "ちょっと休憩する",
  "Denoを学習する",
  "Freshを学習する",
]);

export const filterValue = signal<string>("");

// Signalが変更される度にフィルタ済みのTODOリストが再計算される
export const filterdTodos = computed(() => {
  return todos.value.filter((todo) => todo.includes(filterValue.value));
});

import { useRef } from "preact/hooks";
import { filterValue } from "../util/TodoState.ts";

export default function FilterForm() {
  const valueRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (e: Event) => {
    e.preventDefault();
    if (valueRef.current?.value) {
      // Signalの値を変更する
      filterValue.value = valueRef.current.value;
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={valueRef} placeholder="キーワードで絞り込み" />
      <button type="submit">Submit</button>
    </form>
  );
}

import { filterdTodos } from "../util/TodoState.ts";

export default function TodoList() {
  return (
    <ul>
      {filterdTodos.value.map((todo) => <li key={todo}>{todo}</li>)}
    </ul>
  );
}

import FilterForm from "../islands/FilterForm.tsx";
import TodoList from "../islands/TodoList.tsx";

export default function TodoPage() {
  return (
    <main>
      <h1>Todo</h1>
      <FilterForm />
      <TodoList />
    </main>
  );
}