Slide 1

Slide 1 text

Nihonbashi.js #9 ikuma-t 2024/10/31 いまさらの Storybook

Slide 2

Slide 2 text

ikuma-t # 今月転職して、フロントエンドエンジニアになりましたC # Nihonbashi.js 初参加です。よろしくお願いします # 日本橋は「BOUL'ANGE」というパン屋が好きで、ときどき
 訪れています。 いくま / いくまてぃー 技術書典17で関数型プログラミング言語「Gleam」の本を出します!

Slide 3

Slide 3 text

トピック Storyで使うTypeScriptの型定義 Metaってどういう定義? / satisfiesでどう嬉しい? / Parametersに型補完つけるには? Storybook自体がどのように動くのか トピック 1 トピック 2

Slide 4

Slide 4 text

Storyで使うTypeScriptの型定義 トピック 1 Metaってどういう定義? / satisfiesでどう嬉しい? / Parametersに型補完つけるには?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

自動生成 scaffdog、hygenなど

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ジェネリクスによる args の絞り込み(Meta) MetaはComponent単位の設定を記述し、satisfiesでComponent単位の設定と分離する gp Storyで使うTypeScriptの型定義 p BaseAnnotationsにおけるargsの型: Partialq p TArgsは、Metaの型引数のComponentPropy p satisfiesと合わせると、meta.args は以下を満たす„ p ButtonのPropsを指定可能( v p 実際の型は { onClick: Mock } すべて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

Slide 10

Slide 10 text

ジェネリクスによる 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

Slide 11

Slide 11 text

ジェネリクスによる 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

Slide 12

Slide 12 text

Parametersに型補完が効かないんですが...

Slide 13

Slide 13 text

Parametersの型定義補完 '0 Storyで使うTypeScriptの型定義 h Feature Requestが上がっているU h Storybook 9.0でのリリースに向けて動いている...っぽい? ※6: https://github.com/storybookjs/storybook/issues/22860 ※6 ※発表当日のコミュニケーションで何か分かったら資料を更新します。

Slide 14

Slide 14 text

Storybook自体がどのように動くのか Topic 2 トピック 2

Slide 15

Slide 15 text

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 で確認した内容

Slide 16

Slide 16 text

(本当はここまで追いかけたかった)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のプラグイン

Slide 17

Slide 17 text

ありがとうございました!