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
830
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
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
1.9k
AI Coding Agent Enablement in TypeScript
yukukotani
19
11k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
7.5k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
550
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
12
3.3k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.8k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.7k
Real World Type Puzzle and Code Generation
yukukotani
4
950
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
580
Other Decks in Programming
See All in Programming
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
340
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
830
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
330
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
290
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
2.1k
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
350
実践 Dev Containers × Claude Code
touyu
1
170
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
240
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
460
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2k
バイブコーディング × 設計思考
nogu66
0
110
Portapad紹介プレゼンテーション
gotoumakakeru
1
120
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Writing Fast Ruby
sferik
628
62k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
We Have a Design System, Now What?
morganepeng
53
7.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
800
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Cult of Friendly URLs
andyhume
79
6.5k
What's in a price? How to price your products and services
michaelherold
246
12k
The Language of Interfaces
destraynor
158
25k
Making Projects Easy
brettharned
117
6.3k
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つになった
ありがとうございました このテクを使ったライブラリを作ったので使ってね