$30 off During Our Annual Pro Sale. View Details »

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

yud0uhu
November 17, 2023
2.4k

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

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

yud0uhu

November 17, 2023
Tweet

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