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

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つになった

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

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

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

Yuku Kotani

More Decks by Yuku Kotani

Other Decks in Programming

Featured

Transcript