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
開発者とのコミュニケーションのはじめかた
sunnyone
0
9
概念モデル→論理モデルで気をつけていること
sunnyone
3
370
印象に残ったLLMの使い方5選
sunnyone
0
21
シンプルじゃないテーブルの見つけ方
sunnyone
1
350
Next.js App Router登場後の話
sunnyone
0
73
はやい開発のためのJSONデータ型の活用
sunnyone
0
160
メタプログラミングとは
sunnyone
0
2.4k
RustからPythonを呼び出す
sunnyone
1
4.5k
PowerShellでRazorテンプレートエンジンを使ってみた
sunnyone
0
2.7k
Other Decks in Technology
See All in Technology
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
250
Azure Well-Architected Framework入門
tomokusaba
1
350
How to achieve interoperable digital identity across Asian countries
fujie
0
140
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
500
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9.1k
The Cake Is a Lie... And So Is Your Login’s Accessibility
leichteckig
0
110
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
590
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
180
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1.1k
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
300
Where will it converge?
ibknadedeji
0
200
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Automating Front-end Workflow
addyosmani
1371
200k
Designing for Performance
lara
610
69k
Site-Speed That Sticks
csswizardry
11
890
Context Engineering - Making Every Token Count
addyosmani
5
220
Building an army of robots
kneath
306
46k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
A Tale of Four Properties
chriscoyier
160
23k
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