Storybookとは？UIコンポーネントのためのワークショップ

Storybookは、完全なアプリケーションの外で、UIコンポーネントを分離した状態で構築・表示・ドキュメント化するための開発環境です。

完全なアプリの中でコンポーネントに取り組むのは扱いにくいものです。正しい画面まで移動し、正しい状態を用意しなければなりません。Storybookは各コンポーネントを、あらゆる状態で、専用のワークショップの中で単体で開発できるようにします。さらに生きたドキュメントとしても、UIの自動テストの基盤としても機能し、そのどちらもCIの中で実行されます。

storyとは何か

storyはコードで定義された、コンポーネントの単一のレンダリング状態です。1つのコンポーネントはdefault、loading、error、disabledなど多くのstoryを持てます。Storybookはそれらを一覧表示するので、状態を瞬時に切り替えられます。

分離が役立つ理由

アプリでは到達しにくいエッジケースの状態を開発できる。
コンポーネントの見た目や振る舞いをドキュメント化できる。
デザイナーやレビュアーに閲覧可能なコンポーネントカタログを提供できる。

テスト対象としてのStorybook

storyは決定論的なレンダリング状態であるため、ビジュアルリグレッションテストやインタラクションテストの入力として最適です。ツールが各storyをスナップショット化してピクセルの差分を指摘し、Storybookをテストのハーネスへと変えます。

静的でデプロイ可能なビルド

Storybookは静的サイトとしてビルドできるため、コンポーネントカタログをホスティングしてチーム全体と共有できます。その静的なビルドは、pipelineがデプロイできる単なるファイルの集まりに過ぎません。

CI/CDにおけるStorybook

CIは静的なStorybookをビルドし、storyに対してインタラクションテストとビジュアルリグレッションテストを実行し、多くの場合カタログをpull requestごとのプレビューとしてデプロイします。これによりStorybookはpipelineの中で品質ゲートであると同時にレビューの助けにもなります。

重要なポイント

StorybookはUIコンポーネントをstoryとして分離した状態で開発・ドキュメント化します。
storyは決定論的な状態であり、ビジュアルテストやインタラクションテストに最適です。
CIはStorybookをビルド・テストし、多くの場合PRごとのプレビューとしてデプロイします。