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
790
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
AI Coding Agent Enablement in TypeScript
yukukotani
18
9.7k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
7.3k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
490
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
12
3.2k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.7k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.6k
Real World Type Puzzle and Code Generation
yukukotani
4
940
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
570
GraphQLスキーマ設計の勘所
yukukotani
42
18k
Other Decks in Programming
See All in Programming
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
2
240
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
390
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
童醫院敏捷轉型的實踐經驗
cclai999
0
210
Deep Dive into ~/.claude/projects
hiragram
10
2.2k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
120
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
170
Create a website using Spatial Web
akkeylab
0
310
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Navigating Team Friction
lara
187
15k
Optimizing for Happiness
mojombo
379
70k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
GraphQLとの向き合い方2022年版
quramy
49
14k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
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つになった
ありがとうございました このテクを使ったライブラリを作ったので使ってね