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

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

Yuku Kotani
December 30, 2024
Programming
5
460

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

Nihonbashi.js #9 https://nihonbashi-js.connpass.com/event/332328/

Yuku Kotani

December 30, 2024
Tweet

More Decks by Yuku Kotani

See All by Yuku Kotani
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
11
2.9k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.2k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.3k
Real World Type Puzzle and Code Generation
yukukotani
4
860
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
510
GraphQLスキーマ設計の勘所
yukukotani
42
17k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
720
先を見据えたMVPのフロントエンド開発
yukukotani
0
290
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
yukukotani
2
2.9k

Other Decks in Programming

See All in Programming
php-conference-japan-2024
tasuku43
0
380
テストコード書いてみませんか？
onopon
2
250
CloudflareStack でRAGに入門
asahiiwm
0
130
Spatial Rendering for Apple Vision Pro
warrenm
0
260
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
fuyan777
1
660
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
1
310
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
890
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
360
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
5
1.2k
Findy Team+ Awardを受賞したかった！ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
120
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
130
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
140

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Statistics for Hackers
jakevdp
796
220k
Code Review Best Practice
trishagee
65
17k
Code Reviewing Like a Champion
maltzj
521
39k
A better future with KSS
kneath
238
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Unsuck your backbone
ammeep
669
57k
Thoughts on Productivity
jonyablonski
68
4.4k
How GitHub (no longer) Works
holman
311
140k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
4 Signs Your Business is Dying
shpigford
182
21k

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. ありがとうございました このテクを使ったライブラリを作ったので使ってね