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.6k
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.1k
Other Decks in Technology
See All in Technology
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.4k
RSNA2024振り返り
nanachi
0
590
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
370
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
8
1.5k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
2
1.3k
Platform Engineeringは自由のめまい
nwiizo
4
2.1k
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
250
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
2
1.5k
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
150
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
130
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
6
770
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
1.1k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
A better future with KSS
kneath
238
17k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Unsuck your backbone
ammeep
669
57k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Bash Introduction
62gerente
611
210k
Docker and Python
trallard
44
3.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Raft: Consensus for Rubyists
vanstee
137
6.8k
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