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.8k
JSConfjp2023 Storybook駆動開発の再現性と効率化
#jsconfjp #jsconfjp_d
kinocoboy
November 19, 2023
Tweet
Share
More Decks by kinocoboy
See All by kinocoboy
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
kinocoboy2
1
730
【ScrumFestNiigata2024】a11yを起点とした組織横断を完了するためにアジャイルチームにとって大切だったこと100選
kinocoboy2
0
570
新卒だったころの僕へ向けて
kinocoboy2
0
150
スクラムマスターを目指すためにギャルになってみた話
kinocoboy2
9
7.7k
NINNO Tech Fest #05 春の推し
kinocoboy2
0
250
画面に合わせたAPI設計をしたら残業が死ぬほど増えた話
kinocoboy2
0
480
Peacock#01 ソフトウェアアーキテクチャ的発想
kinocoboy2
0
240
雑談を因数分解したら雑な談話が増えた話
kinocoboy2
2
850
AWSで$800スった話 ~ エフスタ!! AWSエンジニア失敗共有会議 ~
kinocoboy2
0
250
Other Decks in Programming
See All in Programming
“技術カンファレンスで何か変わる?” ──RubyKaigi後の自分とチームを振り返る
ssagara00
0
200
TSConfigからTypeScriptの世界を覗く
planck16
2
1.2k
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
570
なぜHono×GraphQLを選んだのか?
junichi_fukushima
0
880
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
140
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
380
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
120
知識0からカンファレンスやってみたらこうなった!
syossan27
5
320
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
290
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
380
AI Coding Agent Enablement in TypeScript
yukukotani
15
6k
Cloudflare Workersで進めるリモートMCP活用
syumai
13
1.9k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Facilitating Awesome Meetings
lara
54
6.4k
Bash Introduction
62gerente
613
210k
KATA
mclloyd
29
14k
Navigating Team Friction
lara
185
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
830
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Practical Orchestrator
shlominoach
187
11k
Balancing Empowerment & Direction
lara
0
72
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
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 ご清聴ありがとうございました