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

Transcript

1. フロントエンドトレンドのふりかえりと 事業に合わせた選択 1
2. 今日お話すること フロントエンドあるあるありますよね SPA でなくて良くない？ 今は◦◦ よりも×× .js の500KB って工数かけて削る必要ある？ これらを踏まえながらトレンドをふりかえります 2
3. 約10 年のフロントエンドのトレンド 3
4. サーバサイドテンプレート時代 サーバサイドテンプレートでHTML を生成し、js/css が装飾する形 JSP, erb, jade/pug, mustache/handlebars, etc HTML JS CSS ↑ ブラウザ ↓ サーバ HTML 相当 4
5. Single Page Application (SPA) の登場 サーバが用意した要素にjs からページ全域を描画する HTML 片の2 重管理からの解放 CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ HTML ( プレースホルダー) 5
6. SPA ライブラリの流行 - 2015 年頃 双方向バインディングや単方向データフローでSPA が実用的に AngularJS / React / Vue Angular v2beta 2015/4, React 0.14 2015/10, Vue.js 1.0 2015/10 6
7. Server Side Rendering (SSR) の登場 サーチエンジン向けにはSPA の利用は難があった クローラーボットはjs を解釈できなかった/ 制限があった サーバでHTML をプリレンダリングするSSR の登場 CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ (prerender) HTML 7
8. SSR フレームワークの発展 - 2018 年頃 ライブラリ単体でのSSR (Server Side Rendering) はだいぶ手間 SSR フレームワークでお手軽にSSR が利用可能に Nuxt.js 1.0 2018/1, Next.js 0.9 2019/7 8
9. Partial Hydration - 2022 年頃 フルページでSSR すると動的管理化に置くためのhydration がネック に →hydration の対象を減らす Partial Hydration / Island Architecture / etc Astro, React Server Components, Qwik CSS HTML 相当 JS ↑ ブラウザ ↓ サーバ (hydration 対象) HTML (hydration 対象外) HTML 9
10. まとめ？ 仕組みの改善から選択する HTML の二重管理が厳しい / 書き換える部分が多い→SPA に サーチエンジンが必要→SSR に hydration のコストが問題→Partial Hydration / Island Architecture に 10
11. 本当に？ 11
12. 忘れていること ↓ エコシステムの進化 12
13. SPA ライブラリと共に発展したもの コンポーネント指向 HTML←CSS/JS からコンポーネント←HTML/CSS/JS へ HTML JS CSS HTML CSS JS コンポーネント HTML CSS JS コンポーネント HTML CSS JS コンポーネント 13
14. コンポーネント指向の効果 HTML/CSS/JS の接地面が狭くなるため凝集度↑ 「このCSS どこで使っているかわからない」「このJS 何に処理さ れるの？」が起こりにくくなる 使い捨てでないプロダクト／事業で重要 型安全な構造化が可能、かつ使われている仕組みが使える 「SPA でなくて良いか？」→yes, SPA でない選択肢→[ ] 14
15. SSR フレームワークと共に発展したもの hooks / local state management の進化 同時期のReact Hooks の登場で状態管理がRedux 一強から変わっ た Hooks がなければ世の中Vue だったかもしれない .js bundle 民主化 素のbundler / webpack では配慮しないと巨大js ができがち（数 MB 〜の.js ） SSR フレームワークはページを配慮して分割する 15
16. 500KB のサイズ感 Mobile (1.6Mbps Down) で500KB は転送だけで300ms First Contentful Paint (FCP) のGood は〜1.8s ビジネスインパクトはDesktop < Mobile < 埋め込みjs 水戸駅の様子 16
17. サーバーコンポーネントと共に発展するもの BFF 役割の移動？ React Server Component はBFF 役割の一部を内包する hooks の登場→Redux の衰退のようにgame change が発生する可 能性 スタイリング(CSS) の変化 Runtime CSS-in-JS が厳しく 過渡期なので半年後に注目！ 17
18. まとめ 枠組みの機能に加えて、エコシステムの進化を加味して考慮する必 要あり 何の機能が増えたか？だけでなく何を解決しようとしているのか？ という目線で見るのがおすすめ 18