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
Storybook との上手な向き合い方を考える
Search
Rintaro Itokawa
November 22, 2024
Technology
7
5.7k
Storybook との上手な向き合い方を考える
JSConf JP 2024 にて登壇した資料です。
スピーカーノートはこちら -> マダナイヨ
Rintaro Itokawa
November 22, 2024
Tweet
Share
More Decks by Rintaro Itokawa
See All by Rintaro Itokawa
oxc は次世代のJSツールチェイン開発基盤になり得るか
re_taro
5
2.2k
Other Decks in Technology
See All in Technology
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
6
990
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
240
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
430
Symfony in 2025: Scaling to 0
fabpot
2
190
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
200
ソフトウェア開発におけるインターフェイスという考え方 / PHPerKaigi 2025
k1low
9
3.9k
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.2k
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
400
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
130
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.1k
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
220
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Being A Developer After 40
akosma
90
590k
Become a Pro
speakerdeck
PRO
27
5.2k
How STYLIGHT went responsive
nonsquared
99
5.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Transcript
Storybook との上手な向き合い方を考える りんたろー / re-taro Storybook との上手な向き合い方を考える 2024-11-23 | JSConf
JP 2024 1 / 28
自己紹介 りんたろー 三重県の高専で半導体を学んでいます 緑色の会社にて今はバイト、来春からちゃんと働き ます Twitter: @re_taro_ GitHub: re-taro すきなこと
開発者体験に思いを馳せること Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 2 / 28
話すこと 僕の考える Storybook と上手に向き合う方法 話さないこと 話せないこと その具体的な方法 Storybook との上手な向き合い方を考える 2024-11-23
| JSConf JP 2024 3 / 28
突然ですが Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 4 /
28
zero-config 好きですか? Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 5
/ 28
zero-config の嬉しさ PoC を作る時 社内ツールをリポジトリ区切ってシュッと作る時 などなど... Storybook との上手な向き合い方を考える 2024-11-23 |
JSConf JP 2024 6 / 28
なぜ zero-config の話をしたのか Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024
7 / 28
Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 8 / 28
Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 9 / 28
今日はそんな Storybook のお話をします Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024
10 / 28
Storybook という選択 レビュアーとの疎通を取るため view の実装に集中するため ブラウザ上で実行されるユニットテストを効率的に書くため などなど... Storybook との上手な向き合い方を考える 2024-11-23
| JSConf JP 2024 11 / 28
Storybook という選択の光 pnpm dlx storybook@latest init だけでセットアップが終わる!(諸説あり) Storybook との上手な向き合い方を考える 2024-11-23
| JSConf JP 2024 12 / 28
Storybook という選択の闇 pnpm dlx storybook@latest init だけでセットアップが終わる! プロジェクトの構成に合わせた設定が必要 秘伝のタレとなった babel.config.js
やそれを使う webpackFinal プロジェクト固有の対応で肥大化した .storybook/preview.tsx msw や DI コンテナを使ったモックの設定 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 13 / 28
Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 14 / 28
Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 15 / 28
その結果... ロストテクノロジー化した、なんか知らんけど動いている Storybook 新しく Story が追加されることなく文鎮となった Storybook バンドラなどを刷新する際に足枷となるレガシーな Storybook Storybook
との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 16 / 28
Storybook と上手に向き合う == 天秤を釣り合わせる ってこと Storybook との上手な向き合い方を考える 2024-11-23 | JSConf
JP 2024 17 / 28
天秤を釣り合わせるためには Storybook を使う目的を明確にする 目的から逆算して、受ける恩恵を取捨選択する その恩恵を受けるために必要な設定を逆算して、保守する Storybook との上手な向き合い方を考える 2024-11-23 | JSConf
JP 2024 18 / 28
Storybook を使う目的を明確にする レビュー支援 コンポーネント単位での挙動確認 Story の網羅性をレビュアーが確認 == 仕様の網羅性 デザイナーのレビュープロセスに組み込む テストに使用する
VRT Portable stories を使った Play function の assertion Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 19 / 28
受ける恩恵 レビュアーとの疎通を取ることができる 実装する際のプレイグラウンド カバレッジの計測 インタラクションのテスト VRT Storybook との上手な向き合い方を考える 2024-11-23 |
JSConf JP 2024 20 / 28
受ける恩恵の取捨選択 レビュアーとの疎通を取ることができる 実装する際のプレイグラウンド Storybook と テスト --> 時期尚早かなぁ... Storybook との上手な向き合い方を考える
カバレッジの計測 インタラクションのテスト VRT 2024-11-23 | JSConf JP 2024 21 / 28
時期尚早と感じる理由 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
現在の 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
受ける恩恵から逆算した設定たち レビュアーとの疎通を取ることができる view がレンダリングされていて、コンポーネントを動かせれば良い アプリケーションのバンドル設定よりも軽い設定や、別のバンドラをビ ルダーに使う選択肢もある モックの設定 実装する際のプレイグラウンド アプリケーションのバンドル設定と同じ環境である必要がある アプリケーションのバンドル設定をきちんと保守していれば自ずと
Storybookも保守される モックの設定 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 24 / 28
だいたいモックが大変 --> 今に始まったことではない。 僕らにできることは、設計でモックを必要とする箇所を狭めること。 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP
2024 25 / 28
モックに対するアイデア API との疎通を含む view に関係するロジックを切り出す API 疎通はアプリケーションの動作確認にて、ロジックは unit test で保証
切り出したロジックは DI コンテナを使ってモックが簡単になるようにする custom decorator を作成して DI を簡単にする Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 26 / 28
注意! ここまで話してきたことは、気楽な Storybook との付き合い方。 --> スタートダッシュの時にエイヤでいれた Storybook を腐らせないための方法 プロダクトが成熟したりチームの規模が大きくなった、もしくは基盤改善が好きな人 材が増えた場合などは、少しずつ天秤にかける重み(得る恩恵)を変えていくことが
大事。 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 27 / 28
まとめ Storybook は便利だが、使い方を間違えると足枷になる Storybook を使う目的を明確にし、受ける恩恵を取捨選択する Storybook とテストは分離して考えることが大事 (現時点では) 受ける恩恵から逆算して、必要な設定を整理する 徐々に
Storybook との付き合い方を見直していくことが大事 Storybook との上手な向き合い方を考える 2024-11-23 | JSConf JP 2024 28 / 28