デザイナーと協業しているNuxtプロジェクトを、ChromaticによるVRTでさらに改善した話

【Vue.js v-tokyo Meetup #17】
https://vuejs-meetup.connpass.com/event/279254/

Transcript

1. デザイナーと協業しているNuxtプロジェクトを、 ChromaticによるVRTでさらに改善した話 Vue.js v-tokyo Meetup #17 もず（@mozu1206）
2. ⾃⼰紹介 職歴 ASP事業会社 - バックエンドエンジニア（2021/04 ~ 2022/03 ） 株式会社HRBrain - デザインエンジニア（2022/04 ~ 現在） 現在の技術スタック Vue.js/Nuxt, React/Next, TypeScript, Storybook, Chromatic 趣味 コーヒー
3. アジェンダ - Nuxtプロジェクトについての現状 - 現状の問題点 - 解決⽅針 - 解決⽅法 - やってみた結果 - まとめ - 今後やりたいこと
4. Nuxtプロジェクトについての現状   役割：サービスサイト(https://www.hrbrain.jp/) デザイン：Figma 使⽤技術：Vue.js/Nuxt, Storybook, Chromatic, Contentful デプロイ：Netlify
5. Nuxtプロジェクトについての現状 Vue.js / Nuxt それぞれを絶賛バージョンアップ中！ ついでにコンポーネントも整理しようと思いきや、新旧3つの流派のコンポーネン トが存在していて絶望
6. 現状の問題点 プロジェクト内のコンポーネントと、Figmaのコンポーネントで同期しきれてい ない部分がある  - 同じような部品が複数存在しており、共通化されていない部分がある
7. 現状の問題点 Figmaに登録されていない Figmaに登録されている
8. 現状の問題点 ジョインしたてのデザイナー‧エンジニアが困る Figmaに登録されていない Figmaに登録されている
9. 現状の問題点 • ジョインしたてのエンジニアがコンポーネント探しに時間がかかる • サイト内で微妙なデザインの差異が発⽣しやすい状態のため、統⼀感を維持 するための確認コストが余計にかかる • 無駄なコミュニケーションコストがかかる - 「ここのボタンを変えると別のここのボタンも変わるけど⼤丈夫？」 - 「そもそもこのボタンってどのボタン？」
10. • ジョインしたてのエンジニアがコンポーネント探しに時間がかかる • サイト内で微妙なデザインの差異が発⽣しやすい状態のため、統⼀感を維持 するための確認コストが余計にかかる • 無駄なコミュニケーションコストがかかる - 「ここのボタンを変えると別のここのボタンも変わるけど⼤丈夫？」 - 「そもそもこのボタンってどのボタン？」 現状の問題点 プロジェクトとFigmaを同期するルールを作って解決しよう！ （当たり前のことを⼀つずつ）
11. 解決⽅針 エンジニア側で定義したルールに従ってコンポーネント作成し、それをデザイ ナーが後追いでFigmaに反映する動きで合意をとった
12. 解決⽅針 エンジニア側で定義したルールに従ってコンポーネント作成し、それをデザイ ナーが後追いでFigmaに反映する動きで合意をとった エンジニアが新規で登録した or 変更したコンポーネントを デザイナー側で検知できない新たな問題が発⽣
13. ChromaticのVRT(Visual Regression Test)を コンポーネントをFigmaに反映する必要があるかを判断する フラグのような使い⽅で利⽤できるのでは？ 解決⽅針
14. Storybook - コンポーネントを独⽴して開発することを⽀援するツール Chromatic - Storybookの公開‧テスト‧議論活性化を⽀援するツール VRT(Visual Regression Test) - 変更前後のスクリーンショットを⽐較し、意図せぬ変更が⽣じていないか確認するテスト 登場⼈物の補⾜
15. 解決⽅法 Chromatic の VRT でコードの差分を検知させ、デザイナーがその差分を確認し、 必要があればFigmaに反映する運⽤にしてみた（反映したらAcceptedにする） 反映done →
16. やってみた結果 • 現在使われていない古いコンポーネントの存在をお互いに認識できた • ジョインしたてのエンジニアがコンポーネントを探す⼯数を削減できた • デザイナーとコンポーネントを中⼼にした会話をしやすくなった
17. やってみた結果 コミュニケーションコスト削減と、 サイト全体の統⼀感を持たせやすくなった • 現在使われていない古いコンポーネントの存在をお互いに認識できた • ジョインしたてのエンジニアがコンポーネントを探す⼯数を削減できた • デザイナーとコンポーネントを中⼼にした会話をしやすくなった
18. やってみた結果
19. まとめ • エンジニア側のコンポーネントの変更をFigmaに同期させるタスクリストの 様な役割で運⽤しても、フェーズによってはワークしそう。 • Chromatic の導⼊⾃体は Storybook の公式ドキュメントにも記載があるた め、⽐較的簡単に⾏える。 • Figmaと同期させることで、様々な無駄なコストの削減に繋がる。
20. 今後やりたいこと • 単純なUIのVRTはできるようになったが、複雑なUIやページ単位でのテスト はまだできていないので、ここのVRTも今後やっていきたい。