Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイナーと協業しているNuxtプロジェクトを、ChromaticによるVRTでさらに改善した話
Search
Masayuki Takahashi
May 23, 2023
Programming
0
590
デザイナーと協業しているNuxtプロジェクトを、ChromaticによるVRTでさらに改善した話
【Vue.js v-tokyo Meetup #17】
https://vuejs-meetup.connpass.com/event/279254/
Masayuki Takahashi
May 23, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.8k
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
LPIXEL×CADDi_kaerururu
kaerururu
3
300
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
270
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
4
860
htmx is fun!
codehex
2
190
Featured
See All Featured
Bash Introduction
62gerente
604
210k
Code Reviewing Like a Champion
maltzj
512
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Code Review Best Practice
trishagee
54
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Navigating Team Friction
lara
177
13k
Documentation Writing (for coders)
carmenintech
59
3.8k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Happy Clients
brianwarren
91
6.3k
Six Lessons from altMBA
skipperchong
19
2.9k
Transcript
デザイナーと協業しているNuxtプロジェクトを、 ChromaticによるVRTでさらに改善した話 Vue.js v-tokyo Meetup #17 もず(@mozu1206)
⾃⼰紹介 職歴 ASP事業会社 - バックエンドエンジニア(2021/04 ~ 2022/03 ) 株式会社HRBrain -
デザインエンジニア(2022/04 ~ 現在) 現在の技術スタック Vue.js/Nuxt, React/Next, TypeScript, Storybook, Chromatic 趣味 コーヒー
アジェンダ - Nuxtプロジェクトについての現状 - 現状の問題点 - 解決⽅針 - 解決⽅法 -
やってみた結果 - まとめ - 今後やりたいこと
Nuxtプロジェクトについての現状 役割:サービスサイト(https://www.hrbrain.jp/) デザイン:Figma 使⽤技術:Vue.js/Nuxt, Storybook, Chromatic, Contentful デプロイ:Netlify
Nuxtプロジェクトについての現状 Vue.js / Nuxt それぞれを絶賛バージョンアップ中! ついでにコンポーネントも整理しようと思いきや、新旧3つの流派のコンポーネン トが存在していて絶望
現状の問題点 プロジェクト内のコンポーネントと、Figmaのコンポーネントで同期しきれてい ない部分がある - 同じような部品が複数存在しており、共通化されていない部分がある
現状の問題点 Figmaに登録されていない Figmaに登録されている
現状の問題点 ジョインしたてのデザイナー‧エンジニアが困る Figmaに登録されていない Figmaに登録されている
現状の問題点 • ジョインしたてのエンジニアがコンポーネント探しに時間がかかる • サイト内で微妙なデザインの差異が発⽣しやすい状態のため、統⼀感を維持 するための確認コストが余計にかかる • 無駄なコミュニケーションコストがかかる - 「ここのボタンを変えると別のここのボタンも変わるけど⼤丈夫?」
- 「そもそもこのボタンってどのボタン?」
• ジョインしたてのエンジニアがコンポーネント探しに時間がかかる • サイト内で微妙なデザインの差異が発⽣しやすい状態のため、統⼀感を維持 するための確認コストが余計にかかる • 無駄なコミュニケーションコストがかかる - 「ここのボタンを変えると別のここのボタンも変わるけど⼤丈夫?」 -
「そもそもこのボタンってどのボタン?」 現状の問題点 プロジェクトとFigmaを同期するルールを作って解決しよう! (当たり前のことを⼀つずつ)
解決⽅針 エンジニア側で定義したルールに従ってコンポーネント作成し、それをデザイ ナーが後追いでFigmaに反映する動きで合意をとった
解決⽅針 エンジニア側で定義したルールに従ってコンポーネント作成し、それをデザイ ナーが後追いでFigmaに反映する動きで合意をとった エンジニアが新規で登録した or 変更したコンポーネントを デザイナー側で検知できない新たな問題が発⽣
ChromaticのVRT(Visual Regression Test)を コンポーネントをFigmaに反映する必要があるかを判断する フラグのような使い⽅で利⽤できるのでは? 解決⽅針
Storybook - コンポーネントを独⽴して開発することを⽀援するツール Chromatic - Storybookの公開‧テスト‧議論活性化を⽀援するツール VRT(Visual Regression Test) -
変更前後のスクリーンショットを⽐較し、意図せぬ変更が⽣じていないか確認するテスト 登場⼈物の補⾜
解決⽅法 Chromatic の VRT でコードの差分を検知させ、デザイナーがその差分を確認し、 必要があればFigmaに反映する運⽤にしてみた(反映したらAcceptedにする) 反映done →
やってみた結果 • 現在使われていない古いコンポーネントの存在をお互いに認識できた • ジョインしたてのエンジニアがコンポーネントを探す⼯数を削減できた • デザイナーとコンポーネントを中⼼にした会話をしやすくなった
やってみた結果 コミュニケーションコスト削減と、 サイト全体の統⼀感を持たせやすくなった • 現在使われていない古いコンポーネントの存在をお互いに認識できた • ジョインしたてのエンジニアがコンポーネントを探す⼯数を削減できた • デザイナーとコンポーネントを中⼼にした会話をしやすくなった
やってみた結果
まとめ • エンジニア側のコンポーネントの変更をFigmaに同期させるタスクリストの 様な役割で運⽤しても、フェーズによってはワークしそう。 • Chromatic の導⼊⾃体は Storybook の公式ドキュメントにも記載があるた め、⽐較的簡単に⾏える。
• Figmaと同期させることで、様々な無駄なコストの削減に繋がる。
今後やりたいこと • 単純なUIのVRTはできるようになったが、複雑なUIやページ単位でのテスト はまだできていないので、ここのVRTも今後やっていきたい。