2023年の ゼロランタイムCSS in JS⚡️ を考える

フロントエンドカンファレンス沖縄2023のLTスライド資料です
https://frontend-conf.okinawa.jp/

Transcript

1. 2023年の ゼロランタイムCSS in JS ️ を考える フロントエンドカンファレンス沖縄2023 0yu@yud0uhu
2. 0yu(おゆ) E 合同会社DMM.com 23新 E Webフロントエンドエンジニ E 猫と甘いものと映画が好き 自己紹介 @yud0uhu @yud0uhu
3. CSSフレームワーク 何を使っていますか？
4. 最近のCSSフレームワーク事情 最近のCSSフレームワーク事情 Next.jsのサポートするスタイリングアプローP v Global CS7 v CSS ModuleH v Tailwind CS7 v SasH v CSS-in-JS Learn Next.js のサンプルコードはCSS Modules or Tailwind CSS が使われている
5. 最近のCSSフレームワーク事情 認知度
6. 最近のCSSフレームワーク事情 利用率
7. 最近のCSSフレームワーク事情 興味度
8. 最近のCSSフレームワーク事情 満足度
9. 技術調査の背景
10. 技術調査の背景 技術調査の背景 ˜ 社内のとあるプロジェクトでEmotionを使っていU ˜ EmotionをはじめとしたランタイムCSS-in-JSでは、スタイル描画によるパフォーマン ス上のオーバーヘッドが肥大化する懸念があっU ˜ そもそもApp RouterはEmotionに対応していなV ˜ このような課題を解消するため、新たなCSS環境への移行を検討
11. 評価観点
12. 評価観点 評価観点 2 パフォーマン& 2 学習コス! 2 Next.js(SSR)環境で問題なく使えること
13. CSS-in-JSにおける選択肢
14. CSS-in-JSにおける選択肢 ランタイム or ゼロランタイム or ハイブリッド
15. 技術選定調査のために行ったこと
16. 01 選定ライブラリの検討 02 リファレンスコードの作成 03 パフォーマンス測定の実施 04 チーム内フィードバック 技術選定調査のために行なったこと
17. 01 選定ライブラリの決定
18. 選定ライブラリの決定 選定ライブラリの決定 " CSS Module " Kuma U " Panda CS# " Linalia
19. 02 リファレンスコードの作成
20. リファレンスコードの作成 リファレンスコードの作成 A 各種ライブラリを用いてボタンコンポーネントを実装し、リファレンスコードを作成
21. リファレンスコードの作成 観点の洗い出し
22. 03 パフォーマンス測定の実施
23. パフォーマンス測定の実施 パフォーマンス測定の実施 ™ 比較のため、各種ライブラリ導入下でベンチマーク測定を実Y ™ 5000枚のダミーイメージをレンダリングするコンポーネントを作成し、レンダリング にどの程度の時間を要したかを計測・評C ™ 検証に使用したリポジトf 7 https://github.com/yud0uhu/css-optimization-benchmarks
24. パフォーマンス測定の実施 パフォーマンス測定の実施
25. 04 チーム内フィードバック
26. チーム内フィードバック チーム内フィードバック r チーム内デイリーでパフォーマンスの計測結果とリファレンスコードを提示し、メン バーからフィードバックをもら1 r Panda CSS派とKuma UI派で割れe r 結果、Kuma UIの導入を検討することに
27. Kuma UIについて
28. Kuma UIについて Kuma UIについて i ヘッドレスなUIコンポーネント集とゼロランタイムで動くCSS in JS を兼ねたライブラ ™ i ビルド時に決定できるスタイルを静的に抽出し、動的に変更される可能性のあるスタ イルに対しては実行時にDirty Checking を行なうことで、ハイブリッドなアプローチ を実 i ヘッドレスUIコンポーネントを兼ねるため、独自のデザイントークンの組み合わせも 可能
29. Kuma UIについて Kuma UIについて z 既存コードにEmotionに依存した動的スタイル処理が多 z css APIやstyled APIを使うとEmotionライクに書くことができるが、現状ハイブリッ ド環境で動作するのはUIコンポーネント + Utility propsを使う記法の( z そのため、基本的に置き換えはUtility propsで行~ z Utility propsは一部のCSSプロパティが非対0 z :-webkit-scrollbar な# z このようなプロパティは公式のサポートを待ちつつ、CSS Modulesで補って開発を 行う方針
30. 最後に 最後に 7 Kuma UIや他のCSSライブラリの導入事例などあれば、ぜひ懇親会でお話ししましょ う！