Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Next.js Storybook Driven Development

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

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

Related Books

Free with a 30 day trial from Scribd

See all
  • Login to see the comments

  • Be the first to like this

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

×