Storybook は、UIコンポーネントの開発、テスト、ドキュメント作成を効率化するための強力なツールです。特に、React、Vue、Angularなどのコンポーネントベースのフレームワークで使用され、コンポーネントの分離開発やビジュアルテストに最適です。
本記事では、Storybookの基本的な使い方 をステップバイステップで解説します。
[目次を開く]
1. Storybookとは?
Storybook とは、UIコンポーネントを「ストーリー(story)」として独立して管理し、実装や動作をブラウザ上で確認できるツールです。コンポーネントの再利用性を高め、デザインシステムの管理を容易にします。
Storybookの主な特徴
- コンポーネントの分離開発が可能(アプリから切り離してUI単位で作業)
- 直感的なUIカタログを自動生成
- コンポーネントごとのドキュメント作成が容易
- 動作確認やビジュアルテストが簡単にできる
2. Storybookのインストール
まず、Storybookをプロジェクトに導入する方法を説明します。
必要な環境
- Node.js(公式サイトからインストール)
- npm または yarn
Step 1: プロジェクトの準備
ReactやVueなどのフレームワークでプロジェクトを作成していない場合、以下のコマンドで新規作成します。
npx create-react-app my-app
cd my-app
または、Next.jsプロジェクトなら以下のように作成します。
npx create-next-app my-app
cd my-app
Step 2: Storybookのインストール
プロジェクトディレクトリに移動し、以下のコマンドを実行してStorybookをセットアップします。
npx storybook@latest init
このコマンドにより、プロジェクトに必要なファイルが自動生成されます。
成功すると、以下のようなメッセージが表示されます:

Step 3: Storybookの起動
インストールが完了したら、次のコマンドでStorybookを起動できます。
npm run storybook
ブラウザで http://localhost:6006
を開くと、StorybookのUIが表示されます。

3. Storybookの基本的な使い方
① ストーリーの作成
Storybookでは、各コンポーネントを「ストーリー」として記述します。src/stories
フォルダにコンポーネントごとの.stories.js
または.stories.tsx
ファイルを作成します。
例:Buttonコンポーネントのストーリー(Button.stories.js
)
import React from 'react';
import Button from '../components/Button';
// Storybookのメタデータ
export default {
title: 'Example/Button',
component: Button,
};
// 各バリエーションをストーリーとして定義
export const Primary = () => <Button primary label="Primary Button" />;
export const Secondary = () => <Button label="Secondary Button" />;
export const Disabled = () => <Button disabled label="Disabled Button" />;
② Storybookのアドオン活用
Storybookにはさまざまなアドオンがあり、UI開発を強力にサポートします。
便利なアドオン例
アドオン名 | 機能 |
@storybook/addon-essentials | 基本的なコントロール、ドキュメント、背景色設定など |
@storybook/addon-interactions | ユーザーインタラクションのシミュレーション |
@storybook/addon-actions | イベントハンドラーの確認 |
@storybook/addon-a11y | アクセシビリティチェック |
アドオンの追加方法(例:a11yアドオン)
npm install @storybook/addon-a11y --save-dev
次に、storybook/main.js
にアドオンを追加します。
module.exports = {
addons: ['@storybook/addon-a11y'],
};
③ コンポーネントのプロパティ管理(Args)
Storybookでは、コンポーネントのプロパティ(Props)を「Args」として制御できます。これにより、UIのリアルタイムプレビューが可能になります。
import React from 'react';
import Button from '../components/Button';
export default {
title: 'Example/Button',
component: Button,
argTypes: {
label: { control: 'text' },
primary: { control: 'boolean' },
},
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Primary Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
primary: false,
label: 'Secondary Button',
};
StorybookのUI上で、プロパティを変更して動的にコンポーネントを確認できます。
4. Storybookのデプロイ方法
作成したStorybookをGitHub PagesやVercelなどのサービスで公開することができます。
① Storybookのビルド
静的ファイルとしてエクスポートするには、以下のコマンドを実行します。
npm run build-storybook
生成された storybook-static
フォルダを任意のホスティングサービスにアップロードします。
② GitHub Pagesにデプロイ(gh-pagesを使用)
npm install gh-pages --save-dev
package.json
に以下のスクリプトを追加します。
"scripts": {
"deploy-storybook": "gh-pages -d storybook-static"
}
以下のコマンドでデプロイを実行します。
npm run deploy-storybook
まとめ
Storybookを活用することで、UIコンポーネントの管理・テストが容易になり、チーム開発の生産性が向上します。
この記事のまとめ
- Storybookのインストール方法(
npx storybook@latest init
) - ストーリーの作成方法(
Button.stories.js
の作成) - アドオンの活用(
@storybook/addon-a11y
など) - ビルド&デプロイ方法(GitHub Pagesなど)
Storybookを導入して、効率的なUIコンポーネント開発を始めましょう!