【リアーキテクチャ】Pages_Router × EmotionからApp×Router × Vanilla-extractへの移行

Transcript

1. ©BLUEISH Inc.All Rights Reserved. Pages Router × Emotionから
 App Router × Vanilla-extractへの移行 株式会社BLUEISH　佐々木美遥(@osasasasa22) リアーキテクチャ 2024/09/05 各社から学ぶ！フロントエンドのためのリアーキテクチャ
2. ©BLUEISH Inc.All Rights Reserved. t これまでは、Flutterを使用したモバイルアプリ開発や、対話型AI を使用した自社サービスの開発を中心に携わってきまし’ t 11月開催の“技術書典 17”に参加予定のため、現在執筆活動i t 最近、JAWS-UG AI/ML 支部運営メンバーに加わりました2 t お酒と猫が好きですが、最近全然飲み吸いにできていない 株式会社BLUEISH
 System Engineer / Executive Assistant to CEO @osasasasa22 佐々木美遥 自己紹介
3. ©BLUEISH Inc.All Rights Reserved. 弊社サービス ① 76 はじめに 【Omni Workspace （オムニ ワークスペース）】https://omni-workspace.com¯ ‘ エンタープライズ向けAI・LLMアプリ開発プラットフォー• ‘ 各ドメインに特化した実務レベルの専門性の高いワークフローを自動生成| ‘ 世界最大のデータセンター企業Equinixと協業。
 Platform Equinix®で ハイブリッド・マルチクラウド環境を容易に構築| ‘ 使用技術（フロント）
 Next.js（App Router）× TypeScript × vanilla-extract × Storybook
