フロントエンドトレンドのふりかえりと事業に合わせた選択

フロントエンドトレンドのふりかえりと事業に合わせた選択 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

フロントエンドトレンドのふりかえりと事業に合わせた選択

フロントエンドトレンドのふりかえりと事業に合わせた選択

sunnyone

More Decks by sunnyone

Other Decks in Technology

Featured

Transcript