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.5k
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
230
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
4.9k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.3k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
890
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
67
ブログを自作した話
yud0uhu
1
18
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
23
Rustで自作しながら学ぶ仮想DOM
yud0uhu
1
23
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Optimizing for Happiness
mojombo
376
70k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
The Invisible Side of Design
smashingmag
298
50k
Making the Leap to Tech Lead
cromwellryan
133
9k
Embracing the Ebb and Flow
colly
84
4.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Visualization
eitanlees
146
15k
Automating Front-end Workflow
addyosmani
1366
200k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
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ライブラリの導入事例などあれば、ぜひ懇親会でお話ししましょ う!