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
890
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
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
190
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
410
CSC509 Lecture 06
javiergs
PRO
0
260
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
930
CSC305 Lecture 06
javiergs
PRO
0
240
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
430
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
Claude Agent SDK を使ってみよう
hyshu
0
1.1k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Designing Experiences People Love
moore
142
24k
How GitHub (no longer) Works
holman
315
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Navigating Team Friction
lara
190
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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.