QiitaNight ~フロントエンド~で発表した資料になります。 https://increments.connpass.com/event/261907/

1. 株 式 会 社 R e l i c
サ ー ビ ス デ ザ イ ン 事 業 部
山 口 裕 也
Denoからリリースされたフレームワーク
「Fresh」を触ってみた
© Copyright 2020 Relic Inc. All rights reserved.

2. 自己紹介
1
山口 裕也
株式会社Relic
デザインエンジニアリンググループ
新規事業の検証フェーズを担当
猫カフェ、料理
takusan64 @takusan64

3. 2
そもそもDenoとは
・Node.jsの開発者が作った最新のJavaScriptランタイム
・TypeScriptをデフォルトで実行可能
・Promise ファースト
・ESModuleのみサポート(import / export)
etc…

4. 3
Deno 公式より「Fresh」ver1.0 がリリース

5. 4
Freshの特徴

6. 5
開発の初期設定不要 & TSのサポート
・DenoがTSをサポートしている。(tsconfig.json不要)
・リンター/フォーマッターも標準で入っている
・TailwindCSSをデフォルトでインストール
・Preactが利用可能

7. 6
ビルド工程なし & リクエスト時レンダリング
・FreshはDeno Deployで動くこと想定されている
・リクエスト時にHTMLをサーバーサイドで生成する
->レスポンスの速さよりもリリース速度を重視

8. 7
ランタイムがゼロ & ハイドレーションの最適化
・SPAでなくMPAを選定している
・デフォルトでのJS読み込みがゼロ
・アイランドアーキテクチャ設計の採用

9. 8
アイランドアーキテクチャ
• アイランドという単位でペー
ジを分割
• 静的な箇所はサーバー側でレ
ンダリング
• ページ内でインタラクティブ
な箇所のみ、クライアント側
でレンダリング

10. 9
• Next.jsで静的なページを作成
した時に読み込まれるJS量…
• 静的なページを作るのにJSは
不要だよね？というモチベー
ション
なぜアイランド？

11. 10
• 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/

12. 11
SPAの時代は終わったの？
・動的なコンテンツが多いWebページの場合はSPAがよい
・多くのWebページは動的よりも静的なコンテンツが多い
-> SPA or MPA で最適な技術を選ぶ必要がある

13. 12
類似のフレームワーク
・Astro(https://docs.astro.build/)
・11ty(https://www.11ty.dev/)
・Marko(https://markojs.com/)
etc…

14. Relicは一緒に働くメンバーを募集しています。
13
https://relic.co.jp/recruit/

15. Devトークでの会話も募集してます！
https://jobs.qiita.com/employers/608/dev_talks/473

16. おしまい