Successfully reported this slideshow.

Next.js Storybook Driven Development

0

Share

1 of 20
1 of 20

Next.js Storybook Driven Development

0

Share

Download to read offline

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

https://charity-conf.okinawa.jp/

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

https://charity-conf.okinawa.jp/

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Next.js Storybook Driven Development

  1. 1. Takuya Tejima at GAOGAO Pte. Ltd. 2020/06 Next.js Storybook Driven Development
  2. 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. 3. Storybookとは
  4. 4. Storybookとは - コンポーネントカタログを作れるもの https://storybook.js.org/ - ReactやVue用のpluginが提供されている 4
  5. 5. 「UIコンポーネントのTDD」に近い発想 - 前提 - デザイナーがプロダクト横断した別途デザインを作っている - 開発メンバーがAtomic Designの基礎を理解している - 結果的に以下のDX(Developer Experience)が得られる - 疎結合なコンポーネント設計の意識持てる - 新規ページを作成時に再利用のコンポーネントを探しやすい - 新しいメンバーにもコンポーネント実装・利用方法の理解がしやすい - Auto reloadが便利 - テストが実施しやすい - 開発工数特に大きく上がらない - 見てて気持ちいい Storybook Driven Development 5
  6. 6. 今回SDDを導入したプロジェクト React v16.13.1 & TypeScript の開発プロジェクト - Atomic Designの導入 - Next.jsベースで @storybook/react アドオンの導入 - React hooks & FC / Styled Componentの導入 - @storybook/addon-storyshots-puppeteerによる画 像テスト - チームはグローバル構成・コミュニケーションは英語 6
  7. 7. - 小さなパーツが積み重なって大きな要素を構成するデザインシステム(原子が分子 を作り、分子が有機体を作る) - Atoms (原子):コンポーネントの最小単位 - Molecules (分子):1つ以上のAtomを使用して構成されたコンポーネント単位 - Organisms (有機体):1つ以上のMoleculesを使用して構成されたコンポーネント単位 Atomic Designとは 7 出典: https://atomicdesign.bradfrost.com/chapter-2/
  8. 8. Atomic Designの例 8 Atoms (原子) Molecules (分子) Organisms (有機体)
  9. 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. 10. Styled componentを利用したコンポーネント実装例 10 - カード型コンポーネントの例
  11. 11. - Storybook開発で意識すること - [コンポーネント名].stories.ts というstorybookファイルを必ずコンポーネントと 対で作る - 実装前にインターフェース(props)を設計する - Formが絡むコンポーネントの実装にはページコンポーネント状で react-hooks-formを利用しているケースを想定する - 使用感を統一する (リンクメニュー、リンクボタンなどの実装) - 同じようなものを作らないように再利用できるコンポーネントがあるかを確認す る → コンポーネントが増えるほどフロントエンド全体の開発は加速する React hooks & FC 11
  12. 12. Pageコンポーネントの実装 12 - Storybookで作成したコンポーネントを利用するPageコンポーネント - Next.jsのpages配下コンポーネントでは、基本はレイアウト+API・デー タの繋ぎ部分が仕事範囲 - コンポーネント間のデータの受け渡しはuseContextに統一 (useReducerは使わず)
  13. 13. react-hooks-formを使ったPageコンポーネント実装例 13
  14. 14. storyshots-puppeteerによるテスト - Storyshotというjestベースのテストライブラリの拡張 - chromeのheadlessブラウザ用nodejsライブラリpuppeteerベースの実装 - 自動で画像による差分を検知して意図しないUIの変更があるとfailする - テストコードを書く必要がないので導入コストが低い - UIを意図的に変更した時はscreenshotファイルを消してrunすればsuccessになる - 基本は初期表示状態の差分検知であるためJSによるアクションをトリガーにした何 かは検知できない 14
  15. 15. storyshots-puppeteerによるテストのTips - アニメーション、画像のロード、マシンスペック、500ms対応 - ストーリー名の正規表現でテスト対象からexcludeも可能 - 画像に依存しているコンポーネント向けに遅延入れる必要あり 15
  16. 16. - 導入コストが低いため、サービス安定稼動後に導入オススメ - スナップショット画像ファイルが生成されfailした画像は変更がハイライト storyshots-puppeteerによるテスト結果 16 変更前 差分 変更後
  17. 17. Storybookデモ
  18. 18. 快適・どんな人にオススメか 18 - Next/Nuxtなどを使っていて雑なコンポーネント仕様になりがちなのをある程度強 制的に防ぐことができる - 1-2名で密にコミュニケーションを取る場合は恩恵が少ないかもしれない - 3名以上で特に以下のような環境では、認識合わせのためのコミュニケーションの 工数を減らすことができる - リモート環境 - 副業の方がいる - 外国人の方 - コンポーネントの独立性・再利用性を高めたい方はおすすめ(誰かに使ってもらう のを想定した書き方を皆が意識できるようになる) 快適フロントエンドDX(Developer Experience)の実現
  19. 19. - Next.js (React/TS) 事例でSDDを導入してみた - Atomic Designと相性が良い - 疎結合・再利用性を高めるコンポーネント実装を実現できる - 自動テストの仕組みも提供されている - 導入はデメリットよりメリットの方が多い - 開発メンバーからは次のプロジェクトでも使いたいとの声が得られた - DX(Developer Experience)高いのでおすすめ! Storybook Driven Developmentまとめ 19
  20. 20. Thank You

×