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
3.9k
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
140
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.9k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
1.4k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
640
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
690
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
The World Runs on Bad Software
bkeepers
PRO
61
6.8k
Code Reviewing Like a Champion
maltzj
516
39k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
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ライブラリの導入事例などあれば、ぜひ懇親会でお話ししましょ う!