Storybook とは？

ボタン1つ確認するためにアプリ全体を起動してログインして特定のページに遷移して…って大変でしょ？Storybookならコンポーネント単体を独立した環境で表示できるから、開発効率が格段に上がる。デザインの確認、エッジケースのテスト、プロパティの動作確認がボタン一つでできるんだよ

コンポーネントファイルの横にButton.stories.tsxのようなファイルを作る。各exportがStoryになるよ。Default、Primary、Disabled、Loading…のように状態ごとにStoryを定義する。argsを使えばUI上でプロパティをインタラクティブに変更できるControls機能も使えるんだ

Storybookはデザインシステムの構築・運用に最適なツールだよ。全コンポーネントのカタログとして機能して、デザイナーが「このコンポーネントはこう使う」というドキュメントも書ける。Chromatic（Storybook開発元のサービス）を使えばビジュアルリグレッションテスト（UIの見た目の変化を検出）も自動化できるよ

初期設定はnpx storybook initで自動化されるから簡単。ただし既存プロジェクトに後から導入すると、コンポーネントの依存関係（API呼び出し、グローバルステート）をモック化する作業が必要で、これが大変なこともある。新規プロジェクトなら最初から導入した方がコストは低いよ