2020/6/21 沖縄のフロントエンドカンファレンスで登壇したReact・Atomic Design・Styled Componentなどを活用したstorybook駆動開発についての発表資料です。 https://charity-conf.okinawa.jp/

1. Takuya Tejima at GAOGAO Pte. Ltd.
2020/06
Next.js
Storybook Driven Development

2. 自己紹介
● 手島拓也 (@tejitak)
● 経歴
● IBM / Software Engineer 東京
● LINE / Frontend Engineer 東京
● UPSTAY Pte. ltd. / Co-Founder&CTO タイ
● GAOGAO Pte. Ltd. / Co-Founder&CEO
タイ・ホーチミン・シンガポール・東京
● 「Vue.js入門」共著
● 東南アジアのどこかにいます (今現在はシンガポール )
● #婚活男子
● 0->1やグローバル志向のエンジニア募集中です！

3. Storybookとは

4. Storybookとは
- コンポーネントカタログを作れるもの https://storybook.js.org/
- ReactやVue用のpluginが提供されている
4

5. 「UIコンポーネントのTDD」に近い発想
- 前提
- デザイナーがプロダクト横断した別途デザインを作っている
- 開発メンバーがAtomic Designの基礎を理解している
- 結果的に以下のDX(Developer Experience)が得られる
- 疎結合なコンポーネント設計の意識持てる
- 新規ページを作成時に再利用のコンポーネントを探しやすい
- 新しいメンバーにもコンポーネント実装・利用方法の理解がしやすい
- Auto reloadが便利
- テストが実施しやすい
- 開発工数特に大きく上がらない
- 見てて気持ちいい
Storybook Driven Development
5

6. 今回SDDを導入したプロジェクト
React v16.13.1 & TypeScript の開発プロジェクト
- Atomic Designの導入
- Next.jsベースで @storybook/react アドオンの導入
- React hooks & FC / Styled Componentの導入
- @storybook/addon-storyshots-puppeteerによる画
像テスト
- チームはグローバル構成・コミュニケーションは英語
6

7. - 小さなパーツが積み重なって大きな要素を構成するデザインシステム（原子が分子
を作り、分子が有機体を作る）
- Atoms (原子)：コンポーネントの最小単位
- Molecules (分子)：1つ以上のAtomを使用して構成されたコンポーネント単位
- Organisms (有機体)：1つ以上のMoleculesを使用して構成されたコンポーネント単位
Atomic Designとは
7
出典: https://atomicdesign.bradfrost.com/chapter-2/

8. Atomic Designの例
8
Atoms (原子) Molecules (分子)
Organisms (有機体)

9. Styled ComponentとStyled Systemを使ったスタイルの実装
9
- styled-components
- https://styled-components.com/
- CSS in JSライブラリ
- コンポーネントに閉じたScoped CSSの実現
- CSS命名規則に悩まされる必要なし
- styled-system
- https://styled-system.com/
- Space, Layout, Responsive, Variantなどの便利Utilityのstyled-component
の拡張ライブラリ

10. Styled componentを利用したコンポーネント実装例
10
- カード型コンポーネントの例

11. - Storybook開発で意識すること
- [コンポーネント名].stories.ts というstorybookファイルを必ずコンポーネントと
対で作る
- 実装前にインターフェース（props）を設計する
- Formが絡むコンポーネントの実装にはページコンポーネント状で
react-hooks-formを利用しているケースを想定する
- 使用感を統一する (リンクメニュー、リンクボタンなどの実装)
- 同じようなものを作らないように再利用できるコンポーネントがあるかを確認す
る → コンポーネントが増えるほどフロントエンド全体の開発は加速する
React hooks & FC
11

12. Pageコンポーネントの実装
12
- Storybookで作成したコンポーネントを利用するPageコンポーネント
- Next.jsのpages配下コンポーネントでは、基本はレイアウト＋API・デー
タの繋ぎ部分が仕事範囲
- コンポーネント間のデータの受け渡しはuseContextに統一
（useReducerは使わず）

13. react-hooks-formを使ったPageコンポーネント実装例
13

14. storyshots-puppeteerによるテスト
- Storyshotというjestベースのテストライブラリの拡張
- chromeのheadlessブラウザ用nodejsライブラリpuppeteerベースの実装
- 自動で画像による差分を検知して意図しないUIの変更があるとfailする
- テストコードを書く必要がないので導入コストが低い
- UIを意図的に変更した時はscreenshotファイルを消してrunすればsuccessになる
- 基本は初期表示状態の差分検知であるためJSによるアクションをトリガーにした何
かは検知できない
14

15. storyshots-puppeteerによるテストのTips
- アニメーション、画像のロード、マシンスペック、500ms対応
- ストーリー名の正規表現でテスト対象からexcludeも可能
- 画像に依存しているコンポーネント向けに遅延入れる必要あり
15

16. - 導入コストが低いため、サービス安定稼動後に導入オススメ
- スナップショット画像ファイルが生成されfailした画像は変更がハイライト
storyshots-puppeteerによるテスト結果
16
変更前
差分
変更後

17. Storybookデモ

18. 快適・どんな人にオススメか
18
- Next/Nuxtなどを使っていて雑なコンポーネント仕様になりがちなのをある程度強
制的に防ぐことができる
- 1-2名で密にコミュニケーションを取る場合は恩恵が少ないかもしれない
- 3名以上で特に以下のような環境では、認識合わせのためのコミュニケーションの
工数を減らすことができる
- リモート環境
- 副業の方がいる
- 外国人の方
- コンポーネントの独立性・再利用性を高めたい方はおすすめ（誰かに使ってもらう
のを想定した書き方を皆が意識できるようになる）
快適フロントエンドDX(Developer Experience)の実現

19. - Next.js (React/TS) 事例でSDDを導入してみた
- Atomic Designと相性が良い
- 疎結合・再利用性を高めるコンポーネント実装を実現できる
- 自動テストの仕組みも提供されている
- 導入はデメリットよりメリットの方が多い
- 開発メンバーからは次のプロジェクトでも使いたいとの声が得られた
- DX(Developer Experience)高いのでおすすめ!
Storybook Driven Developmentまとめ
19

20. Thank You