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
フロントエンドトレンドのふりかえりと事業に合わせた選択
Search
sunnyone
July 31, 2023
Technology
0
110
フロントエンドトレンドのふりかえりと事業に合わせた選択
sunnyone
July 31, 2023
Tweet
Share
More Decks by sunnyone
See All by sunnyone
印象に残ったLLMの使い方5選
sunnyone
0
14
シンプルじゃないテーブルの見つけ方
sunnyone
1
340
Next.js App Router登場後の話
sunnyone
0
69
はやい開発のためのJSONデータ型の活用
sunnyone
0
150
メタプログラミングとは
sunnyone
0
2.3k
RustからPythonを呼び出す
sunnyone
1
4.4k
PowerShellでRazorテンプレートエンジンを使ってみた
sunnyone
0
2.7k
Other Decks in Technology
See All in Technology
LLM時代の検索
shibuiwilliam
2
180
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
450
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
PO初心者が考えた ”POらしさ”
nb_rady
0
210
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Invisible Side of Design
smashingmag
301
51k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Making Projects Easy
brettharned
116
6.3k
Being A Developer After 40
akosma
90
590k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing for humans not robots
tammielis
253
25k
Transcript
フロントエンドトレンドのふりかえりと 事業に合わせた選択 1
今日お話すること フロントエンドあるあるありますよね SPA でなくて良くない? 今は◦◦ よりも×× .js の500KB って工数かけて削る必要ある? これらを踏まえながらトレンドをふりかえります
2
約10 年のフロントエンドのトレンド 3
サーバサイドテンプレート時代 サーバサイドテンプレートでHTML を生成し、js/css が装飾する形 JSP, erb, jade/pug, mustache/handlebars, etc HTML
JS CSS ↑ ブラウザ ↓ サーバ HTML 相当 4
Single Page Application (SPA) の登場 サーバが用意した要素にjs からページ全域を描画する HTML 片の2 重管理からの解放
CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ HTML ( プレースホルダー) 5
SPA ライブラリの流行 - 2015 年頃 双方向バインディングや単方向データフローでSPA が実用的に AngularJS / React
/ Vue Angular v2beta 2015/4, React 0.14 2015/10, Vue.js 1.0 2015/10 6
Server Side Rendering (SSR) の登場 サーチエンジン向けにはSPA の利用は難があった クローラーボットはjs を解釈できなかった/ 制限があった
サーバでHTML をプリレンダリングするSSR の登場 CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ (prerender) HTML 7
SSR フレームワークの発展 - 2018 年頃 ライブラリ単体でのSSR (Server Side Rendering) はだいぶ手間
SSR フレームワークでお手軽にSSR が利用可能に Nuxt.js 1.0 2018/1, Next.js 0.9 2019/7 8
Partial Hydration - 2022 年頃 フルページでSSR すると動的管理化に置くためのhydration がネック に →hydration
の対象を減らす Partial Hydration / Island Architecture / etc Astro, React Server Components, Qwik CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ (hydration 対象) HTML (hydration 対象外) HTML 9
まとめ? 仕組みの改善から選択する HTML の二重管理が厳しい / 書き換える部分が多い→SPA に サーチエンジンが必要→SSR に hydration
のコストが問題→Partial Hydration / Island Architecture に 10
本当に? 11
忘れていること ↓ エコシステムの進化 12
SPA ライブラリと共に発展したもの コンポーネント指向 HTML←CSS/JS からコンポーネント←HTML/CSS/JS へ HTML JS CSS HTML
CSS JS コンポーネント HTML CSS JS コンポーネント HTML CSS JS コンポーネント 13
コンポーネント指向の効果 HTML/CSS/JS の接地面が狭くなるため凝集度↑ 「このCSS どこで使っているかわからない」「このJS 何に処理さ れるの?」が起こりにくくなる 使い捨てでないプロダクト/事業で重要 型安全な構造化が可能、かつ使われている仕組みが使える 「SPA
でなくて良いか?」→yes, SPA でない選択肢→[ ] 14
SSR フレームワークと共に発展したもの hooks / local state management の進化 同時期のReact Hooks
の登場で状態管理がRedux 一強から変わっ た Hooks がなければ世の中Vue だったかもしれない .js bundle 民主化 素のbundler / webpack では配慮しないと巨大js ができがち(数 MB 〜の.js ) SSR フレームワークはページを配慮して分割する 15
500KB のサイズ感 Mobile (1.6Mbps Down) で500KB は転送だけで300ms First Contentful Paint
(FCP) のGood は〜1.8s ビジネスインパクトはDesktop < Mobile < 埋め込みjs 水戸駅の様子 16
サーバーコンポーネントと共に発展するもの BFF 役割の移動? React Server Component はBFF 役割の一部を内包する hooks の登場→Redux
の衰退のようにgame change が発生する可 能性 スタイリング(CSS) の変化 Runtime CSS-in-JS が厳しく 過渡期なので半年後に注目! 17
まとめ 枠組みの機能に加えて、エコシステムの進化を加味して考慮する必 要あり 何の機能が増えたか?だけでなく何を解決しようとしているのか? という目線で見るのがおすすめ 18