4. ©BLUEISH Inc.All Rights Reserved. 弊社サービス ② 76 はじめに 【AI am (アイ アム)】https://ai-am-with.co† p 実在するタレントの個性を学習したAIと会話ができる対話型AIサービ… p チャットに加え、親密度機能や投げ銭機能x p 元乃木坂46の和田まあやさんとコラボした、
 ”AI AM MAAYAクローズドβ版”を 8/10(土）にリリース予V p 使用技術（フロント）
 Next.js（App Router）× TypeScript × vanilla-extract × Storybook
5. ©BLUEISH Inc.All Rights Reserved. Index •‘ はじめに¨ ˜ なぜリアーキテクチャが必要かg ‘ Pages Router から App Router への移行¨ ˜ App Routerの登” ˜ App RouterとPages Routerの主な違– ˜ Server ComponentsのサポーŒ œ‘ Runtime CSS-in-JSとZero-Runtime CSS-in-J‰ ˜ CSS生成タイミングの違– ”‘ Vanilla-ExtractについE ˜ Vanilla-Extractの概x ˜ Vanilla-Extractの主な特“ A‘ EmotionからVanilla-Extractへの移行 (コード比較3 ˜ コード2 ˜ おまけ：現場の) —‘ まとめ
6. ©BLUEISH Inc.All Rights Reserved. ') はじめに
7. ©BLUEISH Inc.All Rights Reserved. Pages Router × Emotion App Router × vanilla-extract e Next.js 13.4で安定版として導入されたこ e Server Componentsの活‚ e JSバ ンドルサイズの削減 = App Router × Vanilla-Extract(Zero-Runtime CSS-in-JS)への移行 リアーキテクチャの背景 ¤£ はじめに
8. ©BLUEISH Inc.All Rights Reserved. DB Pages RouterからApp Routerへの移行
9. ©BLUEISH Inc.All Rights Reserved. 『App Router』はNext.js 13.4で安定版(Stable) として導入されたルーティングシステム App Routerの登場 ™g Pages RouterからApp Routerへの移行 ※Next.js 「Next.js 13.4」 https://nextjs.org/blog/next-13-4（参照2024-08-30）
10. ©BLUEISH Inc.All Rights Reserved. App RouterとPages Routerの主な違い Yc Pages RouterからApp Routerへの移行
11. ©BLUEISH Inc.All Rights Reserved. React Server Componentsは、SSRに特化しており、 Runtime CSS-in-JSのようなクライアントサイドでの処理は サポートしていません Emotionが・・・・ Server Componentsのサポート rv Pages RouterからApp Routerへの移行 ※Next.js 「App Router -CSS-in-JS」 https://nextjs.org/docs/app/building-your-application/styling/css-in-js（参照2024-08-30）
12. ©BLUEISH Inc.All Rights Reserved. 54 Runtime CSS-in-JSとZero-Runtime CSS-in-JS
13. ©BLUEISH Inc.All Rights Reserved. Runtime時にCSSを生成するのが「Runtime CSS-in-JS」 JavaScript実行時 (Runtime時) CSS生成 DOMに適用 CSS生成タイミングの違い sr Runtime CSS-in-JSとZero-Runtime CSS-in-JS
14. ©BLUEISH Inc.All Rights Reserved. 15 Build時にCSSを生成するのが「Zero-Runtime CSS-in-JS」 Build時にCSS生成 静的CSSファイル として出力 DOMに適用 CSS生成タイミングの違い vu Runtime CSS-in-JSとZero-Runtime CSS-in-JS
15. ©BLUEISH Inc.All Rights Reserved. 15 Build時にCSSを生成するのが「Zero-Runtime CSS-in-JS」 Build時にCSS生成 静的CSSファイル として出力 DOMに適用 CSS生成タイミングの違い vu Runtime CSS-in-JSとZero-Runtime CSS-in-JS
16. ©BLUEISH Inc.All Rights Reserved. @6 vanilla-extractについて
17. ©BLUEISH Inc.All Rights Reserved. 15 Vanilla-Extractの概要 VU Vanilla-Extractについて ※引用： X 「@markdalgleish」
 https://x.com/markdalgleish（参照2024-08-30） ※引用： vanilla-extract 「vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.」
 https://vanilla-extract.style/（参照2024-08-30）
18. ©BLUEISH Inc.All Rights Reserved. @6 Vanilla-Extractについて WV Vanilla-Extractについて ※引用： State of CSS 「CSS-in-JS」 https://2023.stateofcss.com/ja-JP/css-in-js/（参照2024-07-31）
19. ©BLUEISH Inc.All Rights Reserved. All styles generated at build time 　— just like Sass, Less, etc. Vanilla-Extractの主な特徴①：Build時のスタイル生成 •” Vanilla-Extractについて ※GitHub 「vanilla-extract」
 https://github.com/vanilla-extract-css/vanilla-extract?tab=readme-ov-file#-vanilla-extract （参照2024-07-29） すべてのスタイルをBuild時に生成 All styles generated at build time 　— just like Sass, Less, etc. すべてのスタイルをBuild時に生成
20. ©BLUEISH Inc.All Rights Reserved. Optional API for dynamic runtime theming. ※GitHub 「vanilla-extract」
 https://github.com/vanilla-extract-css/vanilla-extract?tab=readme-ov-file#-vanilla-extract （参照2024-07-29） Runtime時にテーマを変更するた めのAPIも、オプショナルで提供。
 （= ”Recipes”パッケージ） Vanilla-Extractの主な特徴②：動的なテーマ設定も可能 ÇÆ vanilla-extractについて
21. ©BLUEISH Inc.All Rights Reserved. 【コンパイル時のエラー検出】
 プロパティ名のタイプミスや無効な値の使用をコンパイル時に検出 【コード補完】
 IDEの自動補完機能により、有効なCSSプロパティと値を提案 【リファクタリングの安全性】
 型チェックにより、大規模なスタイル変更も安全に Vanilla-Extractの主な特徴③：TypeScriptとの完全な統合 ´³ Vanilla-Extractについて
22. ©BLUEISH Inc.All Rights Reserved. F1 EmotionからVanilla-Extractへの移行 (コード比較) vs
23. ©BLUEISH Inc.All Rights Reserved. Emotion Vanilla-Extract 移行例①：ファイル定義とprops指定 w† EmotionからVanilla-Extractへの移行 (コード比較) 「同一」ファイル内でスタイルを定義し、
 propsを「直接」使用 スタイルの定義は基本的に別ファイルで行う
 propsの使用も、「variant」での使用となる
24. ©BLUEISH Inc.All Rights Reserved. Emotion Vanilla-Extract 移行例②：擬似クラスの指定 s‚ EmotionからVanilla-Extractへの移行 (コード比較) Emotion とVanilla-Extract とでは、ほぼ違いがない!
25. ©BLUEISH Inc.All Rights Reserved. Emotion Vanilla-Extract 移行例③：ファイル名の違い s‚ EmotionからVanilla-Extractへの移行 (コード比較) Build時にCSSを生成するにあたり、
 「.css.ts」をつけることでCSSの生成対象に。 拡張子のルールは「.tsx」 拡張子のルールは「.css.ts」
26. ©BLUEISH Inc.All Rights Reserved. おまけ：現場の声① Ra EmotionからVanilla-Extractへの移行 (コード比較) Q. Emotionと比較して、コードの可読性や保守性は向上しましたか？
 また、理由があれば教えてください。 【回答の理由（一部抜粋）} ~ 「Emotionでは が無かった」「 のは 良い‘ ~ 「レ と感じました‘ ~ 「 と思います。」 ... 型の定義 型が使える シピなどでpropsごとにデザインを設定しやすくなっ た cssのファイルを分離して管理するので、コードの見通 しは良くなった
