2023/05/11(木) に開催された「スタフェス Meetup #3 - PJの技術的取り組み公開」にて登壇しました
Storybookを軸としたコンポーネント管理と自動テスト戦略2023.05.11@スタフェス Meetup #3 - PJの技術的取り組み公開@koga1020_
View Slide
About Me@koga1020_@koga1020koga1020.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ごちクルBusinessPJリーダーsotarokエンジニアPDMオペレーション6
開発スタイル全員リモートワークのため、対面でのコミュニケーションは無し🏠👨💻PdM主導で要件を固めてConfluence, Figmaを整備エンジニアと技術的な観点も踏まえて要件を詰めていく余談：figma, confluenceのslack通知をチーム皆で設定して非同期コミュニケーションが活性化しました👍slackで「このコメント見てください！」のコストをなくす7
プロダクトの構成・技術スタック8
フロントエンドの構成ごちクルBusinessFrontend[Next.js]Backend[NestJS]ClientBFFServertrpc Endpointtrpccall API9
フロントエンドの構成ごちクルBusinessFrontend[Next.js]Backend[NestJS]ClientBFFServertrpc Endpointtrpccall API10
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, …etctemplates、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-testing20
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-documentationStoryのレンダリング結果や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を絶対に腐らせない強い気持ち
koga1020
hirosatogamo
hmatsu47
mongolyy
yrhorita
.png){kind=icon}
pharma_x_tech
edwardkenfox
koyhoge
kobayang
opelab
gl_tsukasa
linedevth
huffon
robhawkes
philhawksworth
andyhume
cromwellryan
jonyablonski
kevinliebholz
holman
eileencodes
matthewcrist
jponch
danielanewman
chrisshort