Storybook との上手な向き合い方を考える

by Rintaro Itokawa

Slide 1

Slide 1 text

Storybook との上手な向き合い方を考えるりんたろー / re-taro Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 1 / 28

Slide 2

Slide 2 text

自己紹介りんたろー三重県の高専で半導体を学んでいます緑色の会社にて今はバイト、来春からちゃんと働きます Twitter: @re_taro_ GitHub: re-taro すきなこと開発者体験に思いを馳せること Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 2 / 28

Slide 3

Slide 3 text

話すこと僕の考える Storybook と上手に向き合う方法話さないこと話せないことその具体的な方法 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 3 / 28

Slide 4

Slide 4 text

突然ですが Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 4 / 28

Slide 5

Slide 5 text

zero-config 好きですか？ Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 5 / 28

Slide 6

Slide 6 text

zero-config の嬉しさ PoC を作る時社内ツールをリポジトリ区切ってシュッと作る時などなど... Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 6 / 28

Slide 7

Slide 7 text

なぜ zero-config の話をしたのか Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 7 / 28

Slide 8

Slide 8 text

Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 8 / 28

Slide 9

Slide 9 text

Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 9 / 28

Slide 10

Slide 10 text

今日はそんな Storybook のお話をします Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 10 / 28

Slide 11

Slide 11 text

Storybook という選択レビュアーとの疎通を取るため view の実装に集中するためブラウザ上で実行されるユニットテストを効率的に書くためなどなど... Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 11 / 28

Slide 12

Slide 12 text

Storybook という選択の光 pnpm dlx storybook@latest init だけでセットアップが終わる！（諸説あり） Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 12 / 28

Slide 13

Slide 13 text

Storybook という選択の闇 pnpm dlx storybook@latest init だけでセットアップが終わる！プロジェクトの構成に合わせた設定が必要秘伝のタレとなった babel.config.js やそれを使う webpackFinal プロジェクト固有の対応で肥大化した .storybook/preview.tsx msw や DI コンテナを使ったモックの設定 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 13 / 28

Slide 14

Slide 14 text

Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 14 / 28

Slide 15

Slide 15 text

Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 15 / 28

Slide 16

Slide 16 text

その結果... ロストテクノロジー化した、なんか知らんけど動いている Storybook 新しく Story が追加されることなく文鎮となった Storybook バンドラなどを刷新する際に足枷となるレガシーな Storybook Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 16 / 28

Slide 17

Slide 17 text

Storybook と上手に向き合う == 天秤を釣り合わせるってこと Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 17 / 28

Slide 18

Slide 18 text

天秤を釣り合わせるためには Storybook を使う目的を明確にする目的から逆算して、受ける恩恵を取捨選択するその恩恵を受けるために必要な設定を逆算して、保守する Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 18 / 28

Slide 19

Slide 19 text

Storybook を使う目的を明確にするレビュー支援コンポーネント単位での挙動確認 Story の網羅性をレビュアーが確認 == 仕様の網羅性デザイナーのレビュープロセスに組み込むテストに使用する VRT Portable stories を使った Play function の assertion Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 19 / 28

Slide 20

Slide 20 text

受ける恩恵レビュアーとの疎通を取ることができる実装する際のプレイグラウンドカバレッジの計測インタラクションのテスト VRT Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 20 / 28

Slide 21

Slide 21 text

受ける恩恵の取捨選択レビュアーとの疎通を取ることができる実装する際のプレイグラウンド Storybook とテスト --> 時期尚早かなぁ... Storybook との上手な向き合い方を考えるカバレッジの計測インタラクションのテスト VRT 2024-11-23 | JSConf JP 2024 21 / 28

Slide 22

Slide 22 text

時期尚早と感じる理由 Storybook runtime 上でテストする方法に統合されている感覚 Storybook v6 とかの頃: composeStory で play function の中身を jest with testing-library でアサーション！ Storybook v7 とかの頃: インタラクションテスト、a11y、カバレッジ計測を test-runner を使って行う！ Storybook v8 とかの頃: @storybook/test が進歩してきたのでアサーションからカバレッジ計測までを test-runner で行う！ --> だんだん Storybook を起動してあることを前提としたテストの形式になってきている Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 22 / 28

Slide 23

Slide 23 text

現在の Storybook とテストの付き合い方 Storybook とテストの分離 Story の肥大化の回避テストにかかる時間の短縮 Storybook を利用したテストの例 composeStory で play function の中身を jest with testing-library でアサーション setup file に Storybook の依存が発生するがそこまでコストがかからない Storybook 自体の腐敗防止のためのテスト各 Story が正常に描画されているか Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 23 / 28

Slide 24

Slide 24 text

受ける恩恵から逆算した設定たちレビュアーとの疎通を取ることができる view がレンダリングされていて、コンポーネントを動かせれば良いアプリケーションのバンドル設定よりも軽い設定や、別のバンドラをビルダーに使う選択肢もあるモックの設定実装する際のプレイグラウンドアプリケーションのバンドル設定と同じ環境である必要があるアプリケーションのバンドル設定をきちんと保守していれば自ずと Storybookも保守されるモックの設定 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 24 / 28

Slide 25

Slide 25 text

だいたいモックが大変 --> 今に始まったことではない。僕らにできることは、設計でモックを必要とする箇所を狭めること。 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 25 / 28

Slide 26

Slide 26 text

モックに対するアイデア API との疎通を含む view に関係するロジックを切り出す API 疎通はアプリケーションの動作確認にて、ロジックは unit test で保証切り出したロジックは DI コンテナを使ってモックが簡単になるようにする custom decorator を作成して DI を簡単にする Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 26 / 28

Slide 27

Slide 27 text

注意！ここまで話してきたことは、気楽な Storybook との付き合い方。 --> スタートダッシュの時にエイヤでいれた Storybook を腐らせないための方法プロダクトが成熟したりチームの規模が大きくなった、もしくは基盤改善が好きな人材が増えた場合などは、少しずつ天秤にかける重み（得る恩恵）を変えていくことが大事。 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 27 / 28

Slide 28

Slide 28 text

まとめ Storybook は便利だが、使い方を間違えると足枷になる Storybook を使う目的を明確にし、受ける恩恵を取捨選択する Storybook とテストは分離して考えることが大事 (現時点では) 受ける恩恵から逆算して、必要な設定を整理する徐々に Storybook との付き合い方を見直していくことが大事 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 28 / 28