The Development Productivity Storybook Provides

Transcript

1. © 2024 Wantedly, Inc. いま Storybook がもたらす開 発生産性 Wantedly x NIJIBOX Mar. 15 2024 - Shintaro Kawabe
2. © 2023 Wantedly, Inc. 自己紹介 shintaro kawabe sh1ntaro_dev s-kawabe 所属 ウォンテッドリー株式会社 ・Visit Growth Squad ・Frontend Chapter ・Design System Guild React / TypeScript / Figma / Design System 好きな 技術 ダーツ / カラオケ / ベース / クラ フトビール 趣味 s_kawabe
3. Wantedly 性格診断がリリース 🎉 © 2023 Wantedly, Inc.
4. 1. なぜアプリケーション開発にStorybookが必要なのか 2. Storybookで解決していく課題 a. 実装のドキュメント化 b. デザイナーとエンジニアのコミュニケーション c. フロントエンドテスト d. 開発タスク細分化/レビューコストダウン e. デザインシステムの構築 3. Storybookづくりに大事なこと 4. Wantedlyの今後 © 2023 Wantedly, Inc. 目次
5. 1. なぜアプリケーション開発にStorybookが必要なのか © 2023 Wantedly, Inc. Component Driven の普及 Ruby on Rails や PHP Framework による MPA が主流だった時代は、Page Based な トップダウンでのフロントエンド開発が行われ ていた。 React や Vue による SPA 開発が誕生し画面全 体でなく、UIが部分ごと状態を持ち、一部分だ け見た目が変わるようなユーザー体験が現れる ようになった。 https://www.componentdriven.org/
6. 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
7. 1. なぜアプリケーション開発にStorybookが必要なのか © 2023 Wantedly, Inc. 開発プロセスのアジャイル化 Wantedlyにおけるアジャイル開発 （社内資料） アジャイルな開発スタイルを取り入れる チームは特にスタートアップで非常に多く なった。これには迅速なイテレーションと フィードバックループが重要。 つまり、小さく改善や仮説検証を回すとい うこと。 小さな改善ごとに UI に Storybook を用い ることで、チーム全体でアプリケーション への理解を深め開発サイクルを加速させ る。
8. 2. Storybookで解決していく課題 © 2023 Wantedly, Inc. a. 実装のドキュメント化 Storybook が Component Driven な動くドキュメントになる b. デザイナーとエンジニアのコミュニケーション デザイナーとエンジニア間の開発サイクル UP c. フロントエンドテスト フロントエンドのテストがやりやすくなる d. 開発タスク細分化/レビューコストダウン ボトムアップ開発によるタスク分割、レビューのしやすさ e. デザインシステムの構築 デザインシステムの仕様、ドキュメントの表現
9. a. 実装のドキュメント化 © 2023 Wantedly, Inc. そのコンポーネントが持つ振る舞い、仕様 をインタラクティブに確認できるドキュメ ントとして機能する。 プロジェクト New Joiner のコードリー ディングにも非常に強力なツールとなる。 実装を修正したら Storybook も修正せざる を得ない（TypeScriptを使っている場合） という状況から、アップデートの見落とし を防ぎ、長期的な保守も可能となる。
10. b. デザイナーとエンジニアのコミュニケーション © 2023 Wantedly, Inc.
11. b. デザイナーとエンジニアのコミュニケーション © 2023 Wantedly, Inc.
12. c. フロントエンドテスト © 2023 Wantedly, Inc. https://www.resonio.com/blog/front-end-testing-of-websites
13. 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 に移行し ていきたい...）
14. c. フロントエンドテスト © 2023 Wantedly, Inc. https://www.resonio.com/blog/front-end-testing-of-websites Integration Test 複合的なコンポーネントにおける、一連の ユーザー体験をテストする。 composeStories や play function といっ た機能を使うことが多い。 この際、Jest と連携して作成した Story を テストに流用することができる。 （個人的におすすめな手法）
15. c. フロントエンドテスト © 2023 Wantedly, Inc. Integration Test - composeStories と play
16. c. フロントエンドテスト © 2023 Wantedly, Inc. Integration Test - composeStories と play
17. c. フロントエンドテスト © 2023 Wantedly, Inc. Integration Test - composeStories と play
18. c. フロントエンドテスト © 2023 Wantedly, Inc. https://www.resonio.com/blog/front-end-testing-of-websites Visual Regression Test Storybookを用いたVRTは、各ファイルの スクリーンショットをビルドごとに取得 し、前回ビルド時との差分を検出できると いうもの。 WantedlyではChromaticを採用しており、 各種修正時、ライブラリアップデート時な どのリグレッションチェックに大変活躍し ている。
19. d. 開発タスクの細分化 / レビューコストダウン © 2023 Wantedly, Inc. Storybook 駆動開発と呼ばれるトピックに 近い。 ボトムアップに Storybook を用いて開発を 行うことで、期待される振る舞いが漏れな く実装される保証と、開発が関心ごと別に 細かく分けられるため小さくタスクを切る ことができ、レビューコストが下がる。 レビューの質も上がり、スピードも品質も 上がる。 （PRを出したら One Shot な Storybook 環境が出てくると、もっといい） https://hitokuse.com/blog/?p=3135 スキーマ駆動開発による変化
20. e. デザインシステムの構築 © 2023 Wantedly, Inc. デザインシステムの構築に Storybook を用いることでチーム のコラボレーション強化に役立ち、 継続的に生きるドキュメントとし て、デザインシステムの仕様を関係 者に表すための重要なアプローチと なる。 デザイントークンなど細かい仕様も Storybook に記しておくと、とて も開発に役立つ
21. 3. Storybookづくりに大事なこと © 2023 Wantedly, Inc. Storybookつくるの面倒、時間かかる scaffdog や hygen などの scaffolding ツールがお すすめ。 コンポーネント名と配置するディレクトリを指定 すると、設定ファイルに記載したテンプレート ファイルを生成してくれるというもの。 *.stories.tsx をここに含めてあげれば、書き始め のハードルがかなり下がる （コメントも必要に応じて加えてあげるとよい）
22. 4. Wantedlyの今後 © 2023 Wantedly, Inc. a. アクセシビリティ対応 アクセシビリティに力を入れていく際、Storybookでの品質担保を行う b. エンジニア以外もStorybookを活用可能に 実はWantedlyではデザイナーやPdMはそこまでStorybookを見ていない... c. CSF3.0への完全移行 CSF3.0に完全移行し、一貫性のある運用にすること、またすべてのStoryを　　　　　 テスト利用可能にすること d. デザインシステムのアウトプット Wantedly Design System の社外へのアピール、Figmaとともに進めたい
23. I love Frontend, and Design. Thank you © 2023 Wantedly, Inc.
24. Thank you！ Thank you © 2023 Wantedly, Inc.