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
700
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
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
380
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
11
3.1k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.4k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.5k
Real World Type Puzzle and Code Generation
yukukotani
4
900
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
540
GraphQLスキーマ設計の勘所
yukukotani
42
18k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
760
先を見据えたMVPのフロントエンド開発
yukukotani
0
310
Other Decks in Programming
See All in Programming
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.2k
OUPC2024 Day 1 解説
kowerkoint
0
400
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
7
6.7k
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
Going Structural with Named Tuples
bishabosha
0
170
エンジニア未経験が最短で戦力になるためのTips
gokana
0
210
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.7k
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
260
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
6
3k
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
How to Ace a Technical Interview
jacobian
276
23k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Done Done
chrislema
183
16k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
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つになった
ありがとうございました このテクを使ったライブラリを作ったので使ってね