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
20230511 Storybookを軸としたコンポーネント管理と自動テスト戦略
Search
shozo koga
May 11, 2023
Technology
0
670
20230511 Storybookを軸としたコンポーネント管理と自動テスト戦略
2023/05/11(木) に開催された「スタフェス Meetup #3 - PJの技術的取り組み公開」にて登壇しました
shozo koga
May 11, 2023
Tweet
Share
More Decks by shozo koga
See All by shozo koga
Looker StudioとSnowflakeでプロダクトチームのダッシュボードを作る取り組み
koga1020
0
530
20230311 最近のElixir動向まとめ
koga1020
0
630
【Elixir】Dataloaderを導入してGraphQLのN+1問題を解消する
koga1020
1
430
20221108 WEB+DB PRESS Vol.131「はじめてのElixir」特集記念イベント
koga1020
1
200
fukuoka.exの思い出話とこれからを考える
koga1020
1
150
Ectoの全体感をまとめてみる
koga1020
0
470
Phoenix.PubSubの紹介と活用を考える
koga1020
0
440
EDI#1 発足LT会
koga1020
0
51
Web開発 × Elixir
koga1020
0
240
Other Decks in Technology
See All in Technology
分解して理解する Aspire
nenonaninu
2
1.1k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.8k
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
300
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
730
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
680
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
100
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
330
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
120
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
360
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
210
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.7k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
380
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Typedesign – Prime Four
hannesfritz
40
2.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Navigating Team Friction
lara
183
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Statistics for Hackers
jakevdp
797
220k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Transcript
Storybook を軸としたコンポーネント管理と 自動テスト戦略 2023.05.11@ スタフェス Meetup #3 - PJ の技術的取り組み公開
@koga1020_
About Me @koga1020_ @koga1020 koga1020.com 古賀 祥造(koga1020) 株式会社スターフェスティバル ソフトウェアエンジニア 2023.01に入社
/ 十五夜プロジェクト TechPM 福岡在住のリモートワーカー👨💻 FindyのChatGPTエンジニアキャリアまとめ 「ソフトウェア界の鬼殺し」「オシャレIT男子」 2
お品書き 📝 担当しているプロダクトとチーム体制 フロントエンド領域での取り組み Atomic Designの良し悪し、課題感 Storybookの活用 開発スタイル テストの方針 ドキュメンテーション
3
プロダクトとチーム体制 4
"ごちクルBusiness" というプロダクトを開発しています 従業員のアカウント管理、請求管理など、法人さまがより便利にごちクルをご利用いただけるようにするサービス 5
チーム体制 「プロダクトファースト」を掲げ、プロダクトごとに開発チームが存在する 各チームが裁量を持って、意思決定しながら開発を進めている 参考:「プロダクトファースト」へ大きく舵を切って約2年、スタフェスの現在地は?CTO x CPOが対談 KAGUYA プロジェクト PJ 横断
KAGUYA ⼗五夜 デザイナーチーム プロダクト チーム プロダクト チーム KAGUYA KM ごちクル Business PJ リーダー sotarok エンジニア PDM オペレーション 6
開発スタイル 全員リモートワークのため、対面でのコミュニケーションは無し🏠👨💻 PdM主導で要件を固めてConfluence, Figmaを整備 エンジニアと技術的な観点も踏まえて要件を詰めていく 余談:figma, confluenceのslack通知をチーム皆で設定して非同期コミュニケーションが活性化しました👍 slackで「このコメント見てください!」のコストをなくす 7
プロダクトの構成・技術スタック 8
フロントエンドの構成 ごちクルBusiness Frontend[Next.js] Backend[NestJS] Client BFF Server trpc Endpoint trpc
call API 9
フロントエンドの構成 ごちクルBusiness Frontend[Next.js] Backend[NestJS] Client BFF Server trpc Endpoint trpc
call API 10
Atomic Designでやっています おなじみAtomic Designです Pagesの扱いをNext.jsの pages ディレクトリとし、それ以外は components/ で管理しています 11
./ └── src/ ├── pages/ │ └── user/ │ └── index.tsx ・・・ pages に相当するコンポーネン └── components/ ├── atoms/ │ └── Label/ │ ├── index.tsx ・・・ Barrel file │ ├── Label.tsx ・・・ 実装ファイル │ └── Label.stories.tsx ・・・ story ├── molecules ├── organisms ├── templates └── pages ・・・ storybook 格納用
所感 atoms, moleculesはめちゃくちゃしっくりきています👏 きちんとstorybookを運用することで、再利用可能なコンポーネント開発ができています 「🧑💻 別画面でも使うTableコンポーネント作っといたで〜」 「👩💻 すでにそのUIならListコンポーネントがありますよ〜」 Figmaを眺めることで、共通の部品が見えてくる Table,
Card, Form, Modal, …etc templates、organismsも今の規模感だと違和感なし pagesの実装は今後のスケール時に要注意⚠️ 外部API呼び出しなど、ドメインロジックをpages内で実装している現状 複雑な画面だとpagesが肥大化してきているのも事実 12
機能単位でのディレクトリ構成も検討したが採用せず pagesの肥大化に対して打ち手を検討した Bulletproof Reactで紹介されているような、機能ごとに分割する構成も考えた 参考: 私の推しフロントエンドディレクトリ構成と気をつけたいポイント 今の規模感であれば、Pages内にロジックが書かれていても追えるボリュームでは?という結論に至った 機能単位に分けたことにより、実はatoms, molecules, organisms
など再利用可能なものにできるものを 個別に実装してしまう可能性を危惧した プロジェクトで再利用可能なコンポーネントを育てていく方を優先することとした 今後やたら複雑なページが出てくるなどした場合には再考の余地あり 13
再利用可能なコンポーネントを育てるには 🌱 storybookを活用しまくる!! ただ、storyの実装はコストがかかるのは事実 storybookを腐らせずに、かけたコストに対してリターンを最大限享受するためにどうするか🤔 14
Storybook の活用と自動テスト戦略 15
Storybook活用のポイント ① Storybook 駆動で開発する ② story をテストに再利用する ③ story が壊れていないことを担保する
④ 開発時のドキュメンテーションとして活用する 16
① storybook駆動で開発する 実装を書いた後にstoryを用意するのではなく、まず実装が空の状態からstoryを用意する ページに組み込む前からコンポーネントのレンダリング結果を確認する環境としてstorybookを利用する hygenを活用して、実装ファイルとストーリーファイルがコマンド一発で出来る環境を整備しています🚀 Component Story Format3(CSF3.0)だとだいぶ書きやすいです Storybook7からCSF3がデフォルトとのこと https://storybook.js.org/blog/storybook-csf3-is-here/
17
Storybook活用のポイント ① Storybook 駆動で開発する✅ ② story をテストに再利用する ③ story が壊れていないことを担保する
④ 開発時のドキュメンテーションとして活用する 18
② storyをテストに再利用する 単純なコンポーネントであれば別途specを用意せず、storybookのビルドが通るかで担保する specを書きたい!となったらそれはなんらかのロジックを伴うもののはず 別途 hooks などに関数として切り出し、その切り出した関数の単体テストを書けば十分なはず specを書く場合には、storyを再利用して書くべし 参考: Storybook
CSF3.0で登録したStoryをJestで再利用する clickやテキスト入力など、イベントが必要なテストはInteraction testとして実装する https://storybook.js.org/docs/react/writing-tests/interaction-testing 後述するChromaticではこのInteraction testが通らない場合はエラーとして検出できます🎉 19
② storyをテストに再利用する https://storybook.js.org/docs/react/writing-tests/interaction-testing 20
Storybook活用のポイント ① Storybook 駆動で開発する✅ ② story をテストに再利用する✅ ③ story が壊れていないことを担保する
④ 開発時のドキュメンテーションとして活用する 21
③ storyが壊れていないことを担保する CIでstorybookのbuildが通ることを常に担保すべし CIで見ておかないと気づいたらビルドが通らないstoryが出来ているなんてことも 割れ窓理論。割れた窓を作らないように頑張りましょう🪟💥 Chromatic が超便利 storybookのホスティングサービス。VRT(Visual Regression Test)やUIレビューが可能
前述したinteraction testも実行され、動作の担保ができる 無料枠もあり気軽にお試しできます note: 気をつけないとdependabotやrenovateでガンガン回るのでお気をつけを Turbosnap という差分ビルドの仕組みもあります StorybookのTest runnerでもビルドおよびinteraction testが通ることを担保できます 22
Storybook活用のポイント ① Storybook 駆動で開発する✅ ② story をテストに再利用する✅ ③ story が壊れていないことを担保する✅
④ 開発時のドキュメンテーションとして活用する 23
④ 開発時のドキュメンテーションとして活用する 特定のコンポーネント・storyと紐づかないドキュメントも記述できる mdx#writing-unattached-documentation Storyのレンダリング結果やTailwindCSSの設定などを参照してドキュメントが書けるので、 READMEのようなドキュメントよりコードに近い状態で管理できる 参照すべきドキュメントをstorybookに寄せ、プロダクトコードと同じく保守すべき対象であるという意識づけを行う 誰も見ない、使わないものは腐りゆく 🙈 24
④ 開発時のドキュメンテーションとして活用する 例. カラーのガイドライン。Component のstory と独立したセクションを設けてドキュメントを用意できる 25
④ 開発時のドキュメンテーションとして活用する addon-designsを入れるとstorybook上にFigmaを埋め込むことができる デザインとの齟齬を確認したり、storyを見てるときにパッとfigmaに移動できて便利 26
Storybook活用のポイント ① Storybook 駆動で開発する✅ ② story をテストに再利用する✅ ③ story が壊れていないことを担保する✅
④ 開発時のドキュメンテーションとして活用する✅ 27
WEB+DB PRESS vol.134に掲載されてます 28
まとめ 弊チームの開発スタイル PJリーダー、エンジニア、PdMがいて、スクラムをぐるぐる回している Slack, Figma, Confluenceで非同期コミュニケーションを中心にモリモリ開発 フロントエンド 長い時間軸でプロダクトを育て続けられるコンポーネント管理を目指す コストとリターンのバランスをとりつつstorybookの活用を狙う 割れ窓に気をつけつつ、Chromatic、CIを活用してStorybookを絶対に腐らせない強い気持ち