Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2023年の ゼロランタイムCSS in JS⚡️ を考える
Search
yud0uhu
November 17, 2023
4
4.2k
2023年の ゼロランタイムCSS in JS⚡️ を考える
フロントエンドカンファレンス沖縄2023のLTスライド資料です
https://frontend-conf.okinawa.jp/
yud0uhu
November 17, 2023
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
160
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
4.3k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
1.8k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
740
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
790
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
517
39k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
BBQ
matthewcrist
82
9k
Navigating Team Friction
lara
181
13k
Leading Effective Engineering Teams 2024
addyosmani
3
300
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Designing for Performance
lara
604
67k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
How STYLIGHT went responsive
nonsquared
93
5k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Transcript
2023年の ゼロランタイムCSS in JS ️ を考える フロントエンドカンファレンス沖縄2023 0yu@yud0uhu
0yu(おゆ) E 合同会社DMM.com 23新 E Webフロントエンドエンジニ E 猫と甘いものと映画が好き 自己紹介 @yud0uhu
@yud0uhu
CSSフレームワーク 何を使っていますか?
最近の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 が使われている
最近のCSSフレームワーク事情 認知度
最近のCSSフレームワーク事情 利用率
最近のCSSフレームワーク事情 興味度
最近のCSSフレームワーク事情 満足度
技術調査の背景
技術調査の背景 技術調査の背景 社内のとあるプロジェクトでEmotionを使っていU EmotionをはじめとしたランタイムCSS-in-JSでは、スタイル描画によるパフォーマン ス上のオーバーヘッドが肥大化する懸念があっU そもそもApp RouterはEmotionに対応していなV
このような課題を解消するため、新たなCSS環境への移行を検討
評価観点
評価観点 評価観点 2 パフォーマン& 2 学習コス! 2 Next.js(SSR)環境で問題なく使えること
CSS-in-JSにおける選択肢
CSS-in-JSにおける選択肢 ランタイム or ゼロランタイム or ハイブリッド
技術選定調査のために行ったこと
01 選定ライブラリの検討 02 リファレンスコードの作成 03 パフォーマンス測定の実施 04 チーム内フィードバック 技術選定調査のために行なったこと
01 選定ライブラリの決定
選定ライブラリの決定 選定ライブラリの決定 " CSS Module " Kuma U " Panda
CS# " Linalia
02 リファレンスコードの作成
リファレンスコードの作成 リファレンスコードの作成 A 各種ライブラリを用いてボタンコンポーネントを実装し、リファレンスコードを作成
リファレンスコードの作成 観点の洗い出し
03 パフォーマンス測定の実施
パフォーマンス測定の実施 パフォーマンス測定の実施 比較のため、各種ライブラリ導入下でベンチマーク測定を実Y 5000枚のダミーイメージをレンダリングするコンポーネントを作成し、レンダリング にどの程度の時間を要したかを計測・評C 検証に使用したリポジトf 7
https://github.com/yud0uhu/css-optimization-benchmarks
パフォーマンス測定の実施 パフォーマンス測定の実施
04 チーム内フィードバック
チーム内フィードバック チーム内フィードバック r チーム内デイリーでパフォーマンスの計測結果とリファレンスコードを提示し、メン バーからフィードバックをもら1 r Panda CSS派とKuma UI派で割れe r
結果、Kuma UIの導入を検討することに
Kuma UIについて
Kuma UIについて Kuma UIについて i ヘッドレスなUIコンポーネント集とゼロランタイムで動くCSS in JS を兼ねたライブラ
i ビルド時に決定できるスタイルを静的に抽出し、動的に変更される可能性のあるスタ イルに対しては実行時にDirty Checking を行なうことで、ハイブリッドなアプローチ を実 i ヘッドレスUIコンポーネントを兼ねるため、独自のデザイントークンの組み合わせも 可能
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で補って開発を 行う方針
最後に 最後に 7 Kuma UIや他のCSSライブラリの導入事例などあれば、ぜひ懇親会でお話ししましょ う!