Deno Fresh の現在

>100 Views

March 24, 26

#deno #fresh

スライド概要

2026-03-24 v-tokyo Meetup #24
https://vuejs-meetup.connpass.com/event/385025/

Fresh(https://fresh.deno.dev/)についての紹介、
FreshでのIslands Architecture
Freshの使い方

とらのあなラボ

@toranoana_lab

スライド一覧

虎の穴ラボ株式会社は、主にとらのあな関連サービスのシステム開発を専門に担う、エンジニアの会社です。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

前向きに仕様を調整する「準備」

とらのあなラボ 6.3K

Deno でやるフロントエンド

deno typescript javascript

とらのあなラボ 4.6K

高アクセスとコストを踏まえたレコメンド機能の実装について

lambda aws

とらのあなラボ 1.8K

Fresh 2 のミドルウェアを触ってみる

deno typescript fresh

とらのあなラボ 1.7K

DenoでCLIアプリを作る ~ 虎の穴ラボでの利用例を添えて ~

deno typescript javascript

とらのあなラボ 1.3K

[20250314_toranoana.deno#20]_Denoの実プロダクト採用へ向けた取り組み

とらのあなラボ 1.1K

各ページのテキスト

https://fresh.deno.dev/

Fresh の現在 - 来歴から - 2022 年 6月 14日 : First Commit - 2022 年 6月 28日 : Fresh 1.0 登場 - Preact 採用 - この時点で Islands architecture を導入済み - 2023 年 6月 15日 : Fresh 1.2発表 - メインメンテナーが、 Luca Casonato氏から、 Marvin Hagemeister 氏へ交代 - Marvin Hagemeister 氏は、 Preactのメンテナー Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.

10.

Fresh の現在 - 来歴から - 2024 年 3月 15日 : The road to Fresh 2.0 公開 - ある種の 0->1のやり直し宣言 - 2025 年 9月 10日 : Fresh 2.0 登場 - Vite 基盤の上で動く FWに変貌 - HMR(Hot module reloading)の導入 - ミドルウェア周りは、 Express、Hono っぽい(極めて主観 )に変わった。 Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.

11.

12.

[beta]

ハイドレーションされる前のレスポンス平文 (抜粋)
<body>
<div class="px-4 py-8 mx-auto fresh-gradient min-h-screen">
<div
class="max-w-screen-md mx-auto ﬂex ﬂex-col items-center justify-center"
>
<!--frsh:island:Counter:0:-->
<div class="ﬂex gap-8 py-6">
<button id="decrement" class="px-2 py-1 border-gray-500 border-2 rounded-sm bg-white hover:bg-gray-200 transition-colors">
-1
</button>
<p class="text-3xl tabular-nums">3</p>
<button id="increment" class="px-2 py-1 border-gray-500 border-2 rounded-sm bg-white hover:bg-gray-200 transition-colors" >
+1
</button>
</div>
<!--/frsh:island-->
</div>
</div>
<script type="module" nonce="14e764dfa2894c5b9714e9a43910eb7a">
import { boot } from "/assets/client-entry-DidaFX42.js";
import Counter from "/assets/fresh-island__Counter-B2qLLSyD.js";
boot({
Counter,
}, '[[1],{"slots":2,"props":3},[],{"count":4},["Signal",5],3]');
</script>
</body>

Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.

13.

[beta]

ハイドレーションされた後 (抜粋)
<body>
<div class="px-4 py-8 mx-auto fresh-gradient min-h-screen">
<div
class="max-w-screen-md mx-auto ﬂex ﬂex-col items-center justify-center"
>
<div class="ﬂex gap-8 py-6">
<button id="decrement" class="px-2 py-1 border-gray-500 border-2 rounded-sm bg-white hover:bg-gray-200 transition-colors">
-1
</button>
<p class="text-3xl tabular-nums">3</p>
<button id="increment" class="px-2 py-1 border-gray-500 border-2 rounded-sm bg-white hover:bg-gray-200 transition-colors">
+1
</button>
</div>
</div>
</div>
<script type="module" nonce="14e764dfa2894c5b9714e9a43910eb7a">
import { boot } from "/assets/client-entry-DidaFX42.js";
import Counter from "/assets/fresh-island__Counter-B2qLLSyD.js";
boot(
{ Counter },
'[[1],{"slots":2,"props":3},[],{"count":4},["Signal",5],3]',
);
</script>
</body>

Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.

14.

IslandsとSignals - Island 同士は原則独立した世界です。それゆえ、状態共有は少々難しい。 - Preactは、Signalを提供しています。特にPreactのSignalとは親和性が高いものになっています。 - propsとしてSignalを渡せるように 1.2で改修された過去もあるくらいに、「Fresh Islands Love Signals.」と言っても過言ではないでしょう。 Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.

15.

[beta]

Islands呼び出し側からの、 Signalを渡す。
// routes/signal_demo.tsx
import { useSignal } from "@preact/signals";
import { deﬁne } from "../utils.ts";
import Counter from "../islands/Counter.tsx";
export default deﬁne.page(function Home(ctx) {
const count = useSignal(3);
console.log("Shared value " + ctx.state.shared);
return (
<div class="px-4 py-8 mx-auto fresh-gradient min-h-screen">
<div class="max-w-screen-md mx-auto ﬂex ﬂex-col items-center justify-center">
<Counter count={count} />
<Counter count={count} />
</div>
</div>
);
});

Islandsの間で値の共有のための storeのようなものを置く必要がなく、
何に依存し値が共有されているのか？を定義と合わせて一意に定められる。
Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.

16.

17.

18.

https://fresh.deno.dev/showcase

19.

https://deno-fest-2023.deno.dev/

20.

https://thoth-doc.deno.dev/

21.

https://pile-up.deno.dev/

22.

https://deno-sandbox-api-test.octo8080x.deno.net/

23.

まとめ - Fresh は、Deno のWeb アプリケーションフレームワーク - Islands Architecture - Preact - Vite - Islands Architecture のIsland 間の連携が容易な仕組みを持つ - Freshは、何に使ってもいい Copyright (C) 2025 Toranoana Lab Inc. All Rights Reserved.

24.

25.