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
React 19でお手軽にCSS-in-JSを自作する
Search
Yuku Kotani
December 30, 2024
Programming
5
600
React 19でお手軽にCSS-in-JSを自作する
Nihonbashi.js #9
https://nihonbashi-js.connpass.com/event/332328/
Yuku Kotani
December 30, 2024
Tweet
Share
More Decks by Yuku Kotani
See All by Yuku Kotani
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
11
3k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.3k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.3k
Real World Type Puzzle and Code Generation
yukukotani
4
870
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
520
GraphQLスキーマ設計の勘所
yukukotani
42
18k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
730
先を見据えたMVPのフロントエンド開発
yukukotani
0
300
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
yukukotani
2
3k
Other Decks in Programming
See All in Programming
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
120
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1k
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
220
Azure AI Foundryのご紹介
qt_luigi
1
250
Vue.jsでiOSアプリを作る方法
hal_spidernight
0
120
為你自己學 Python
eddie
0
540
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
200
functionalなアプローチで動的要素を排除する
ryopeko
1
840
Rubyでつくるパケットキャプチャツール
ydah
0
470
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
140
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
410
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Agile that works and the tools we love
rasmusluckow
328
21k
It's Worth the Effort
3n
184
28k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Documentation Writing (for coders)
carmenintech
67
4.6k
Become a Pro
speakerdeck
PRO
26
5.1k
Typedesign – Prime Four
hannesfritz
40
2.5k
Building Applications with DynamoDB
mza
93
6.2k
Embracing the Ebb and Flow
colly
84
4.5k
Gamification - CAS2011
davidbonilla
80
5.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Code Review Best Practice
trishagee
65
17k
Transcript
React 19でお手軽に CSS-in-JSを自作する @yukukotani 2024/10/31 - Nihonbashi.js #9
自己紹介 小谷 優空 - @yukukotani ・VP of Technology @ Ubie,
Inc. ・Maintainer of KumaUI ・Student @ Univ. Tsukuba
CSS-in-JS? JavaScriptコード内でCSSも書ける君。Reactでよく使われる 有名どころは styled-components とか emotion とか
作ってみよう
簡単ですね style属性を埋め込むだけの高階関数
嬉しいですね 色がつきました
嬉しくない たくさん描画するとスタイルが重複して、サイズが爆発する
そう簡単には作れない 世の中のCSS-in-JSは色々頑張っていX <head>にstyleを差し込んで参照することで同じスタイルをまとめX → useLayoutEffectを使うのでSSRでは動かない b SSRの描画中に必要なstyleをメモしておいて最後に差し込
フレームワークによっては無駄に2回描画関数が走る
スタイルシート・・・重複・・・? 聞き覚えが・・・?
React 19 で組み込みサポートが拡充 なんか良くなったらしいぞ https://ja.react.dev/blog/2024/04/25/react-19
React 19 で組み込みサポートが拡充 インラインでstyleタグを描画すると href属性をキーとして重複排除しながらheadに差し込んでくれる https://ja.react.dev/reference/react-dom/components/style
作ってみよう style属性の代わりにstyleタグを差し込み、classNameで重複排除&参照 オブジェクトからCSSに変換 インラインstyleタグを差し込む classでスタイルを参照
作ってみよう スタイルシートのハッシュで一意なclassNameを生成 キーをケバブケースにしてるだけ backgroundColor -> background-color
嬉しいね headに1つだけstyleを差し込みclassで参照 重複するスタイル定義がなくなっている React が勝手に head に持っていってくれる 同じクラスを参照するだけ
本当に重複しないかな? スタイルの一部が動的に決まるコンポーネントを考える background-color を プロパティで変える
本当に重複しないかな? プロパティを変えて同時に描画してみる
本当に重複しないかな? `color: red;` が全クラスで重複しちゃうね(涙)
Atomic CSS にする コンポーネントに必要なスタイルを1つのクラスに押し込めるのではなく、 プロパティと値のペアそれぞれで独立したクラスを作る
Atomic CSS にする
嬉しいね `color: red;` が1つになった
ありがとうございました このテクを使ったライブラリを作ったので使ってね