Storybook 勉強会 2024.5.9

Agenda 1. コンポーネントカタログとは 2. なぜコンポーネントカタログを導⼊するのか 3. Storybook とは 4. Story とは 5. Story を書いてみる 6. Q&A 7. 補⾜: コンポーネントを作る際に意識すべきこと 8. Q&A

web アプリケーションを構成する UI コンポーネントを個別に管理するための フレームワーク。 コンポーネントカタログとは

コンポーネントカタログとは 各コンポーネントを実際に動作させられるだけでなく、 Props の型情報や JSDoc からドキュメントを⾃動⽣成することもできる。

なぜコンポーネントカタログを導⼊するのか 現代の web フロントエンド開発はコンポーネント駆動開発が主流 ● React, Vue, Angular, Svelte, etc… 全てコンポーネントを積み上げてアプリを 構築するスタイル。 ● ならばそれらコンポーネント（部品）を個別に管理できた⽅が良い。 個別に管理できればデバッグやテストも個別に実施可能となる。 ● カタログ化することで個々の関⼼領域が明確となり、不⽤意に本来の関⼼を 超越した機能追加を予防しやすくなる。

なぜコンポーネントカタログを導⼊するのか カタログはコンポーネント開発のためのサンドボックス ● 個々のコンポーネントを独⽴して動作させられるため、動作確認のためだけ にアプリケーション本体に組み込んで起動させるといった⼿間が不要。 ● Props、モックデータ、イベント発⽕を擬似的に注⼊できるため、 コンポーネントのあらゆる状態をデバッグできる。

Storybook とは コンポーネントカタログのデファクトスタンダード ● 他にも様々な競合ライブラリが存在する。

Storybook とは 単に UI コンポーネントの挙動をシミュレートするだけでなく、 UI の⾃動テストを定義‧実⾏することも可能。

Storybook とは Visual Regression Test (VRT) をサポート。 ● v7 までは Chromatic という SaaS にデプロイして実⾏する仕様だったが、 v8 からローカルマシン上でも実⾏可能となった。

UI コンポーネントのバリエーションをシミュレートしたもの。 1つの UI コンポーネントに対し複数の Story を定義できる。 Story とは

Story とは Story を定義するには、シミュレートしたい状態ごとに Story を⽣成する関数を エクスポートする。 Story とは特定の状態で描画された要素 (※) を返す関数であり、React の状態を 持たない関数コンポーネントのようなものである。 ※ 例えば、プロパティを指定したコンポーネントなど

Story を書いてみる

Story を書いてみる Component Story Format (CSF) という仕様に沿って書く ● 2024年5⽉現在は Ver.3 が主流 ● eslint-plugin-storybook を導⼊すれば⾃然とこの書き⽅に矯正される

Q&A

補⾜: コンポーネントを作る際に意識すべきこと コンポーネントを作るモチベーションは 2つ: 1. 再利⽤するため 2. ⼤きく複雑な機能を責務ごとに切り分け整理するため

補⾜: コンポーネントを作る際に意識すべきこと 1. 再利⽤するため Button、Popover、Modal といったアプリケーション特有のドメインを持たない ものはこれに該当する。つまり MUI や ChakraUI といった汎⽤的な UI ライブラ リーと同じ性質を持つもの。 これらライブラリーの各 UI は “御社のアプリケーション” という 特定ドメインへの関⼼を持たない。だからいくらでも再利⽤できる。

2. ⼤きく複雑な機能を責務ごとに切り分け整理するため 可読性‧保守性を担保するために切り出されるものであり、基本的に再利⽤することを ⽬的としない。 UI コンポーネントの最も⼤きな単位は Page であり、原則これはアプリケーション特有 のドメインを持つ。Page によっては複数の機能を持つものもあり、それらのコードが1 つのファイルにすべて記述されると当然ながら可読性‧保守性は下がる。 これを回避するために1つの Page ファイルに書かれたコードを機能ごとに分類しコン ポーネントとして切り出すことで、コードが整理され可読性‧保守性が担保される。 補⾜: コンポーネントを作る際に意識すべきこと

Q&A

参考⽂献 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