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
5
4.4k
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
200
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
4.7k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.1k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
850
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
940
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
33
ブログを自作した話
yud0uhu
1
13
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
21
Rustで自作しながら学ぶ仮想DOM
yud0uhu
1
19
Featured
See All Featured
Writing Fast Ruby
sferik
626
60k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
Practical Orchestrator
shlominoach
186
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
The Cult of Friendly URLs
andyhume
77
6k
How GitHub (no longer) Works
holman
311
140k
Gamification - CAS2011
davidbonilla
80
5k
How to train your dragon (web standard)
notwaldorf
87
5.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
GraphQLとの向き合い方2022年版
quramy
43
13k
It's Worth the Effort
3n
183
27k
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ライブラリの導入事例などあれば、ぜひ懇親会でお話ししましょ う!