Storybook 勉強会

技術支援先にて Storybook を導入する過程で入門者向けの勉強会を実施しました。

参考文献:

Component Driven User Interfaces
Storybook: Frontend workshop for UI development
What is Visual Regression Testing: Technique, Importance | BrowserStack
Visual testing & review for web user interfaces • Chromatic
Passing Props to a Component – React
Component Story Format (CSF) • Storybook docs

Transcript

1. Storybook 勉強会 2024.5.9
2. Agenda 1. コンポーネントカタログとは 2. なぜコンポーネントカタログを導⼊するのか 3. Storybook とは 4. Story とは 5. Story を書いてみる 6. Q&A 7. 補⾜: コンポーネントを作る際に意識すべきこと 8. Q&A
3. web アプリケーションを構成する UI コンポーネントを個別に管理するための フレームワーク。 コンポーネントカタログとは
4. コンポーネントカタログとは 各コンポーネントを実際に動作させられるだけでなく、 Props の型情報や JSDoc からドキュメントを⾃動⽣成することもできる。
5. なぜコンポーネントカタログを導⼊するのか 現代の web フロントエンド開発はコンポーネント駆動開発が主流 • React, Vue, Angular, Svelte, etc… 全てコンポーネントを積み上げてアプリを 構築するスタイル。 • ならばそれらコンポーネント（部品）を個別に管理できた⽅が良い。 個別に管理できればデバッグやテストも個別に実施可能となる。 • カタログ化することで個々の関⼼領域が明確となり、不⽤意に本来の関⼼を 超越した機能追加を予防しやすくなる。
6. なぜコンポーネントカタログを導⼊するのか カタログはコンポーネント開発のためのサンドボックス • 個々のコンポーネントを独⽴して動作させられるため、動作確認のためだけ にアプリケーション本体に組み込んで起動させるといった⼿間が不要。 • Props、モックデータ、イベント発⽕を擬似的に注⼊できるため、 コンポーネントのあらゆる状態をデバッグできる。
7. Storybook とは コンポーネントカタログのデファクトスタンダード • 他にも様々な競合ライブラリが存在する。
8. Storybook とは 単に UI コンポーネントの挙動をシミュレートするだけでなく、 UI の⾃動テストを定義‧実⾏することも可能。
9. Storybook とは Visual Regression Test (VRT) をサポート。 • v7 までは Chromatic という SaaS にデプロイして実⾏する仕様だったが、 v8 からローカルマシン上でも実⾏可能となった。
10. UI コンポーネントのバリエーションをシミュレートしたもの。 1つの UI コンポーネントに対し複数の Story を定義できる。 Story とは
11. Story とは Story を定義するには、シミュレートしたい状態ごとに Story を⽣成する関数を エクスポートする。 Story とは特定の状態で描画された要素 (※) を返す関数であり、React の状態を 持たない関数コンポーネントのようなものである。 ※ 例えば、プロパティを指定したコンポーネントなど
12. Story を書いてみる
13. Story を書いてみる Component Story Format (CSF) という仕様に沿って書く • 2024年5⽉現在は Ver.3 が主流 • eslint-plugin-storybook を導⼊すれば⾃然とこの書き⽅に矯正される
14. Q&A
15. 補⾜: コンポーネントを作る際に意識すべきこと コンポーネントを作るモチベーションは 2つ: 1. 再利⽤するため 2. ⼤きく複雑な機能を責務ごとに切り分け整理するため
16. 補⾜: コンポーネントを作る際に意識すべきこと 1. 再利⽤するため Button、Popover、Modal といったアプリケーション特有のドメインを持たない ものはこれに該当する。つまり MUI や ChakraUI といった汎⽤的な UI ライブラ リーと同じ性質を持つもの。 これらライブラリーの各 UI は “御社のアプリケーション” という 特定ドメインへの関⼼を持たない。だからいくらでも再利⽤できる。
17. 2. ⼤きく複雑な機能を責務ごとに切り分け整理するため 可読性‧保守性を担保するために切り出されるものであり、基本的に再利⽤することを ⽬的としない。 UI コンポーネントの最も⼤きな単位は Page であり、原則これはアプリケーション特有 のドメインを持つ。Page によっては複数の機能を持つものもあり、それらのコードが1 つのファイルにすべて記述されると当然ながら可読性‧保守性は下がる。 これを回避するために1つの Page ファイルに書かれたコードを機能ごとに分類しコン ポーネントとして切り出すことで、コードが整理され可読性‧保守性が担保される。 補⾜: コンポーネントを作る際に意識すべきこと
18. Q&A
19. 参考⽂献 1. Component Driven User Interfaces 2. Storybook: Frontend workshop for UI development a. Why Storybook? • Storybook docs b. What's a story? • Storybook docs c. Browse Stories • Storybook docs 3. What is Visual Regression Testing: Technique, Importance | BrowserStack 4. Visual testing & review for web user interfaces • Chromatic 5. Passing Props to a Component ‒ React 6. Component Story Format (CSF) • Storybook docs