Storybookを使ったコンポーネント管理

StorybookはUIコンポーネント開発向けの支援ツールです。
コンポーネントのカタログを構築できます。

Storybookを使用することで独立した環境でUIコンポーネントの見た目や振る舞いを確認でき、コンポーネントの管理がしやすくなります。

Storybookのインストール

Storybookは環境構築用のコマンド、npx sb initを実行することで自動的に必要なパッケージをインストールして環境を構築します。
Storybookを起動するためのスクリプトも自動でpackage.jsonに追加され、npm run storybookで起動します。

Storybookは2カラム構成になっており、左のツリーから要素を選択すると右側にコンポーネントが表示されます。この選択した1つの要素はStoryと呼ばれ、Story単位で描画されます。