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.6k
JSConfjp2023 Storybook駆動開発の再現性と効率化
#jsconfjp #jsconfjp_d
kinocoboy
November 19, 2023
Tweet
Share
More Decks by kinocoboy
See All by kinocoboy
【ScrumFestNiigata2024】a11yを起点とした組織横断を完了するためにアジャイルチームにとって大切だったこと100選
kinocoboy2
0
490
新卒だったころの僕へ向けて
kinocoboy2
0
130
スクラムマスターを目指すためにギャルになってみた話
kinocoboy2
8
7.3k
NINNO Tech Fest #05 春の推し
kinocoboy2
0
220
画面に合わせたAPI設計をしたら残業が死ぬほど増えた話
kinocoboy2
0
430
Peacock#01 ソフトウェアアーキテクチャ的発想
kinocoboy2
0
210
雑談を因数分解したら雑な談話が増えた話
kinocoboy2
2
820
AWSで$800スった話 ~ エフスタ!! AWSエンジニア失敗共有会議 ~
kinocoboy2
0
230
データの可視化とGraphQLを学ぶモチベーション
kinocoboy2
0
75
Other Decks in Programming
See All in Programming
テストコード書いてみませんか?
onopon
2
280
Flatt Security XSS Challenge 解答・解説
flatt_security
0
460
為你自己學 Python
eddie
0
490
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
200
Androidアプリの One Experience リリース
nein37
0
360
return文におけるstd::moveについて
onihusube
1
1.4k
Recoilを剥がしている話
kirik
5
8.1k
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
130
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
390
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
850
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
530
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
6
1.3k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.8k
Docker and Python
trallard
43
3.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Music & Morning Musume
bryan
46
6.3k
Statistics for Hackers
jakevdp
796
220k
The Cost Of JavaScript in 2023
addyosmani
46
7.1k
BBQ
matthewcrist
85
9.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Optimizing for Happiness
mojombo
376
70k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Documentation Writing (for coders)
carmenintech
67
4.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 ご清聴ありがとうございました