【App Router時代のスタイリング革命】 Zero-Runtimeの理解とvanilla-extractという選択肢

なぜvanilla-extractを選択したのかについてのお話です。

Transcript

1. 2024年8月6日
 TSKaigiサブイベント #1 フロントエンド ©BLUEISH Inc.All Rights Reserved. 【App Router時代のスタイリング革命】
 Zero-Runtimeの理解とvanilla-extractという選択肢
2. RP 自己紹3 HP Zero-Runtimeの重要) 2P App Router時代のNext.jsスタイリング戦Æ ÇP vanilla-extractの紹3 GP vanilla-extractの実Â P まとめ ©BLUEISH Inc.All Rights Reserved. アジェンダ
3. X のQRコード 1.自己紹介 ©BLUEISH Inc.All Rights Reserved. ‡ Flutterを使用したモバイルアプリ開‚ ‡ 対話型AIを使用した自社サービスの開‚ ‡ AWS、Amazon Bedrockなど、インフラ周りのキャッチアップに も注力 ‡ 11月開催の“技術書典 17”に参加予定のため、現在執筆活動 ‡ Xのフォローお願いします！ 株式会社BLUEISH
 System Engineer / Executive Assistant to CEO @osasasasa22 おささ
4. 1.自己紹介（開発中のサービス①） ©BLUEISH Inc.All Rights Reserved. 【Omni Workspace （オムニ ワークスペース）】https://omni-workspace.com¥  エンタープライズ向けAI・LLMアプリ開発プラットフォーp  各ドメインに特化した実務レベルの専門性の高いワークフローを自動生成”  世界最大のデータセンター企業Equinixと協業。
 Platform Equinix®で ハイブリッド・マルチクラウド環境を容易に構築”  使用技術（フロント）
 Next.js（App Router）× TypeScript × vanilla-extract × Storybook
5. 1.自己紹介（開発中のサービス②） ©BLUEISH Inc.All Rights Reserved. 【AI am (アイ アム)】https://ai-am-with.co‡ µ 実在するタレントの個性を学習したAIと会話ができる対話型AIサービ· µ チャットに加え、親密度機能や投げ銭機能’ µ 元乃木坂46の和田まあやさんとコラボした、
 ”AI AM MAAYAクローズドβ版”を 8/10(土）にリリース予} µ 使用技術（フロント）
 Next.js（App Router）× TypeScript × vanilla-extract × Storybook
6. App Router使ってますよね？ ©BLUEISH Inc.All Rights Reserved.
7. ©BLUEISH Inc.All Rights Reserved. 『App Router』はNext.js 13.4で安定版(Stable) として導入されたルーティングシステム
8. ©BLUEISH Inc.All Rights Reserved. CSS-in-JSライブラリに影響が！
9. ©BLUEISH Inc.All Rights Reserved. React Server Componentsは、SSRに特化しており、 Runtime CSS-in-JSのようなクライアントサイドでの処理は サポートしていません Emotionが・・・・
10. 2.Zero-Runtimeの重要性 ©BLUEISH Inc.All Rights Reserved.
11. ©BLUEISH Inc.All Rights Reserved. Runtime CSS-in-JSとZero-Runtime CSS-in-JS の CSS生成タイミングについて
12. ©BLUEISH Inc.All Rights Reserved. Runtime時にCSSを生成するのが「Runtime CSS-in-JS」 JavaScript実行時 (Runtime時) CSS生成 DOMに適用 CSS生成タイミングについて Zero-Runtimeの重要性
13. ©BLUEISH Inc.All Rights Reserved. 15 Build時にCSSを生成するのが「Zero-Runtime CSS-in-JS」 Build時にCSS生成 静的CSSファイル として出力 DOMに適用 CSS生成タイミングについて Zero-Runtimeの重要性
14. 3.App Router時代のNext.jsスタイリング戦略 ©BLUEISH Inc.All Rights Reserved.
15. 5.vanilla-extractについてご紹介 ©BLUEISH Inc.All Rights Reserved.
16. ©BLUEISH Inc.All Rights Reserved. 15 vanilla-extractの概要と主な特徴 vanilla-extractの開発者。 Mark Dalgleish氏
17. ©BLUEISH Inc.All Rights Reserved. vanilla-extract の満足度は、2023年度も2位！
18. 6.vanilla-extractの実践 ©BLUEISH Inc.All Rights Reserved.
19. ©BLUEISH Inc.All Rights Reserved. 15 CSSの型安全性の実現
20. ©BLUEISH Inc.All Rights Reserved. CSSのスタイルを定義 定義したスタイルを コンポーネントに適用 CSSの型安全性の実現 vanilla-extractの実践
21. © B LU E I S H I n c . A l l R i g h t s R e s e r ve d . TypeScriptとの完全な統合 vanilla-extractの実践 【コンパイル時のエラー検出】
 プロパティ名のタイプミスや無効な値の使用をコンパイル時に検出 【コード補完】
 IDEの自動補完機能により、有効なCSSプロパティと値を提案 【リファクタリングの安全性】
 型チェックにより、大規模なスタイル変更も安全に
22. Emotion使っている/使っていた方いますか？ ©BLUEISH Inc.All Rights Reserved.
23. ©BLUEISH Inc.All Rights Reserved. 実は「vanilla-extract」では「Emotion」と ほぼ同等の事ができます！
24. ©BLUEISH Inc.All Rights Reserved. 動的で柔軟なスタイル生成を可能にする
 ”Recipes”パッケージ
25. ©BLUEISH Inc.All Rights Reserved. Styleの比較 vanilla-extract Emotion
26. ©BLUEISH Inc.All Rights Reserved. 7.まとめ App Router時代のスタイリング戦略において最適な選択肢となる、 CSS-in-JSライブラリ「vanilla-extract」 
 vanilla-extract は、 、 、 という 三拍子が揃っています！ パフォーマンス 型安全性 開発効率
27. ©BLUEISH Inc.All Rights Reserved. Zero-Runtime、スタイリング戦略、 vanilla-extractをもっと詳しく知りたい方へ
28. ご清聴ありがとうございました。 是非X のフォローお願いします！ ©BLUEISH Inc.All Rights Reserved.