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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

©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 佐々木美遥自己紹介

Slide 3

Slide 3 text

©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

Slide 4

Slide 4 text

©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

Slide 5

Slide 5 text

©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 おまけ：現場の) まとめ

Slide 6

Slide 6 text

Slide 7

Slide 7 text

©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)への移行リアーキテクチャの背景 ¤£ はじめに

Slide 8

Slide 8 text

Slide 9

Slide 9 text

©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）

Slide 10

Slide 10 text

Slide 11

Slide 11 text

©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）

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

©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）

Slide 18

Slide 18 text

Slide 19

Slide 19 text

©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時に生成

Slide 20

Slide 20 text

©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について

Slide 21

Slide 21 text

©BLUEISH Inc.All Rights Reserved. 【コンパイル時のエラー検出】  プロパティ名のタイプミスや無効な値の使用をコンパイル時に検出【コード補完】  IDEの自動補完機能により、有効なCSSプロパティと値を提案【リファクタリングの安全性】  型チェックにより、大規模なスタイル変更も安全に Vanilla-Extractの主な特徴③：TypeScriptとの完全な統合 ´³ Vanilla-Extractについて

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

©BLUEISH Inc.All Rights Reserved. おまけ：現場の声① Ra EmotionからVanilla-Extractへの移行 (コード比較) Q. Emotionと比較して、コードの可読性や保守性は向上しましたか？  また、理由があれば教えてください。【回答の理由（一部抜粋）} ~ 「Emotionではが無かった」「のは良い ~ 「レと感じました ~ 「と思います。」 ... 型の定義型が使えるシピなどでpropsごとにデザインを設定しやすくなった cssのファイルを分離して管理するので、コードの見通しは良くなった

Slide 27

Slide 27 text

©BLUEISH Inc.All Rights Reserved. おまけ：現場の声② Ra EmotionからVanilla-Extractへの移行 (コード比較) Q. vanilla-extractの使いやすいところ、好きな機能があれば教えてください。 A. 解答（一部抜粋「ところx 「のが良いx 「レシピとさらにcompoundVariantsでのが便利」「名前がかわいい x 「ところは、それだけで導入意義がかなりある。」 CSSを知っていれば直感的にかけるある程度のスタイルがモジュール側で型つけされてるので補完が出る複数のバリアントで条件分岐できるゼロランタイムでサーバーコンポーネントにも使いやすい

Slide 28

Slide 28 text

©BLUEISH Inc.All Rights Reserved. おまけ：現場の声③ Ra EmotionからVanilla-Extractへの移行 (コード比較) Q. vanilla-extractで改善してほしい点や追加してほしい機能はありますか？ A. 解答（一部抜粋x 「「「をデフォルトでつけてほしい「様々なレベル感のエンジニアが使いこなせるようなドキュメントか非公式記事がほしい。」未使用スタイルの検出をしてくれる機能アニメーション周りはmodule cssを使ってた breakpointsの設定を簡単にできる機能現状のドキュメントは慣れた人向けな印象プロジェクトでのでこのあたりが  書きやすくなれば良き

Slide 29

Slide 29 text

Slide 30

Slide 30 text

©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