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
800
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
ReatcにおけるMRAH設計のススメ
ahoxa
0
110
Other Decks in Programming
See All in Programming
Improving my own Ruby thereafter
sisshiki1969
1
160
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
testingを眺める
matumoto
1
140
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
Testing Trophyは叫ばない
toms74209200
0
860
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
680
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
200
Ruby Parser progress report 2025
yui_knk
1
440
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
110
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Automating Front-end Workflow
addyosmani
1370
200k
How GitHub (no longer) Works
holman
315
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Visualization
eitanlees
148
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
A designer walks into a library…
pauljervisheath
207
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Designing for Performance
lara
610
69k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
Thank you < > What’s Next? Ahoxa April 18th, 2025
自己紹介 林原優仁 Hayashibara Yuto ‘25年3月 大阪大学経済学部卒業 ‘25年4月 株式会社HRBrain 正式入社 u
React, ReactNativq u Hons u Gs u Blendeb u Unity u 週4ジム(行ってた u 猫が世界を救う ‘24年8月 株式会社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.