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
600
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
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
520
SwiftDataのカスタムデータストアを試してみた
1mash0
0
150
generative-ai-use-cases(GenU)の推しポイント ~2025年4月版~
hideg
1
390
七輪ライブラリー: Claude AI で作る Next.js アプリ
suneo3476
1
190
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
160
Vibe Coding の話をしよう
schroneko
14
3.8k
Road to Ruby for A Linguistics Nerd
hayat01sh1da
PRO
0
180
一緒に働きたくなるプログラマの思想 #QiitaConference
mu_zaru
81
21k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.5k
「理解」を重視したAI活用開発
fast_doctor
0
300
開発者フレンドリーで顧客も満足?Platformの秘密
algoartis
0
210
Designing Your Organization's Test Pyramid ( #scrumniigata )
teyamagu
PRO
5
1.3k
Featured
See All Featured
KATA
mclloyd
29
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Embracing the Ebb and Flow
colly
85
4.7k
Rails Girls Zürich Keynote
gr2m
94
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
790
A better future with KSS
kneath
239
17k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Adopting Sorbet at Scale
ufuk
76
9.4k
Visualization
eitanlees
146
16k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
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.