Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Yuku Kotani Yuku Kotani
December 30, 2024
Programming
5
760

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

Nihonbashi.js #9 https://nihonbashi-js.connpass.com/event/332328/
Avatar for Yuku Kotani

Yuku Kotani

December 30, 2024
Tweet

More Decks by Yuku Kotani

See All by Yuku Kotani
AI Coding Agent Enablement in TypeScript
Avatar for Yuku Kotani yukukotani
17
7.1k
AI Coding Agent Enablement - エージェントを自走させよう
Avatar for Yuku Kotani yukukotani
14
7k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
Avatar for Yuku Kotani yukukotani
3
440
僕が思い描くTypeScriptの未来を勝手に先取りする
Avatar for Yuku Kotani yukukotani
11
3.2k
Web技術を駆使してユーザーの画面を「録画」する
Avatar for Yuku Kotani yukukotani
14
7.6k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
Avatar for Yuku Kotani yukukotani
5
1.6k
Real World Type Puzzle and Code Generation
Avatar for Yuku Kotani yukukotani
4
930
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
Avatar for Yuku Kotani yukukotani
2
560
GraphQLスキーマ設計の勘所
Avatar for Yuku Kotani yukukotani
42
18k

Other Decks in Programming

See All in Programming
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
Avatar for Tomohiro Tani taniiicom
2
570
Blueskyのプラグインを作ってみた
Avatar for Hakkadaikon hakkadaikon
1
280
バランスを見極めよう！実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
Avatar for whatasoda whatasoda
2
770
Efficiency and Rock 'n’ Roll (Really!)
Avatar for Holly Cummins hollycummins
0
590
CRUD から CQRS へ ～ 分離が可能にする柔軟性
Avatar for Takashi Kawae tkawae
0
220
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
Avatar for Kei Oyama oyamakei
0
1k
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
Avatar for CUEBiC Inc. cuebic9bic
1
260
Proxmoxをまとめて管理できる コンソール作ってみました
Avatar for karugamo karugamo
1
410
Perlで痩せる
Avatar for Yuuki Shimizu yuukis
1
660
Use Perl as Better Shell Script
Avatar for karupanerura karupanerura
0
650
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
Avatar for mizdra mizdra
PRO
3
2.4k
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
Avatar for にー兄さん drumath2237
0
110

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
6
650
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
7
590
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.8k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
1
78
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k

Transcript

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

  2. 自己紹介 小谷 優空 - @yukukotani ・VP of Technology @ Ubie,

    Inc. ・Maintainer of KumaUI ・Student @ Univ. Tsukuba

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

  4. 作ってみよう

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

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

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

  8. そう簡単には作れない 世の中のCSS-in-JSは色々頑張っていX  <head>にstyleを差し込んで参照することで同じスタイルをまとめX  → useLayoutEffectを使うのでSSRでは動かない b  SSRの描画中に必要なstyleをメモしておいて最後に差し込

     フレームワークによっては無駄に2回描画関数が走る

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

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

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

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

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

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

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

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

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

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

  19. Atomic CSS にする

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

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

OSZAR »