ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する

Vue Fes Japan 2025で発表したLTの資料です。

https://vuefes.jp/2025/sponsors/cyberagent#did0es

Transcript

1. ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログの リリースサイクルを高速化する 2025/10/25 @ Vue Fes Japan 2025 did0es
2. 自己紹介 did0es(🗣 ディドス) - Hirai shuta 株式会社サイバーエージェント グループIT推進本部 CIU Software Engineer(Web FrontEnd) Next Experts(TypeScript) Lead organizer for FEC Tokyo, Meguro.es X: https://x.com/did0es GitHub: https://github.com/shuta13 For more: https://did0.es
3. 大規模モノレポでViteを活用し UIカタログのリリースを 高速化してきたお話をします
4. 1.モノレポの概要 2.Cycloud UIについて 3.Cycloud UIの裏側 4.Vite + Project Referencesの注意点 5.比較・まとめ
5. モノレポの概要
6. SDK Client • CIUのWebフロントエンド向けの SDK • 50個以上のパッケージ 例： Cycloud UI UIライブラリ Cycloud Use クライアント ロジック Cycloud APIs APIクライアント Create Cycloud App ワンコマンドでWebUI 生成CLI 開発ツールの Config系 ESLint・Prettier・Jest etc…
7. SDK Client • CIUのWebフロントエンド向けの SDK • 50個以上のパッケージ 例： Cycloud UI UIライブラリ Cycloud Use クライアント ロジック Cycloud APIs APIクライアント Create Cycloud App ワンコマンドでWebUI 生成CLI 開発ツールの Config系 ESLint・Prettier・Jest etc…
8. Cycloud UIについて
9. Cycloud UIとは • React + TailwindCSS製のUIライブラリ Cycloudのブランディングと Webフロントの開発効率向上のために開発 • 35個のコンポーネント 組み合わせてCycloudのWebUIを実現
10. Cycloud UIの構成 　
11. Cycloud UIの裏側
12. Vite + StorybookによるUIカタログ • 各WebUIでのWebpackによる運用を一新 サービスのコンソールごとにWebpackで Storybookを運用していた • SDKに集約しViteを使うように @storybook/react-viteで実現
13. TS Project Referencesによるビルド • 全てをViteやtscでビルドすると オーバーヘッドが大きい Project Referencesで依存を明示し、 要るものだけビルド（右図参照） • GHAでビルドしてデプロイ 3〜4分程度で完了
14. Vite + Project Referencesの 注意点
15. 注意点① • .storybook/main.jsに以下の記述がないとビルドがコケる Project Referencesで参照しているパッケージを追加する
16. 注意点② • パッケージが CommonJS形式だとビルドがコケる Vite向けにtscでES Modules形式にする
17. 比較・まとめ
18. Webpackやtsc個別実行との比較 計測 + Claude Codeでシミュレート ビルドステップ パターンA Vite + tsc -b パターンB Vite + 個別tsc パターンC Webpack + tsc -b パターンD Webpack + 個別tsc 型チェック 30〜45秒 2〜3分 30〜45秒 2〜3分 Storybookの ビルド 2〜3分 2〜3分 5〜8分 5〜8分 devサーバー 起動 5〜15秒 5〜15秒 30〜60秒 30〜60秒 ホットリロード 0.1〜0.5秒 0.1〜0.5秒 1〜3秒 1〜3秒
19. まとめ • ViteでUIカタログを高速に反映できた Webpackの1/2の時間でデプロイ CycloudのWebUIの設計を効率化 • Project Referencesでさらに高速に tsc個別実行の1/6の時間で型チェック・ビルド トータル3〜4分でStorybookをデプロイ
20. アンケートへのご協力のお願い https://forms.gle/eLSMDaDnJS8bS2XZA 2〜3分ほどで回答出来ます！
21. 予め準備してあるWebアプリケーションのパフォーマ ンス改善・高速化を競い合うハッカソン。 主にWeb技術（フロントエンドおよびNode.js）に関 するチューニングを出題いたします。 # 開催日 2026年3月20日(金・祝) - 21日(土) connpassで参加受付中 # 題材 架空のSNSアプリ # その他 社会人 / 学生どなたでも参加可能 Web Speed Hackathon 2026　【3月開催】 概要 #WebSpeedHackathon で検索🔎
22. 選考サイトでは選考フローの解説やサイバーエージェントの社員紹介等コンテンツも充実。 エントリーをお待ちしております！ 【27卒学生向け】採用選考エントリー受付開始
23. ありがとうございました