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

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

Transcript

1. 2023年の
   
   ゼロランタイムCSS in JS ️
   
   を考える
   フロントエンドカンファレンス沖縄2023
   
   0yu@yud0uhu
   

   View Slide

2. 0yu(おゆ)
   E 合同会社DMM.com 23新
   E Webフロントエンドエンジニ
   E 猫と甘いものと映画が好き
   自己紹介
   @yud0uhu
   @yud0uhu
   

   View Slide

3. CSSフレームワーク
   
   何を使っていますか？
   

   View Slide

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 が使われている
   

   View Slide

5. 最近のCSSフレームワーク事情
   認知度
   

   View Slide

6. 最近のCSSフレームワーク事情
   利用率
   

   View Slide

7. 最近のCSSフレームワーク事情
   興味度
   

   View Slide

8. 最近のCSSフレームワーク事情
   満足度
   

   View Slide

9. 技術調査の背景
   

   View Slide

10. 技術調査の背景
    技術調査の背景
    ˜ 社内のとあるプロジェクトでEmotionを使っていU
    ˜ EmotionをはじめとしたランタイムCSS-in-JSでは、スタイル描画によるパフォーマン
    ス上のオーバーヘッドが肥大化する懸念があっU
    ˜ そもそもApp RouterはEmotionに対応していなV
    ˜ このような課題を解消するため、新たなCSS環境への移行を検討
    

    View Slide

11. 評価観点
    

    View Slide

12. 評価観点
    評価観点
    2 パフォーマン&
    2 学習コス!
    2 Next.js(SSR)環境で問題なく使えること
    

    View Slide

13. CSS-in-JSにおける選択肢
    

    View Slide

14. CSS-in-JSにおける選択肢
    ランタイム or ゼロランタイム or ハイブリッド
    

    View Slide

15. 技術選定調査のために行ったこと
    

    View Slide

16. 01 選定ライブラリの検討
    02 リファレンスコードの作成
    03 パフォーマンス測定の実施
    04 チーム内フィードバック
    技術選定調査のために行なったこと
    

    View Slide

17. 01
    選定ライブラリの決定
    

    View Slide

18. 選定ライブラリの決定
    選定ライブラリの決定
    " CSS Module
    " Kuma U
    " Panda CS#
    " Linalia
    

    View Slide

19. 02
    リファレンスコードの作成
    

    View Slide

20. リファレンスコードの作成
    リファレンスコードの作成
    A 各種ライブラリを用いてボタンコンポーネントを実装し、リファレンスコードを作成
    

    View Slide

21. リファレンスコードの作成
    観点の洗い出し
    

    View Slide

22. 03
    パフォーマンス測定の実施
    

    View Slide

23. パフォーマンス測定の実施
    パフォーマンス測定の実施
    ™ 比較のため、各種ライブラリ導入下でベンチマーク測定を実Y
    ™ 5000枚のダミーイメージをレンダリングするコンポーネントを作成し、レンダリング
    にどの程度の時間を要したかを計測・評C
    ™ 検証に使用したリポジトf
    7 https://github.com/yud0uhu/css-optimization-benchmarks
    

    View Slide

24. パフォーマンス測定の実施
    パフォーマンス測定の実施
    

    View Slide

25. 04
    チーム内フィードバック
    

    View Slide

26. チーム内フィードバック
    チーム内フィードバック
    r チーム内デイリーでパフォーマンスの計測結果とリファレンスコードを提示し、メン
    バーからフィードバックをもら1
    r Panda CSS派とKuma UI派で割れe
    r 結果、Kuma UIの導入を検討することに
    

    View Slide

27. Kuma UIについて
    

    View Slide

28. Kuma UIについて
    Kuma UIについて
    i ヘッドレスなUIコンポーネント集とゼロランタイムで動くCSS in JS を兼ねたライブラ
    ™
    i ビルド時に決定できるスタイルを静的に抽出し、動的に変更される可能性のあるスタ
    イルに対しては実行時にDirty Checking を行なうことで、ハイブリッドなアプローチ
    を実
    i ヘッドレスUIコンポーネントを兼ねるため、独自のデザイントークンの組み合わせも
    可能
    

    View Slide

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で補って開発を
    行う方針
    

    View Slide

30. 最後に
    最後に
    7 Kuma UIや他のCSSライブラリの導入事例などあれば、ぜひ懇親会でお話ししましょ
    う！
    

    View Slide