Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Development Productivity Storybook Provides

Avatar for shintaro shintaro
March 15, 2024
0

The Development Productivity Storybook Provides

Avatar for shintaro

shintaro

March 15, 2024
Tweet

Transcript

  1. © 2023 Wantedly, Inc. 自己紹介 shintaro kawabe sh1ntaro_dev s-kawabe 所属

    ウォンテッドリー株式会社 ・Visit Growth Squad ・Frontend Chapter ・Design System Guild React / TypeScript / Figma / Design System 好きな 技術 ダーツ / カラオケ / ベース / クラ フトビール 趣味 s_kawabe
  2. 1. なぜアプリケーション開発にStorybookが必要なのか 2. Storybookで解決していく課題 a. 実装のドキュメント化 b. デザイナーとエンジニアのコミュニケーション c. フロントエンドテスト

    d. 開発タスク細分化/レビューコストダウン e. デザインシステムの構築 3. Storybookづくりに大事なこと 4. Wantedlyの今後 © 2023 Wantedly, Inc. 目次
  3. 1. なぜアプリケーション開発にStorybookが必要なのか © 2023 Wantedly, Inc. Component Driven の普及 Ruby

    on Rails や PHP Framework による MPA が主流だった時代は、Page Based な トップダウンでのフロントエンド開発が行われ ていた。 React や Vue による SPA 開発が誕生し画面全 体でなく、UIが部分ごと状態を持ち、一部分だ け見た目が変わるようなユーザー体験が現れる ようになった。 https://www.componentdriven.org/
  4. 1. なぜアプリケーション開発にStorybookが必要なのか © 2023 Wantedly, Inc. UI表現とContextの多様化 SPA の誕生によって UI

    が状態を持つようにな り、 UI ごとの表現が多様化した。(UI Stack などの考え) また、アプリケーションが利用されるコンテキ ストが次第に増えていき、アクセス可能なデバ イスが増えた。 これらはユーザーに良い体験を与える一方、開 発者間での認識のズレや保守のコストが上がっ た。 https://www.scotthurff.com/posts/why-your-user-interface-is-awkward-you re-ignoring-the-ui-stack/ Wantedly Design System
  5. 1. なぜアプリケーション開発にStorybookが必要なのか © 2023 Wantedly, Inc. 開発プロセスのアジャイル化 Wantedlyにおけるアジャイル開発 (社内資料) アジャイルな開発スタイルを取り入れる

    チームは特にスタートアップで非常に多く なった。これには迅速なイテレーションと フィードバックループが重要。 つまり、小さく改善や仮説検証を回すとい うこと。 小さな改善ごとに UI に Storybook を用い ることで、チーム全体でアプリケーション への理解を深め開発サイクルを加速させ る。
  6. 2. Storybookで解決していく課題 © 2023 Wantedly, Inc. a. 実装のドキュメント化 Storybook が

    Component Driven な動くドキュメントになる b. デザイナーとエンジニアのコミュニケーション デザイナーとエンジニア間の開発サイクル UP c. フロントエンドテスト フロントエンドのテストがやりやすくなる d. 開発タスク細分化/レビューコストダウン ボトムアップ開発によるタスク分割、レビューのしやすさ e. デザインシステムの構築 デザインシステムの仕様、ドキュメントの表現
  7. a. 実装のドキュメント化 © 2023 Wantedly, Inc. そのコンポーネントが持つ振る舞い、仕様 をインタラクティブに確認できるドキュメ ントとして機能する。 プロジェクト

    New Joiner のコードリー ディングにも非常に強力なツールとなる。 実装を修正したら Storybook も修正せざる を得ない(TypeScriptを使っている場合) という状況から、アップデートの見落とし を防ぎ、長期的な保守も可能となる。
  8. c. フロントエンドテスト © 2023 Wantedly, Inc. https://www.resonio.com/blog/front-end-testing-of-websites UI Test /

    Visual Test Atom, Morecules 相当の Component の見 た目やインタラクションをチェックする。 または Storyoshots などによるスナップ ショットテスト。 Wantedly では一部のUI表示テストや、ス ナップショットテストに使用している。 (スナップショットテストは VRT に移行し ていきたい...)
  9. c. フロントエンドテスト © 2023 Wantedly, Inc. https://www.resonio.com/blog/front-end-testing-of-websites Integration Test 複合的なコンポーネントにおける、一連の

    ユーザー体験をテストする。 composeStories や play function といっ た機能を使うことが多い。 この際、Jest と連携して作成した Story を テストに流用することができる。 (個人的におすすめな手法)
  10. c. フロントエンドテスト © 2023 Wantedly, Inc. https://www.resonio.com/blog/front-end-testing-of-websites Visual Regression Test

    Storybookを用いたVRTは、各ファイルの スクリーンショットをビルドごとに取得 し、前回ビルド時との差分を検出できると いうもの。 WantedlyではChromaticを採用しており、 各種修正時、ライブラリアップデート時な どのリグレッションチェックに大変活躍し ている。
  11. d. 開発タスクの細分化 / レビューコストダウン © 2023 Wantedly, Inc. Storybook 駆動開発と呼ばれるトピックに

    近い。 ボトムアップに Storybook を用いて開発を 行うことで、期待される振る舞いが漏れな く実装される保証と、開発が関心ごと別に 細かく分けられるため小さくタスクを切る ことができ、レビューコストが下がる。 レビューの質も上がり、スピードも品質も 上がる。 (PRを出したら One Shot な Storybook 環境が出てくると、もっといい) https://hitokuse.com/blog/?p=3135 スキーマ駆動開発による変化
  12. e. デザインシステムの構築 © 2023 Wantedly, Inc. デザインシステムの構築に Storybook を用いることでチーム のコラボレーション強化に役立ち、

    継続的に生きるドキュメントとし て、デザインシステムの仕様を関係 者に表すための重要なアプローチと なる。 デザイントークンなど細かい仕様も Storybook に記しておくと、とて も開発に役立つ
  13. 3. Storybookづくりに大事なこと © 2023 Wantedly, Inc. Storybookつくるの面倒、時間かかる scaffdog や hygen

    などの scaffolding ツールがお すすめ。 コンポーネント名と配置するディレクトリを指定 すると、設定ファイルに記載したテンプレート ファイルを生成してくれるというもの。 *.stories.tsx をここに含めてあげれば、書き始め のハードルがかなり下がる (コメントも必要に応じて加えてあげるとよい)
  14. 4. Wantedlyの今後 © 2023 Wantedly, Inc. a. アクセシビリティ対応 アクセシビリティに力を入れていく際、Storybookでの品質担保を行う b.

    エンジニア以外もStorybookを活用可能に 実はWantedlyではデザイナーやPdMはそこまでStorybookを見ていない... c. CSF3.0への完全移行 CSF3.0に完全移行し、一貫性のある運用にすること、またすべてのStoryを      テスト利用可能にすること d. デザインシステムのアウトプット Wantedly Design System の社外へのアピール、Figmaとともに進めたい