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
930
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
27
ブログを自作した話
yud0uhu
1
13
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
19
Rustで自作しながら学ぶ仮想DOM
yud0uhu
1
18
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
167
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Building Better People: How to give real-time feedback that sticks.
wjessup
362
19k
Being A Developer After 40
akosma
84
590k
Designing with Data
zakiwarfel
98
5.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.5k
Faster Mobile Websites
deanohume
304
30k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cult of Friendly URLs
andyhume
77
6k
Statistics for Hackers
jakevdp
796
220k
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ライブラリの導入事例などあれば、ぜひ懇親会でお話ししましょ う!