storybookjs/storybook

これは何？

主な機能

• 01React、Vue、Angular、Svelteなど、さまざまなフレームワークのコンポーネントを分離してレンダリングします。
• 02アクセシビリティテスト、ビューポートの切り替え、レイアウトの確認に使えるアドオンを提供します。
• 03Storyからコンポーネントのドキュメントを生成します。
• 04Story内でのインタラクションテストに対応しています。
• 05プラグインAPIを通じて、カスタムアドオンで拡張できます。

ユースケース

• アプリケーション全体を起動せずに、デザインシステムのコンポーネントを開発・レビューする。
• デザイナーや開発者向けに、UIコンポーネントのバリエーションをドキュメント化する。
• ローディング、エラー、空の状態など、コンポーネントの状態をテストする。
• 開発中にコンポーネントのアクセシビリティを確認する。

クイックスタート

1. 1

   READMEにインストールコマンドが記載されていないため、Storybookのウェブサイトにアクセスして始めましょう

2. 2

   storybook.newを使って、StackBlitzでサンプルプロジェクトを作成しましょう

トピック

よくある質問

storybook とは？

React、Vue、Angular、Svelteなどに対応し、UIコンポーネントを分離して構築・ドキュメント化・テストできるフロントエンド向けワークショップ。 Storybookは、開発者がメインアプリケーションの外でUIコンポーネントやページを構築するためのフロントエンド向けワークショップです。各コンポーネントはサンドボックス化されたビューで個別にレンダリングされるため、アプリ全体を起動したり、手作業で特定の状態にしたりせずに、開発、レビュー、ドキュメント化できます。

storybook は無料で使えますか？ライセンスは？

storybook は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

storybook は今もメンテナンスされていますか？

活発にメンテナンス中。storybook の最終コミットは 2026年10月21日 です。

storybook は何に使えますか？

アプリケーション全体を起動せずに、デザインシステムのコンポーネントを開発・レビューする。 デザイナーや開発者向けに、UIコンポーネントのバリエーションをドキュメント化する。 ローディング、エラー、空の状態など、コンポーネントの状態をテストする。 開発中にコンポーネントのアクセシビリティを確認する。

storybook のインストール方法は？

READMEにインストールコマンドが記載されていないため、Storybookのウェブサイトにアクセスして始めましょう storybook.newを使って、StackBlitzでサンプルプロジェクトを作成しましょう

storybook はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/storybookjs/storybook