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
Thank you <💅>, What's the Next?
Search
Hayashibara Yuto
April 18, 2025
Programming
1
870
Thank you <💅>, What's the Next?
styled-componentがmaintenance modeになったことを受けて、React19に対応したZero-Runtime CSSを3つ挙げて比較・解説する
Hayashibara Yuto
April 18, 2025
Tweet
Share
More Decks by Hayashibara Yuto
See All by Hayashibara Yuto
ReactにおけるMRAH設計のススメ
ahoxa
0
140
Other Decks in Programming
See All in Programming
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
150
ALL CODE BASE ARE BELONG TO STUDY
uzulla
1
150
株式会社 Sun terras カンパニーデック
sunterras
0
280
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.9k
Catch Up: Go Style Guide Update
andpad
0
220
Advance Your Career with Open Source
ivargrimstad
0
480
CSC509 Lecture 04
javiergs
PRO
0
300
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
640
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
120
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Fireside Chat
paigeccino
40
3.7k
How GitHub (no longer) Works
holman
315
140k
Designing Experiences People Love
moore
142
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Documentation Writing (for coders)
carmenintech
75
5k
The Cost Of JavaScript in 2023
addyosmani
54
9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Done Done
chrislema
185
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
Thank you < > What’s Next? Ahoxa April 18th, 2025
自己紹介 林原優仁 Hayashibara Yuto ‘25年3月 大阪大学経済学部卒業 ‘25年4月 株式会社HRBrain 正式入社 React,
ReactNative Hono Go Blender Unity 週4ジム(行ってた) 猫が世界を救う ‘24年4月 株式会社HRBrain インターンとして入社 経歴 趣味・スタック @4h0xa
Contents for today < >よ、ありがとう New Challengers 比べてみよう 比較まとめ で、結局どれがいいの?
おまけ(CSS抽出)
styled-components が maintenance mode に < >よ、ありがとう
New Challengers Tailwind 「説明不要。」 Vanilla-extract SCSSの亡霊に取り憑かれし TypeScripterへ Linaria styled が忘れられないあなたへ
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor
比べてみよう 1 2 3 4 < class="bg-gray-500 hover:bg-gray-600 px-4 py-2
rounded"> Click Me </ > button button Click me クソ長class上等! Purgeでビルド時に超軽量 デザインシステムと相性◎ 習うより慣れよ Tailwind CSS
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 import from const { styled } ; <RedButton>Click Me</RedButton> RedButton styled.button ; '@linaria/react' ` background-color: rgba(222, 222, 222, 1); color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer; &:hover { background-color: rgba(222, 222, 222, 0.6); } ` = Click Me 見た目は 、中身はCSS! ビルド時に静的解析してCSSを抽出 型補完はちょっと弱め Linaria 比べてみよう
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 import from export const { style } ; redButton ({ backgroundColor , color , padding , borderRadius , border , cursor , selectors { { backgroundColor , }, }, }); '@vanilla-extract/css' '#ef4444' 'white' '0.5rem 1rem' '0.375rem' 'none' 'pointer' '#dc2626' = : : : : : : : : : style '&:hover' Click Me 1 2 3 4 5 6 import as from './styles.css.ts' styles className styles redButton Click Me * button button ; < ={ . }> </ > 型!型!型! 学習コストはあるけど、所詮はCSS ビルド時に.cssファイルとして出力 スケーラブルな設計 Vanilla-extract 比べてみよう
CSS比較表 項目 Tailwind CSS Linaria vanilla-extract 型安全性 △ △ スケーラビリティ
中 中〜高 高 初心者フレンドリー ◎ ◦ △ AI親和性 ◦ △
で、結局どれがいいの? CSSにこだわりがない → Tailwind styled-componentsが恋しい → Linaria スケーラブルにガチりたい → vanilla-extract
どうやって CSS を抽出してるの? PostCSS / JIT クラス名解析 + 最低限のCSS Vite
/ Webpack 静的構文解析 + 全て反映 Babel / Vite TSファイルをコンパイル + 全て反映
Thank you! Reach out to me if you have Questions.