#jsconfjp #jsconfjp_d
© kaonavi, inc. 1Storybook駆動開発UI開発の再現性と効率化Hiroki Kinoshita
View Slide
INDEX© kaonavi, inc. 2● 前提知識● Storybook駆動開発とは● 効率性の向上について● 再現性の向上について● 具体的な恩恵について● まとめ
自己紹介© kaonavi, inc. 3
木下 博貴 Hiroki KinoshitaX: @kinocoboy2所属：株式会社カオナビ 2022年中途入社職種：フロントエンドエンジニア / スクラムマスター趣味：キャンプ・エレキギター・バイクプラモデル特徴：新潟県長岡市に地方移住したエンジニア自己紹介© kaonavi, inc. 4
INDEX© kaonavi, inc. 5● 前提知識● Storybook駆動開発とは● 効率性の向上について● 再現性の向上について● 具体的な恩恵について● まとめ
© kaonavi, inc. 6● UI/コンポーネントカタログ○ UIを構築する部品単位に分かりやすく整理可能● オープンソース○ なんとタダで無料前提知識
INDEX© kaonavi, inc. 7● 前提知識● Storybook駆動開発とは● 効率性の向上について● 再現性の向上について● メリット・デメリット● まとめ
© kaonavi, inc.● ものづくりは不確実なことが多い。○ でも我々は素早く価値あるソリューションを提供する必要がある。8Storybook駆動開発とは企画実装設計テスト思い切りよく改善し、よりよく！でも顧客が体感できる価値を保証しながら。効率的にとにかく今よりも早くイテレーション
© kaonavi, inc.顧客が体感できる価値を変えず、効率を追い求めるために9Storybook駆動開発とは顧客から見える景色をシステム的に再現性をもって保証するスコープを限定し集中的に触れる環境を構成するStorybookをUIカタログの側面ではなく、インテグレーションテストツールとして利用するStorybook駆動設計
INDEX© kaonavi, inc. 10● 前提知識● Storybook駆動開発とは● 効率性の向上について● 再現性の向上について● 具体的な恩恵について● まとめ
© kaonavi, inc. 11効率をあげるって簡単に言うけど難しい。効率が出ないワケがある効率性の向上についてめっちゃ複雑 めっちゃ重い価値創出
© kaonavi, inc. 12めっちゃ複雑
© kaonavi, inc.● 基本的に複雑な業務を改善する為にソリューションは生まれる。○ 例えば、Saasとしての難しさや人事業務の複雑さ。■ 例● 職能やロールによる権限の違い● 業務の進行に伴う使用感の変化● 利用プランによる提供する機能の違い13めっちゃ複雑
© kaonavi, inc. 14めっちゃ複雑業務を改善する手段として、ソリューションが顧客が持っている複雑さを肩代わりすることが多いFrontend BackendDB
© kaonavi, inc. 15業務を改善する手段として、ソリューションが顧客が持っている複雑さを肩代わりすることが多いめっちゃ複雑Frontend BackendDBドメインモデルは可能な限り抽象化して綺麗に保ちたいソリューションとしての腐敗防止的な役割も必要になる
© kaonavi, inc.フロントエンドの領域でも複雑性を極力排除し、綺麗に保ちたいそこで例としてAtomicDesignなどの手法が取り入れられる。16めっちゃ複雑FrontendAtom Molecules Organisms Template Pages
© kaonavi, inc.フロントエンドの領域でも複雑性を極力排除し、綺麗に保ちたいそこで例としてAtomicDesignなどの手法が取り入れられる。17めっちゃ複雑FrontendAtom Molecules Organisms Template Pages権限や有効無効を含めた変化はここで顕在化するDesign System
© kaonavi, inc. 18めっちゃ複雑Huge Component
© kaonavi, inc.「Story」単位でレンダリング可能「Story」でできること○ 引数■ args を用いた引数渡し○ API の MOCK化■ Mock Service Worker● msw19状態単位で管理・把握をする
© kaonavi, inc.ユーザーが観測できる「状態」単位で分解する。20状態単位で管理・把握をするStoryStoryStoryStory StoryStoryStoryStoryHuge 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 ComponentStory.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. 47Storybook駆動開発はいいぞ!
We are hiring!!https://corp.kaonavi.jp/recruit/list/© kaonavi, inc. 48
© kaonavi, inc. 49ご清聴ありがとうございました
kinocoboy2
codehex
sanfrecce_osaka
nrslib
texmeijin
bells17
uhyo
huffon
clown0082
tanakahisateru
piyoppi
atinfinity
seike460
dotmariusz
hatefulcrawdad
malarkey
productmarketing
orderedlist
mraible
addyosmani
bluesmoon
marcelosomers
garrettdimon
jonrohan
samlambert