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
JSConfjp2023 Storybook駆動開発の再現性と効率化
Search
kinocoboy
November 19, 2023
Programming
2
3.4k
JSConfjp2023 Storybook駆動開発の再現性と効率化
#jsconfjp #jsconfjp_d
kinocoboy
November 19, 2023
Tweet
Share
More Decks by kinocoboy
See All by kinocoboy
【ScrumFestNiigata2024】a11yを起点とした組織横断を完了するためにアジャイルチームにとって大切だったこと100選
kinocoboy2
0
450
新卒だったころの僕へ向けて
kinocoboy2
0
120
スクラムマスターを目指すためにギャルになってみた話
kinocoboy2
8
7k
NINNO Tech Fest #05 春の推し
kinocoboy2
0
200
画面に合わせたAPI設計をしたら残業が死ぬほど増えた話
kinocoboy2
0
400
Peacock#01 ソフトウェアアーキテクチャ的発想
kinocoboy2
0
190
雑談を因数分解したら雑な談話が増えた話
kinocoboy2
2
810
AWSで$800スった話 ~ エフスタ!! AWSエンジニア失敗共有会議 ~
kinocoboy2
0
210
データの可視化とGraphQLを学ぶモチベーション
kinocoboy2
0
70
Other Decks in Programming
See All in Programming
GrafanaのHTTP API を眺めてみよう
rinchoku
0
130
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
180
UnJSで簡単に始めるCLIツール開発 / cli-tool-development-with-unjs
aoseyuu
2
300
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
460
Quarto Clean Theme
nicetak
0
220
sqlcを利用してsqlに型付けを
kamiyam
0
240
Pydantic x Database API:turu-pyの開発
yassun7010
1
680
What is TDD?
urakawa_jinsei
1
220
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
230
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
6
680
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
190
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
130
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
290
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Optimizing for Happiness
mojombo
375
69k
The Pragmatic Product Professional
lauravandoore
31
6.2k
From Idea to $5000 a Month in 5 Months
shpigford
381
46k
Statistics for Hackers
jakevdp
796
220k
Why Our Code Smells
bkeepers
PRO
334
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Code Reviewing Like a Champion
maltzj
519
39k
The Cult of Friendly URLs
andyhume
77
6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
© kaonavi, inc. 1 Storybook駆動開発 UI開発の再現性と効率化 Hiroki Kinoshita
INDEX © kaonavi, inc. 2 • 前提知識 • Storybook駆動開発とは •
効率性の向上について • 再現性の向上について • 具体的な恩恵について • まとめ
自己紹介 © kaonavi, inc. 3
木下 博貴 Hiroki Kinoshita X: @kinocoboy2 所属:株式会社カオナビ 2022年中途入社 職種:フロントエンドエンジニア /
スクラムマスター 趣味:キャンプ・エレキギター・バイクプラモデル 特徴:新潟県長岡市に地方移住したエンジニア 自己紹介 © kaonavi, inc. 4
INDEX © kaonavi, inc. 5 • 前提知識 • Storybook駆動開発とは •
効率性の向上について • 再現性の向上について • 具体的な恩恵について • まとめ
© kaonavi, inc. 6 • UI/コンポーネントカタログ ◦ UIを構築する部品単位に分かりやすく 整理可能 •
オープンソース ◦ なんとタダで無料 前提知識
INDEX © kaonavi, inc. 7 • 前提知識 • Storybook駆動開発とは •
効率性の向上について • 再現性の向上について • メリット・デメリット • まとめ
© kaonavi, inc. • ものづくりは不確実なことが多い。 ◦ でも我々は素早く価値あるソリューションを提供する必要がある。 8 Storybook駆動開発とは 企画
実装 設計 テスト 思い切りよく改善し、 よりよく! でも顧客が体感できる価値 を保証しながら。 効率的に とにかく今よりも早く イテレーション
© kaonavi, inc. 顧客が体感できる価値を変えず、効率を追い求めるために 9 Storybook駆動開発とは 顧客から見える景色を システム的に再現性をもって 保証する スコープを限定し
集中的に触れる環境を 構成する StorybookをUIカタログの 側面ではなく、 インテグレーション テストツール として利用する Storybook駆動設計
INDEX © kaonavi, inc. 10 • 前提知識 • Storybook駆動開発とは •
効率性の向上について • 再現性の向上について • 具体的な恩恵について • まとめ
© kaonavi, inc. 11 効率をあげるって簡単に言うけど難しい。効率が出ないワケがある 効率性の向上について めっちゃ複雑 めっちゃ重い 価値 創出
© kaonavi, inc. 12 めっちゃ複雑
© kaonavi, inc. • 基本的に複雑な業務を改善する為にソリューションは生まれる。 ◦ 例えば、Saasとしての難しさや人事業務の複雑さ。 ▪ 例 •
職能やロールによる権限の違い • 業務の進行に伴う使用感の変化 • 利用プランによる提供する機能の違い 13 めっちゃ複雑
© kaonavi, inc. 14 めっちゃ複雑 業務を改善する手段として、ソリューションが顧客が持っている複雑さを肩代 わりすることが多い Frontend Backend DB
© kaonavi, inc. 15 業務を改善する手段として、ソリューションが顧客が持っている複雑さを肩代 わりすることが多い めっちゃ複雑 Frontend Backend DB
ドメインモデルは可能な限り 抽象化して綺麗に保ちたい ソリューションとしての 腐敗防止的な役割も必要になる
© kaonavi, inc. フロントエンドの領域でも複雑性を極力排除し、綺麗に保ちたい そこで例としてAtomicDesignなどの手法が取り入れられる。 16 めっちゃ複雑 Frontend Atom Molecules
Organisms Template Pages
© kaonavi, inc. フロントエンドの領域でも複雑性を極力排除し、綺麗に保ちたい そこで例としてAtomicDesignなどの手法が取り入れられる。 17 めっちゃ複雑 Frontend Atom Molecules
Organisms Template Pages 権限や有効無効を含めた変化は ここで顕在化する Design System
© kaonavi, inc. 18 めっちゃ複雑 Huge Component
© kaonavi, inc. 「Story」単位でレンダリング可能 「Story」でできること ◦ 引数 ▪ args を用いた引数渡し
◦ API の MOCK化 ▪ Mock Service Worker • msw 19 状態単位で管理・把握をする
© kaonavi, inc. ユーザーが観測できる「状態」単位で 分解する。 20 状態単位で管理・把握をする Story Story Story
Story Story Story Story Story Huge Component
© kaonavi, inc. • 特に有効な局面 ◦ Good First Issue ▪
ユーザーが観測できる状態単位でのキャッチアップが可能になる。 ◦ Story単位で構造的に解析 ▪ Storyのスコープ範囲の中で価値の追加に向き合えるようになる。 21 状態単位で管理・把握をする
© kaonavi, inc. 22 めっちゃ重い
© kaonavi, inc. • 開発環境がめっちゃ重たい...。 ◦ 長く運用ができているサービスほどありがち。 ◦ モノリシックな環境だと、初回起動やHotReloadの反映速度など開 発体験がジリジリと辛くなることがある。
23 めっちゃ重い
© kaonavi, inc. • Storybookを使うと ◦ フロントエンドのみでスコープを限定的に自走できる。 ◦ プロトタイピングもできる ▪
画面の動きや期待する働きを先行して見せられる 24 めっちゃ重い ドヤッ ドヤッ ドヤッ ドヤッ
© kaonavi, inc. 25 めっちゃ重い • Storybookを使うと ◦ 作業をしたいStoryに対して、フォーカスできる。 ▪
「状態」を限定した動作確認を取れる。 • バックエンドとのインターフェースの取り決めをしておくだけで、フロントエンド は自走できる。
© kaonavi, inc. 26 効率性の向上: まとめ
© kaonavi, inc. • Storybook駆動開発を行うと、 ◦ 複雑なドメインに対して向き合いやすくなる ◦ オンボーディングコストの削減 ▪
Good First Issue として機能する ▪ 引き継ぎや意思疎通を構造的に会話ができるようになる ◦ 開発環境の軽量化 ◦ 価値追加に対するアジリティ向上 ▪ 価値提供方向の見定め ▪ 開発体験の向上 27 効率性の向上:まとめ
© kaonavi, inc. 28 ちょっと一息☕
INDEX © kaonavi, inc. 29 • 前提知識 • Storybook駆動開発とは •
効率性の向上について • 再現性の向上について • 具体的な恩恵について • まとめ
© kaonavi, inc. • 新しい価値を追加したい!という気持ちはある。 • 状況は様々 ◦ シンプルに追加提供できるケース ◦
プロダクトに影響を与えずに破壊的変更をおこないたいケース 30 再現性の向上について
© kaonavi, inc. • シンプルなケース ◦ とことんシンプル。 • 破壊的変更をおこないたいケース ◦
ユーザーの知らない部分には破壊的な活動を行いたい。 ◦ でも既にユーザーが触れて価値を得ている部分を破壊してはいけな い。 31 再現性の向上について
© kaonavi, inc. • 日常的に明日のための破壊活動をするメリットは大きい。 ◦ 次の価値追加に備え、いつでも動けるようにしておける。 • でも、前提がある。 ◦
顧客が体感できる価値を保証できること。 32 破壊的変更をおこないたいケース
© kaonavi, inc. • 常にソリューションが大破する危機を感じながら進めるのは怖すぎ ◦ ユーザーから見える価値に変化がないことの保証。 ▪ E2Eテスト ▪
インテグレーションテスト • 万全な準備は、なかなかにハード ◦ そこでStorybook駆動開発に取り組む。 33 破壊的変更をおこないたいケース
© kaonavi, inc. 34 • Storybookでは、play() 関数が使える。 ◦ Component Story
Format 3.0 で追加された。 ◦ このplay()関数を用いることで、対象のStoryで保証したいユーザー インタラクションの再現を取ることができる。 ▪ クリック ▪ フォーム入力 • jest との連動性を持つことができる ◦ jest+Testing Library 再現性の向上におけるStorybook駆動開発
© kaonavi, inc. 35 • jest+Testing Library との連動 ◦ ユーザーインタラクションが正常かどうかを判別できる。
▪ ツールと連動することで、CIで止まってくれる。 • この仕組みを開発時の防波堤としてあると、安心感が違う。 再現性の向上におけるStorybook駆動開発
© kaonavi, inc. 36 • ならばガッチリ play() と jest +
Testing Library を理解するぞ。 ◦ これはすごく難しい。 • でも大丈夫だ。問題ない ◦ どんな簡単なテストでもしっかりコケてくれる ▪ しっかりStorybook駆動設計の恩恵は得られる 再現性の向上におけるStorybook駆動開発
© kaonavi, inc. 37 • 例えば、以下の場合でもしっかり機能して働いてくれる ◦ 対象 ▪ Label要素として固定文字列が設定されている
Component ◦ 施策 ▪ Labelの文字列が存在するかを確認する。 再現性の向上におけるStorybook駆動開発 await expect(getByLabelText(‘固定文字列’).toBeInTheDocument());
© kaonavi, inc. 38 再現性の向上におけるStorybook駆動開発 Huge Component Story .toBeInTheDocument()
© kaonavi, inc. 39 再現性の向上におけるStorybook駆動開発 Jest is Failed.
© kaonavi, inc. 40 再現性の向上: まとめ
© kaonavi, inc. 41 • Storybook駆動開発を行うと、 ◦ 日常的なリファクタリングを安全に行えるようになる。 ◦ jest+Testing
Library と連動できる ▪ ガッチリ書かなくても、軽微なケースだけだとしても適切に機能する。 ▪ 初心者でも十分に恩恵を感じられる。 再現性の向上におけるStorybook駆動開発
INDEX © kaonavi, inc. 42 • 前提知識 • Storybook駆動開発とは •
効率性の向上について • 再現性の向上について • 具体的な恩恵について • まとめ
© kaonavi, inc. 43 • 設定値に応じたUI ◦ 料金プランと数多くのサブシステムへの動線の整合性 ◦ 権限による操作の整合性
◦ 顧客自由度の高いUIの動作保証 • ローカル環境のDB設定を入れ替えながらの確認は辛い ◦ Storybookを使うことで複雑さから解放 具体的な恩恵について
© kaonavi, inc. 44 • Storybookをどう使ったのか 具体的な恩恵について
© kaonavi, inc. 45 まとめ
© kaonavi, inc. 46 • Storybook駆動開発は ◦ 効率性・再現性がアップ ◦ オンボーディングコストが下がる
◦ 日々の改善活動の安心感が向上する ◦ 柔軟な設定が必要になるポイントでより効力は発揮される ▪ プランや権限などマトリクスが必要になるポイントで 恩恵をたくさん得られた。 • 今後の展望について ◦ storybook-addon-a11yというアドオンの登場により、 a11y文脈でもしっかり活躍できる。 まとめ
© kaonavi, inc. 47 Storybook駆動開発はいいぞ!
We are hiring!! https://corp.kaonavi.jp/recruit/list/ © kaonavi, inc. 48
© kaonavi, inc. 49 ご清聴ありがとうございました