Thank you <💅>, What's the Next?

styled-componentがmaintenance modeになったことを受けて、React19に対応したZero-Runtime CSSを3つ挙げて比較・解説する

Transcript

1. Thank you < > What’s Next? Ahoxa April 18th, 2025
2. 自己紹介 林原優仁 Hayashibara Yuto ‘25年3月 大阪大学経済学部卒業 ‘25年4月 株式会社HRBrain 正式入社 React, ReactNative Hono Go Blender Unity 週4ジム(行ってた) 猫が世界を救う ‘24年4月 株式会社HRBrain インターンとして入社 経歴 趣味・スタック @4h0xa
3. Contents for today < >よ、ありがとう New Challengers 比べてみよう 比較まとめ で、結局どれがいいの？ おまけ（CSS抽出）
4. styled-components が 
 maintenance mode に < >よ、ありがとう
5. New Challengers Tailwind 「説明不要。」 Vanilla-extract SCSSの亡霊に取り憑かれし TypeScripterへ Linaria styled が忘れられないあなたへ
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
7. 比べてみよう 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
8. 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 比べてみよう
9. 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 比べてみよう
10. CSS比較表 項目 Tailwind CSS Linaria vanilla-extract 型安全性 △ △ スケーラビリティ 中 中〜高 高 初心者フレンドリー ◎ ◦ △ AI親和性 ◦ △
11. で、結局どれがいいの？ CSSにこだわりがない → Tailwind styled-componentsが恋しい → Linaria スケーラブルにガチりたい → vanilla-extract
12. どうやって CSS を抽出してるの？ PostCSS / JIT クラス名解析 + 最低限のCSS Vite / Webpack 静的構文解析 + 全て反映 Babel / Vite TSファイルをコンパイル + 全て反映
13. Thank you! Reach out to me if you have Questions.