いまさらのStorybook

## 概要

Nihonbashi.js #9 のLT資料です。

https://nihonbashi-js.connpass.com/event/332328/

業務で初めてStorybookを利用するにあたり調べたことを発表しました。

## 参考リンク

スライド中の参考リンクについて、以下にも掲載します。

- ※1: https://github.com/ComponentDriven/csf
- ※2: https://github.com/ComponentDriven/csf/blob/v0.1.11/src/story.ts#L339
- ※3: https://github.com/ComponentDriven/csf/blob/v0.1.11/src/story.ts#L360
- ※4: https://github.com/storybookjs/storybook/blob/v8.3.6/code/renderers/react/src/public-types.ts#L24-L31
- ※5: https://github.com/storybookjs/storybook/blob/v8.3.6/code/renderers/react/src/public-types.ts#L47-L66
- ※6: https://github.com/storybookjs/storybook/issues/22860
- ※7: https://github.com/storybookjs/storybook/issues/22860

Transcript

1. Nihonbashi.js #9 ikuma-t 2024/10/31 いまさらの Storybook
2. ikuma-t # 今月転職して、フロントエンドエンジニアになりましたC # Nihonbashi.js 初参加です。よろしくお願いします # 日本橋は「BOUL'ANGE」というパン屋が好きで、ときどき
 訪れています。 いくま / いくまてぃー 技術書典17で関数型プログラミング言語「Gleam」の本を出します！
3. トピック Storyで使うTypeScriptの型定義 Metaってどういう定義？ / satisfiesでどう嬉しい？ / Parametersに型補完つけるには？ Storybook自体がどのように動くのか トピック 1 トピック 2
4. Storyで使うTypeScriptの型定義 トピック 1 Metaってどういう定義？ / satisfiesでどう嬉しい？ / Parametersに型補完つけるには？
6. 自動生成 scaffdog、hygenなど
8. Component Story Format に必要な属性を提供する Meta/StoryObj CF Storyで使うTypeScriptの型定義 Component Story Format 3 BaseAnnotations decorator parameters args loaders render mount tags beforeEach argTypes StoryObj I Meta Story Level 特定のライブラリによらない Storyの標準 Component Level T T ※1 ※1: https://github.com/ComponentDriven/csf ※2: https://github.com/ComponentDriven/csf/blob/v0.1.11/src/story.ts#L339 ※2
9. ジェネリクスによる args の絞り込み（Meta） MetaはComponent単位の設定を記述し、satisfiesでComponent単位の設定と分離する gp Storyで使うTypeScriptの型定義 p BaseAnnotationsにおけるargsの型: Partial<TArgs>q p TArgsは、Metaの型引数のComponentPropy p satisfiesと合わせると、meta.args は以下を満たす„ p ButtonのPropsを指定可能（ v p 実際の型は { onClick: Mock<Procedure> } すべてOptional 推論された型 ※3 ※4 ※3: https://github.com/ComponentDriven/csf/blob/v0.1.11/src/story.ts#L360 ※4: https://github.com/storybookjs/storybook/blob/v8.3.6/code/renderers/react/src/public-types.ts#L24-L31
10. ジェネリクスによる args の絞り込み（StoryObj） BE Storyで使うTypeScriptの型定義 – StoryObjはコンポーネントのPropsのうち
 metaで指定されたものをOptionalにする – これにより している。
 （Componentで指定すれば、Storyでの指定は任意） Componentレベルの設定とStoryレベルの 設定をそれぞれ別々に正しく型付け ※5 ※5: https://github.com/storybookjs/storybook/blob/v8.3.6/code/renderers/react/src/public-types.ts#L47-L66
11. ジェネリクスによる args の絞り込み（StoryObj） BE Storyで使うTypeScriptの型定義 u StoryObjはコンポーネントのPropsのうち
 metaで指定されたものをOptionalにする– u これによりComponentレベルの設定とStoryレベルの 設定をそれぞれ別々に正しく型付けしている。
 （ ） Componentで指定すれば、Storyでの指定は任意 ※5 ※5: https://github.com/storybookjs/storybook/blob/v8.3.6/code/renderers/react/src/public-types.ts#L47-L66
12. Parametersに型補完が効かないんですが...
13. Parametersの型定義補完 '0 Storyで使うTypeScriptの型定義 h Feature Requestが上がっているU h Storybook 9.0でのリリースに向けて動いている...っぽい？ ※6: https://github.com/storybookjs/storybook/issues/22860 ※6 ※発表当日のコミュニケーションで何か分かったら資料を更新します。
14. Storybook自体がどのように動くのか Topic 2 トピック 2
15. storybook devコマンドからStorybookのUIが立ち上げるまでの全体像 AF Storyがどのようにカタログになるのか ＄storybook dev renderStorybookUI start createServer iframe用のMiddleware runtime.js用のMiddleware Previ re Preview Manager Manager Builder Preview Builder Dev Server polka （HTTPサーバ） template.ejs BundlerがViteの場合 ÃF 開発用サーバが立ち上がる ViteはmiddlewareModeで稼働する runtimeのスクリプトと virtualモジュールを インラインで読み込み。 StorybookのBuilderは既定のインターフェースを満たす必要がある startは開発サーバ起動に必要なAPI（本番ではbuildが要求される） AF インラインスクリプトからレンダー —F iframeを含むReactアプリで
 Storybookのガワを形成 iframe.html Storybook 8.3.6 で確認した内容
16. （本当はここまで追いかけたかった）experimental-nextjs-vite 7B Storyがどのようにカタログになるのか 7つのViteプラグインでNext.jsに必要な機能を読み込む }B なんかReactとかの読み込み先をnext/dist配下にいい感じにしてくれるや 7B next/dynami™ ˆB next/en… ‚B next/fon€ —B next/imagx €B mockm xB swc ※7: https://github.com/storybookjs/storybook/issues/22860 内部的にはvite-plugin-storybook-nextjsというViteのプラグイン
17. ありがとうございました！