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
910
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
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
6
2.1k
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
10
4.1k
AI Coding Agent Enablement in TypeScript
yukukotani
20
13k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
7.8k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
640
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
12
3.3k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.9k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.8k
Real World Type Puzzle and Code Generation
yukukotani
4
960
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
530
Pythonに漸進的に型をつける
nealle
1
130
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
CSC305 Lecture 09
javiergs
PRO
0
320
CSC509 Lecture 06
javiergs
PRO
0
270
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
110
Devoxx BE - Local Development in the AI Era
kdubois
0
150
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
760
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
hpgrahsl
0
120
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Facilitating Awesome Meetings
lara
57
6.6k
Raft: Consensus for Rubyists
vanstee
140
7.2k
KATA
mclloyd
PRO
32
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Thoughts on Productivity
jonyablonski
71
4.9k
Side Projects
sachag
455
43k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Being A Developer After 40
akosma
91
590k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
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つになった
ありがとうございました このテクを使ったライブラリを作ったので使ってね