急成⻑フロントエンドにおけるChromatic & Storybook活⽤の今と未来

■イベント
プロダクトの急成長を支えるフロントエンド改善の取り組みhttps://sansan.connpass.com/event/305970/

■登壇概要
タイトル：急成⻑フロントエンドにおけるChromatic & Storybook活⽤の今と未来
登壇者：技術本部 Bill One Engineering Unit　市川 達裕

■Bill One エンジニア 採用情報
https://media.sansan-engineering.com/billone-engineer

Transcript

1. Sansan株式会社 部署 名前 急成⻑フロントエンドにおける Chromatic & Storybook 活⽤の今と未来 Sansan技術本部 Sansan技術本部 Bill One Engineering Unit 市川 達裕
2. 写真が入ります 2022年 Sansanに中途⼊社。前職では企業向けのSaaS企業にて、 バックエンド・インフラ領域を主軸にサービス開発に注⼒。 Sansanでは、インボイス管理サービス「Bill One」にてWebアプ リケーション開発を⾏う中、チーム内外の技術的な改善をリード している。 市川 達裕 Sansan株式会社 Bill One Engineering Unit
3. Outline - Chromatic & Storybook とは？ - Bill One における Chromatic & Storybook 活⽤の今 - 2024 年 Chromatic & Storybook エコシステムの今後
4. Chromatic & Storybook とは？
5. - UI を Component 単位で整理・カタログ化 - 主要な Frontend Framework をサポート Storybook 4 出典: Storybook Design System https://master--5ccbc373887ca40020446347.chromatic.com
6. Storybook 5 😀 UI カタログ作って満⾜していませんか？
7. - UI を Component 単位で整理・カタログ化 - 主要な Frontend Framework をサポート - Frontend 開発のための様々な機能を提供 - UI スナップショット - a11y チェック - Test Runner - and more… Storybook 6
8. Storybook 7 Storybook は Page から UI Component を 分離して開発するための Frontend Workshop 出典: https://storybook.js.org/
9. UI Visual Testing サービス - Storybook ベースのテストツール - Storybook メンテナーが開発 - Frontend の CI として活⽤ Chromatic 8 出典: https://www.chromatic.com/ Chromatic
10. - Frontend 構成 - React, TypeScript, Vite - モノリス SPA - Pages Components 130, Total Components 1000 超 - 意図せぬ UI 差分による不具合が増加 - 当時、テストは Pure Function や Custom Hooks の Unit Test くらい Visual Regression Test (VRT) でカバーしたい！ Bill One への導⼊背景 9
11. 詳細は Sansan Tech Blog にて！ Vol.03 Component 総数 1000 件を超える Bill One の React フロントエンドに Chromatic を⽤いた VRT を導⼊した話 URL: https://buildersbox.corp-sansan.com/entry/2023/05/12/110000 Bill One への導⼊背景 10
12. Bill One における Chromatic & Storybook 活⽤の今
13. Visual Regression Test
14. - Mock Service Worker を活⽤ - API レベルの Mock - Pages レベルの Component に対する VRT - 2023/4 153/158 96.8% - 2024/1 200/205 97.6% 導⼊から1年経過後も⾼い Page Coverage を維持 - その他の粒度の Component も含めると - VRT 対象 Component 数 500 超、Story 数 1000 超 積極的な利活⽤状況を維持✨ Visual Regression Test 13
15. Chromatic の コスト増⼤丈夫なの？
16. Chromatic コストの推移 15 Component & Story 数の増加に対して、安定した請求⾦額を維持 プラン変更に 伴う上ブレ 200 Stories 500 Stories
17. - Git と Webpack の依存ツリーの情報を基に、変更 差分があったであろうSnapshot対象を絞り込み - メリット - 課⾦額の抑制 💸 - CI 実⾏時間の短縮 - デメリット - 本来 VRT 実施したい Story が意図せず対象外 とされる可能性あり Chromatic TurboSnap (Beta) 16 出典: https://www.chromatic.com/docs/turbosnap/
18. Point - onlyChanged - TurboSnap On/Off - traceChanged - expanded: 詳細情報を Log 出⼒ - untraced - TurboSnap による解析対象から除外 するもの - externals - 依存ツリーには含まれないが、 TurboSnap による解析対象としたい もの Chromatic Action における TurboSnap 設定 17 参考: https://www.chromatic.com/docs/github-actions/ - name: Publish to Chromatic uses: chromaui/action@v1 with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} exitOnceUploaded: true onlyChanged: true traceChanged: "expanded" untraced: "ui/src/foo/**" externals: | - "ui/panda.config.ts"
19. 2023 / 4 Storybook 7
20. - Performance 改善 - 6系 から 2倍 - Vite, NextJS, SvelteKit のゼロコンフィグサポート - CSF3 デフォルト化 - Test Runner - Jest + Playwright ベース - Interaction Test - Coverage Report の出⼒ Storybook 7 19 参考: https://storybook.js.org/blog/storybook-7-0/
21. - 主に Form まわりの Test として活⽤ - Play 関数の設定は Story ファイル - Storybook 上で動作確認するため - Test 実⾏は Test Runner ではなく Vitest + jsdom - 他の Unit Test などとまとめて実⾏させたい - Test Runner 依存を回避 - jsdomを利⽤することによる実環境との差異 については許容 Interaction Test 20
22. Component Driven Development とモブプロ
23. - Page を構成する上で必要な UI Component を分 解し、その単位で実装を進めていくもの - Component 実装を進めて組み合わせていくことで Page が完成する - Storybook を⽤いて CDD することを Storybook 駆動開発と呼ぶことも Component Driven Development 22 出典: https://www.componentdriven.org/
24. - モブプロフェーズ - 実装したい Page を Component に分解 - Component のインターフェースを認識合 わせ - タスク分割 - Component 単位でタスク分割 - 並列実装 - Component 単位で並列実装 CDD とモブプロ 23 type User = { userName: string } const UsersPage: FC = () => { const users: User[] = [] // TODO return ( <div> <Header title={"User List"} /> <UserList users={users} /> </div> ) } const UserList: FC<{ users: User[] }> = ({ users }) => { return ( <div> {users.map((user, index) => { return <UserRow key={index} user={user} /> })} </div> ) } const UserRow: FC<{ user: User }> = ({ user }) => { return <div>{user.userName}</div> // TODO }
25. 実際にやってみて - モブプロフェーズで Component 分割単位の認識が揃う - 後々のレビューコストやコメント数が低減 - Frontend に詳しいメンバーの知⾒をチーム内で共有 - 学習や成⻑機会にも - シンプルな Page に対してはメリットよりモブプロのコストが上回る場合も まだ数回やってみた段階なので、継続して実施予定 CDD とモブプロ 24
26. 2024 年 Chromatic & Storybook エコシステムの今後
27. 2024 / 2 Storybook 8 is coming…
28. - 2023/11/29 リリース - 7系最後のマイナーバージョン - 8系へ向けた仕込みが⾊々進んでいる - react-docgen - Controls や Docs の⽣成に利⽤ - v6 -> v7 - TypeScript Support の強化 - react-docgen-typescript からの移⾏を予定 - @storybook/test - Jest ベースから Vitest ベースへの移⾏ - Vitest の Mock / Spy 機能が活⽤可能に Storybook 7.6 27 出典: https://storybook.js.org/blog/storybook-7-6/
29. - 7.6 で Opt-In 導⼊された機能のデフォルト化 - React Server Component Support - Chromatic Visual Test Add-on - Local Storybook 上から Chromatic による Visual Test の実施・ステータス確認が可能に Storybook の Frontend Workshop としての 地位確⽴へ Storybook 8 28 出典: https://storybook.js.org/blog/future-of-storybook-2024/
30. - Playwright, Cypress integration - E2E Visual Test を Chromatic 上で扱うというもの - 既存のテスト定義を活⽤可能 Bill One では QA チームにて Playwright を⽤いたテストを実装しているため、 Visual ⾯での確認に Chromatic を活⽤する未来もありそう Chromatic Updates 29
31. Summary - Chromatic & Storybook とは？ > Storybook は UI Component カタログだけじゃない！ > CDD を実現するための Frontend Workshop - Bill One における Chromatic & Storybook 活⽤の今 > Visual Regression & Interaction Test > TurboSnap 設定⼤事 > CDD x モブプロ - 2024 年 Chromatic & Storybook エコシステムの今後 > Chromatic と Storybook がよりシームレスに連携 > E2E Test へと活⽤の幅が広がっていく