27. ©BLUEISH Inc.All Rights Reserved. おまけ：現場の声② Ra EmotionからVanilla-Extractへの移行 (コード比較) Q. vanilla-extractの使いやすいところ、好きな機能があれば教えてください。 A. 解答（一部抜粋‡ Š 「 ところx Š 「 のが良いx Š 「レシピとさらにcompoundVariantsで のが便利」Ÿ Š 「名前がかわいい x Š 「 ところは、それだけで導入 意義がかなりある。」 CSSを知っていれば直感的にかける ある程度のスタイルがモジュール側で型つけされてるので補完が出る 複数のバリアントで条件分岐できる ゼロランタイムでサーバーコンポーネントにも使いやすい
28. ©BLUEISH Inc.All Rights Reserved. おまけ：現場の声③ Ra EmotionからVanilla-Extractへの移行 (コード比較) Q. vanilla-extractで改善してほしい点や追加してほしい機能はありますか？ A. 解答（一部抜粋x € 「 Ž € 「 Ž € 「 をデフォルトでつけてほしいŽ € 「様々なレベル感のエンジニアが使いこなせるようなドキュメントか非公式記事がほし い。 」 未使用スタイルの検出をしてくれる機能 アニメーション周りはmodule cssを使ってた breakpointsの設定を簡単にできる機能 現状のドキュメントは慣れた人向けな印象 プロジェクトで のでこのあたりが
 書きやすくなれば良き
29. ©BLUEISH Inc.All Rights Reserved. (% まとめ
30. ©BLUEISH Inc.All Rights Reserved. (% まとめ u App Routerの採用により、Server Componentsの活用や
 より直感的なファイル構造の実現が可能‘ u しかし、EmotionのようなRuntime時にCSSを生成するライブラリは、
 Server Componentsの恩恵を十分に受けられないため、
 u Emotionを触っていた方には⁨⁩特に、
 移行しやすい&型安全で直感的な開発が可能なVanilla-Extractを触ってみて欲しい App Routerへの移行時にはZero Runtime CSS-in-JSへの移行検討が必z
31. ©BLUEISH Inc.All Rights Reserved. ちょっとだけ宣伝
32. ©BLUEISH Inc.All Rights Reserved. 宣伝①：弊社主催のイベントを行います！(2024/09/26 17:50~) https://blueish.connpass.com/event/329186/
33. ©BLUEISH Inc.All Rights Reserved. 宣伝②：GenAI/SUM(2024/10/7~9)に弊社が参加します！ https://www.xsum.jp/gai/startup.html
34. ©BLUEISH Inc.All Rights Reserved. 最後までご清聴、
 ありがとうございました！