【Qiita Night】Denoからリリースされた最新フレームワーク Fresh を触ってみた

## 概要

2022/10/21(金)に行われた「[Qiita Night～フロントエンド～](https://increments.connpass.com/event/261907/)」にて、「**Denoからリリースされた最新フレームワーク Fresh を触ってみた**」という登壇をさせていただきました！
本投稿は登壇内容を記事化したものになります！

スライドはこちら:point_down:

https://speakerdeck.com/takusan64/denokararirisusaretazui-xin-huremuwaku-fresh-wohong-tutemita

アーカイブはこちら:point_down:

https://youtu.be/l5732agEqD8?t=2111

## 登壇内容

「Denoってなに？」「Denoは知っているけど、Fresh？」みたいな人に、最新Webフレームワーク「**Fresh**」を知ってもらえるきっかけになればと思います！

### そもそもDenoとは
![スクリーンショット 2022-10-24 19.07.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/c48f97b8-2519-d0c9-05ac-4705984054a4.png)
- Node.jsの開発者である**Ryan Dahl**が新しく開発した JavaScript/TypeScriptの実行環境
- Nodeを作った時の改善点を取り入れて再作成したため、さまざまな機能が標準で搭載されている
    - TypeScriptのデフォルトサポート
    - Promiseファースト
    - ESModuleのサポート
      などなど...
- ~~これまでNodeで利用していたNPMのモジュールシステムは利用できず、Deno独自のモジュールシステムを利用して開発を行う~~
    - これは8月末に大幅な方向転換が発表されました。
    - [Denoが大幅な方針変更を発表。3カ月以内にnpmパッケージへの対応を実現](https://www.publickey1.jp/blog/22/deno3npmjavascripthttp.html)

Denoの公式トップページにまとめられています。

https://deno.land/

### Deno 公式より「Fresh」ver1.0 がリリース
![スクリーンショット 2022-10-24 19.09.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/1a8ea676-822d-e07f-4c09-0f1ef47339a1.png)
- Deno自体には他のWebフレームワークが存在していたが、今回**Deno公式**からWebフレームワーク「**Fresh**」がリリースされた

### Freshの特徴
![スクリーンショット 2022-10-24 19.09.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/d8ac51af-f585-ab08-4d27-53b58a3b921d.png)
- [Deno公式](https://fresh.deno.dev/)にも記載されているが、大きな特徴が6つある。
    - Just-in-time rendering
    - Island based client hydration
    - Zero runtime overhead
    - No build step
    - No configuration
    - TypeScript support
- いくつか特徴をグルーピングして説明をします。


https://fresh.deno.dev/


### 開発の初期設定不要 & TSのサポート
![スクリーンショット 2022-10-24 19.09.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/7b332b28-2fdb-198d-7a11-a3da42d1c95a.png)
- Denoをランタイムに利用しているので、TypeScriptが標準で利用することができます。(`tsconfig.json`不要)
- [deno lint](https://deno.land/manual@v1.26.2/tools/linter) , [deno fmt](https://deno.land/manual@v1.26.2/tools/formatter) を利用できるので、リンターやフォーマッターの設定も不要
- プロジェクト作成時に`TailwindCSS`を自動インストールすることができる
- Reactと一緒の構文で書ける Preactで記述することができる
参考：[Preactの始め方&Reactとの違い
](https://qiita.com/akashixi/items/e0e42e10ba8e088bf996)


### ビルド工程なし & リクエスト時レンダリング
![スクリーンショット 2022-10-24 19.11.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/c6fc53d6-7b47-430b-401e-34fc0b9282ad.png)
- Denoは[Deno Deploy](https://deno.com/deploy)というCDN Edge環境で動作することを想定されている。
- デプロイ時にTypeScript/JSXのソースコードをビルドしない。
-> **リクエスト時にサーバーサイドでビルドしたHTML**を返却する
-> **レスポンスの速さ < リリース速度**を重視している


### ランタイムがゼロ & ハイドレーションの最適化
![スクリーンショット 2022-10-24 19.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/b988148f-cf67-2d1a-0332-54656ba27d0c.png)
- 今主流のSPAでなくMPAを選定している
    - SPAを利用した場合、静的なページでもJSが呼び出されてしまう。
    - MPAを採用することで、静的なページを作成した時に**JSの読み込みがゼロ**になる。(Zero runtime overhead)
- アイランドアーキテクチャ設計の採用
    - 静的な画面だけを作るだけなら問題ないが、インタラクティブな画面やコンポーネントも利用したい場合がある
    - アイランドアーキテクチャの採用で上記の課題を解決する


### アイランドアーキテクチャとは
![スクリーンショット 2022-10-24 19.12.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/9d1a850b-7d9f-8227-1f85-f2f95cdcebd5.png)

- アイランドアーキテクチャは[Astro](https://docs.astro.build/ja/concepts/islands/)が最初に提唱したWebアーキテクトパターン。
- 画面のUIを**静的なアイランド**と**動的なアイランド**で分離させて設計を行う。
- これまでのSPAフレームワークでSSRを利用する場合、全てのコンポーネントをハイドレーションしていたが、アイランドアーキテクチャは必要なコンポーネントのみハイドレーションを行う。
    - 基本はサーバーサイドで静的なHTMLを生成する。
    - 動的なコンテンツが必要なアイランドが存在する場合、クライアント側でレンダリングするためのJavaScriptを読み込むようになっている。
    ->**部分的なハイドレーションを行うことで、JSの読み込みを最適化している**

参考：[SSR の知識ゼロから始める Angular Universal - ハイドレーションとは](https://qiita.com/MasanobuAkiba/items/7adcfd5050150ac9ba36#%E3%83%8F%E3%82%A4%E3%83%89%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E3%81%AF)

### なぜアイランドアーキテクチャを使う?
![スクリーンショット 2022-10-24 19.12.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/94ab9873-54eb-eadf-0964-e81d25101106.png)
- 先ほども説明したが、SPAフレームワークで静的なページを作成すると大量のJSが読み込まれる
- 例は「Hello World」のような簡易的なページが、大量のJSが読み込まれている

**そもそも静的なページにはJS不要だよね？** というところから生まれたアーキテクチャになります。

### ケーススタディ (vs Next.js)
![スクリーンショット 2022-10-24 19.10.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/95d8ff86-75a8-f5d6-4837-cd30e716246c.png)

Freshの例が見当たらなかったので、類似のアイランドアーキテクチャを採用しているAstroの[Astro MPA vs. SPA](https://docs.astro.build/ja/concepts/mpa-vs-spa/#mpa-vs-spa)を参考しますが `Next.js` をベンチメークに置いた検証で以下の結果が計測されました。

- vs. SPA (Next.js) - 94% JavaScriptを削減
- vs. SPA (Next.js) - 34% ロードが速い
- vs. SPA (Next.js) ‒ ネットワーク使用量を65%削減

https://docs.astro.build/ja/concepts/mpa-vs-spa/#%E3%82%B1%E3%83%BC%E3%82%B9%E3%82%B9%E3%82%BF%E3%83%87%E3%82%A3

### SPAの時代は終わったの?
![スクリーンショット 2022-10-24 19.10.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/24648625-8625-bf19-4a60-e3430b61a97e.png)

- そんなことはなく、動的なパーツが多いWebアプリはSPAの方が適している
    - そもそもSPAフレームワークは動的なWebアプリを作るために生まれた
- 今の流行的に**とりあえずNext.jsで作れば良い**という思想に対してのアンチテーゼとして生まれたのではないかと考えている

**これからフロントエンドエンジニアはSPA or MPA でより用件に適したフレームワークを選定する必要がある**というのがまとめになります。

## 最後に
Devトークでフロントエンドエンジニアの方と意見交換を募集しております！
よろしければ一緒に技術についてお話ししましょう:relaxed:

https://jobs.qiita.com/employers/608/dev_talks/473