Storybook とは？

ボタン1つ確認するのに、アプリ全体を起動してログインして特定のページまで移動して…って大変でしょ？Storybookならコンポーネントだけを取り出して表示できるから、エラー表示や読み込み中のような、アプリ上では再現しにくい状態も確かめやすいんだ

Button.tsxの横にButton.stories.tsxのようなファイルを作るよ。デフォルトエクスポートにコンポーネントの情報を書いて、名前付きエクスポートの1つひとつがストーリーになる。PrimaryやDisabledのように状態ごとに用意して、argsで渡す値を決めるんだ

使えるよ。書いたストーリーを土台に、クリックなどの操作を確かめるインタラクションテスト、アクセシビリティのチェック、見た目の変化を比べるビジュアルテストができるんだ。ビジュアルテストのクラウドサービスとしては、Storybookをメンテナンスしている会社のChromaticがあるよ

デザインシステムのコンポーネントを一覧できるカタログとしてよく使われるよ。使い方の説明もドキュメントとして一緒に書けるから、デザイナーやほかの開発者が「このボタンはこう使う」を確認しやすくなるんだ

新しく入れるだけなら、npm create storybook@latest のコマンドで初期設定ができるよ。ただ既存のアプリだと、コンポーネントがAPI呼び出しやグローバルな状態に依存していて、単体で表示するためにモックを用意する作業が必要になることがあるんだ。最初は依存の少ない部品から始めるといいね