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
610
Thank you <💅>, What's the Next?
styled-componentがmaintenance modeになったことを受けて、React19に対応したZero-Runtime CSSを3つ挙げて比較・解説する
Hayashibara Yuto
April 18, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
130
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
260
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.8k
Cloudflare Workersで進めるリモートMCP活用
syumai
5
640
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
250
VitestのIn-Source Testingが便利
taro28
9
2.5k
医療系ソフトウェアのAI駆動開発
koukimiura
1
120
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
140
Road to Ruby for A Linguistics Nerd
hayat01sh1da
PRO
0
310
Serving TUIs over SSH with Go
caarlos0
0
710
ComposeでのPicture in Picture
takathemax
0
140
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Navigating Team Friction
lara
185
15k
Raft: Consensus for Rubyists
vanstee
137
6.9k
How to Ace a Technical Interview
jacobian
276
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
What's in a price? How to price your products and services
michaelherold
245
12k
The Language of Interfaces
destraynor
158
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How to train your dragon (web standard)
notwaldorf
91
6k
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.