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
610
僕が思い描く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
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
990
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
600
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
180
私はどうやって技術力を上げたのか
yusukebe
43
17k
実践AIチャットボットUI実装入門
syumai
7
2.4k
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.4k
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
プログラマのための作曲入門
cheebow
0
540
CSC509 Lecture 04
javiergs
PRO
0
290
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Documentation Writing (for coders)
carmenintech
75
5k
Docker and Python
trallard
46
3.6k
A better future with KSS
kneath
239
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Language of Interfaces
destraynor
162
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
It's Worth the Effort
3n
187
28k
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つになった
ありがとうございました このテクを使ったライブラリを作ったので使ってね