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
890
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
5
1.8k
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
10
3.4k
AI Coding Agent Enablement in TypeScript
yukukotani
20
12k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
7.7k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
620
僕が思い描く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
960
Other Decks in Programming
See All in Programming
Swift Concurrency - 状態監視の罠
objectiveaudio
2
480
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.6k
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
620
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
210
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
750
私はどうやって技術力を上げたのか
yusukebe
43
17k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
790
Catch Up: Go Style Guide Update
andpad
0
200
株式会社 Sun terras カンパニーデック
sunterras
0
250
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
240
CSC305 Lecture 05
javiergs
PRO
0
210
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
380
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
4 Signs Your Business is Dying
shpigford
185
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Designing for Performance
lara
610
69k
The Language of Interfaces
destraynor
162
25k
Thoughts on Productivity
jonyablonski
70
4.9k
Rails Girls Zürich Keynote
gr2m
95
14k
We Have a Design System, Now What?
morganepeng
53
7.8k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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つになった
ありがとうございました このテクを使ったライブラリを作ったので使ってね