React 19でお手軽にCSS-in-JSを自作する

Slide 1

Slide 1 text

React 19でお手軽に CSS-in-JSを自作する @yukukotani 2024/10/31 - Nihonbashi.js #9

Slide 2

Slide 2 text

自己紹介小谷優空 - @yukukotani ・VP of Technology @ Ubie, Inc. ・Maintainer of KumaUI ・Student @ Univ. Tsukuba

Slide 3

Slide 3 text

CSS-in-JS? JavaScriptコード内でCSSも書ける君。Reactでよく使われる有名どころは styled-components とか emotion とか

Slide 4

Slide 4 text

作ってみよう

Slide 5

Slide 5 text

簡単ですね style属性を埋め込むだけの高階関数

Slide 6

Slide 6 text

嬉しいですね色がつきました

Slide 7

Slide 7 text

嬉しくないたくさん描画するとスタイルが重複して、サイズが爆発する

Slide 8

Slide 8 text

そう簡単には作れない世の中のCSS-in-JSは色々頑張っていX にstyleを差し込んで参照することで同じスタイルをまとめX → useLayoutEffectを使うのでSSRでは動かない b SSRの描画中に必要なstyleをメモしておいて最後に差し込フレームワークによっては無駄に2回描画関数が走る

Slide 9

Slide 9 text

スタイルシート・・・重複・・・？聞き覚えが・・・？

Slide 10

Slide 10 text

React 19 で組み込みサポートが拡充なんか良くなったらしいぞ https://ja.react.dev/blog/2024/04/25/react-19

Slide 11

Slide 11 text

React 19 で組み込みサポートが拡充インラインでstyleタグを描画すると href属性をキーとして重複排除しながらheadに差し込んでくれる https://ja.react.dev/reference/react-dom/components/style

Slide 12

Slide 12 text

作ってみよう style属性の代わりにstyleタグを差し込み、classNameで重複排除&参照オブジェクトからCSSに変換インラインstyleタグを差し込む classでスタイルを参照

Slide 13

Slide 13 text

作ってみようスタイルシートのハッシュで一意なclassNameを生成キーをケバブケースにしてるだけ backgroundColor -> background-color

Slide 14

Slide 14 text

嬉しいね headに1つだけstyleを差し込みclassで参照重複するスタイル定義がなくなっている React が勝手に head に持っていってくれる同じクラスを参照するだけ

Slide 15

Slide 15 text

本当に重複しないかな？スタイルの一部が動的に決まるコンポーネントを考える background-color をプロパティで変える

Slide 16

Slide 16 text

本当に重複しないかな？プロパティを変えて同時に描画してみる

Slide 17

Slide 17 text

本当に重複しないかな？ `color: red;` が全クラスで重複しちゃうね（涙）

Slide 18

Slide 18 text

Atomic CSS にするコンポーネントに必要なスタイルを1つのクラスに押し込めるのではなく、プロパティと値のペアそれぞれで独立したクラスを作る

Slide 19

Slide 19 text

Atomic CSS にする

Slide 20

Slide 20 text

嬉しいね `color: red;` が1つになった

Slide 21

Slide 21 text

ありがとうございましたこのテクを使ったライブラリを作ったので使ってね