Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webフロントエンドの進化とJamstackアーキテクチャの変遷
Search
microCMS
July 14, 2023
Technology
7
3.3k
Webフロントエンドの進化とJamstackアーキテクチャの変遷
DIST.40 「Jamstackの実際とミライ」での発表資料です。
https://dist.connpass.com/event/284922/
microCMS
July 14, 2023
Tweet
Share
More Decks by microCMS
See All by microCMS
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
360
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
390
microCMSのリッチエディタ開発:設計・品質・使いやすさの実現手法
microcms
0
140
エンジニア創業者が語るユーザー中心のプロダクト作り
microcms
1
320
What’s new in microCMS (2024 microCMS Meetup)
microcms
0
3.2k
microCMSの開発組織 - Deep dive into microCMS
microcms
2
4.7k
意思決定のモヤが晴れるまで
microcms
7
2.4k
microCMS AI
microcms
0
2.1k
microCMSのエンジニア組織と文化
microcms
0
2.1k
Other Decks in Technology
See All in Technology
Automating Web Accessibility Testing with AI Agents
maminami373
0
150
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
160
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
250
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
240
Webアクセシビリティ入門
recruitengineers
PRO
3
1.5k
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
420
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
150
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
0
140
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
2
490
生成AI時代のデータ基盤
shibuiwilliam
3
1.8k
DeNA での思い出 / Memories at DeNA
orgachem
PRO
6
1.9k
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
810
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Six Lessons from altMBA
skipperchong
28
4k
BBQ
matthewcrist
89
9.8k
Typedesign – Prime Four
hannesfritz
42
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimizing for Happiness
mojombo
379
70k
Visualization
eitanlees
147
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Facilitating Awesome Meetings
lara
55
6.5k
Transcript
#dist40 柴田 和祈 Webフロントエンドの進化と Jamstackアーキテクチャの変遷
自己紹介 2 #dist40 柴田 和祈 / Kazuki Shibata @shibe97 株式会社microCMSの共同創業者
/ CXO 元デザイナー兼フロントエンドエンジニア
ご利用 企業数 ご契約 継続率 以上 99% 6,000社 以上 編集者も使いやすい 日本製ヘッドレスCMS
3
4 #microcms_meetup
5 What’s Jamstack? ※以前、公式サイトに載っていた図
- 技術の移り変わりによって、公式サイト(jamstack.org)の中身も変化している - Netlify社が作り出した概念のため、営利的に解釈は変化していくものと捉えている(個人的感想) - jamstack.wtfでもVercelの登場によりJamstackの意味合いは曖昧になってきたと記載がある - フロントエンド・エッジ技術は従来のJamstack定義のはるか先まで進んでしまっている 6 Jamstackの曖昧さ
歴史を辿りながら Webフロントエンドの進化を 見ていきましょう 7
8 SPA(Single Page Application)の登場 - JavaScriptのXHR(XMLHttpRequest)を利用して、クライアントサイドでのページ遷移を可能にした - 2005年2月「Ajax: A New
Approach to Web Applications」論文 - ページ遷移時に真っ白な画面で待つ必要がなくなり、ユーザー体験が向上した - サーバーサイドで行っていたロジックがクライアントサイドに移り、JS実装の複雑性が増した - MVC系フレームワークの登場 - Backbone, Angular, Vue, React, etc...
9 SSR(Server Side Rendering)の登場 - 従来のSSRではなく、SPA込みでのSSRの話 - サーバーサイドからクライアントサイドに各種状態の連携(ハイドレーション) - SPAの下記の問題点を解決
- 最初に大きなバンドルJSを読み込む必要があるため、初期ロードが遅い問題 - SSRと比較するとクローラーにIndexされづらい問題 - Next, Nuxtが登場 - SSRの難しいところを全部吸収したフレームワークとして人気に
10 SSG(Static Site Generate)の登場 - モダンJSフレームワークによるサイト全体の静的化が人気に - Nuxt v2.13でFull Static
Generationが登場し、ページ遷移時のAPIレスポンスも静的化 - もちろんハイドレーションしてSPAとしても動作する - リンク先のプリフェッチも導入され、超高速サイトが作れるようになる
11 新たなホスティングサービスの登場 - 静的ビルドしたファイル群をCDNから配信できる サービスが相次いで登場 - Netlify / Vercel /
Amplify Console / etc… - Atomic Deploys - すべてのコード、アセットが一気に更新されるため、 ウェブサイトが部分的に更新された状態にはならない - FTPアップロードの問題を解決 - ここでJamstackに火が点いた
- APIでコンテンツ管理ができるヘッドレスCMSが登場 - Jamstackで静的ページを作れるようになったが、非エンジニアが運用できない という問題を解決 12 ヘッドレスCMSの登場
- オリジンサーバーへの物理的な通信遅延を解決するための分散型サーバーのネットワーク - CDNの一部として機能する個々のサーバーをエッジサーバーと呼ぶ 13 CDN(Content Delivery Network) オリジンサーバー ユーザー
エッジサーバー 50ms 200ms エッジサーバー エッジサーバー
- ビルドが遅い - 1ページ更新すると全ページビルドが走ってしまう - 大量のページがある場合、1時間以上かかることも・・・ - 速報性のあるページや、時間きっかりに公開したいページとの相性が良くない - CMSのプレビューの実装を自前で行う必要がある
14 Jamstackの課題
- CDNのキャッシュが古い or 無い場合はバックグラウンドでデータを取りにいく - Stale While Revalidate という仕組み -
ページ更新時も全体ビルドが不要になり、ビルド時間の問題は解決 - revalidate=1などとすれば、時間きっかりもまぁ問題なしと言える - Next + Vercel 時代に突入 15 ISRの登場
16 ISRの仕組み(キャッシュが有効な場合) オリジン ユーザー エッジ ①リクエスト ②キャッシュ返却
17 ISRの仕組み(キャッシュが古い場合) オリジン ユーザー エッジ ①リクエスト ②キャッシュ返却 ③リクエスト ④キャッシュ更新 キャッシュが古いかどうかは
revalidateTimeで判断 一度古いキャッシュが返却される 二度目以降のアクセスで更新されたキャッシュが返却される
18 ISRの仕組み(キャッシュがない場合) オリジン ユーザー エッジ ①リクエスト ④キャッシュ返却 ②リクエスト ③キャッシュ更新 キャッシュがない場合は返却する
ものがないので取得しに行く
- ルーティングごとにレンダリング方式を変えられるハイブリッド方式が登場 - 記事など大量ページがあり、更新も多い部分はSSR or ISR - 会社概要ページなど書き換えが極めて少ないページはSSGなど - 実装時はサーバー、クライアントのどちらで処理が動いているのかをよく考える必要がある
- 最近のフレームワークはだいたいハイブリッドな流れに向かっている - Next, Nuxt, SvelteKit, Astro, etc 19 ハイブリッド方式
結果整合性 20 結果整合性と強整合性 強整合性 全ての更新が最終的には全ての参加者に伝播するこ とを保証する。 → 大規模な分散システムに向いている 全ての読み取りが最新の書き込みを常に反映する という保証する。
→ 絶対的な制御が必要なシステムに向いている - SNS - メディア系 - 銀行などの金融系サービス - 航空予約システム - 在庫管理システム SSRやCSRはこちら SSGやISRはこちら
- ページ内でも静的部分と動的部分を同居させることができる - 静的部分を海、動的部分を島としたイメージ - Deno FreshやAstroで採用されている - 部分的なハイドレーションが可能 -
必要なタイミングでJSがロードされる - スクリーンサイズが◦◦◦px以下になったタイミング - ビューポートに入ったタイミング - etc 21 アイランドアーキテクチャ https://docs.astro.build/ja/concepts/islands/
- アイランドアーキテクチャに近い - サーバーサイドだけで動作させるコンポーネント - useState等のReact Hooksが使えない - サーバーで処理する分、クライアントに渡すバンドルサイズを削減できる -
表示系ライブラリの読み込み(highlight.jsなど) - コンポーネント定義 - 最近のNext.js 13 App Routerではこの辺りの知識が必須 - より細かい単位での制御へ 22 RSC(React Server Components)
- エッジは静的コンテンツをキャッシュするだけの場所ではなくなってきた - Cloudflare Workersの登場で潮の目が変わった - V8(JavaScript実行エンジン)を採用しているため、エッジ上でJavaScriptが動く - ただし、Node.js特有のAPI(fsなど)が使えない制約はあり -
バンドルサイズの制約(1MBなど) - CPU runtimeの制約(10msなど) - Next.js の middleware もエッジ上にコードを展開できる 23 エッジコンピューティングの加速
- コード実行 - Cloudflare Workers - Remix, SvelteKit, qwik, Hono
- CloudFront Functions - Vercel Edge Functions - etc - DB - Cloudflare D1(SQLite) - ストレージ - Cloudflare R2(オブジェクトストレージ) - Cloudflare Workers KV(Key - Value store) 24 エッジ上で動かせるものたち
フロントエンドアーキテクチャは エッジをできる限り活用する方向に 進化している 25
- Jamstackという概念は技術の進歩と共に曖昧になってきている - フロントエンドアーキテクチャはCDNをフル活用する方向に進化している - 静的ファイルだけでなく、あらゆる処理・通信がCDN上で行われるようになってきている - できる限りレイテンシをなくしつつ、整合性の取れたアプリケーションを作るためにエンジニアに 求められる知識は益々増加している 26
まとめ
Thanks :) 27 #dist40 https://discord.gg/K3DPqw4EJ2 @micro_cms