先生と生徒の会話形式で理解しよう

生徒

「ReactでUIを作っているんですが、Storybookってよく聞きます。何に使うんですか？」

先生

「StorybookはReactのコンポーネントをカタログのように一覧で確認できるツールなんです。まるで見本帳のようにUIを確認しながら開発できますよ。」

生徒

「見本帳みたいに？じゃあ、ボタンや入力フォームを一覧で確認できるってことですか？」

先生

「その通りです。しかもコンポーネントごとに状態を切り替えて試せるので、UI開発がとても効率的になります。」

1. Storybookとは何か？

Storybook（ストーリーブック）は、Reactのコンポーネントを「独立したパーツ」として開発・確認できる便利なツールです。通常はReactアプリ全体を起動してUIを確認しますが、Storybookを使うと「ボタンだけ」「入力フォームだけ」といった部品を単独で動かして見られるようになります。

初心者にわかりやすく例えると、家全体を建てなくても、まずドアや窓だけを確認できる仕組みです。これによって「UIの再利用性」「見た目のチェック」「デザインとコードの分離」がスムーズになります。

2. ReactプロジェクトにStorybookを導入する手順

ReactとStorybookを組み合わせる基本的な流れは以下の通りです。

Reactプロジェクトを作成する（例：npx create-react-app my-app）
Storybookをインストールする（公式CLIを使うと自動設定されます）
Storybookを起動してコンポーネントを登録する

具体的なインストールコマンドは次の通りです。


npx storybook@latest init

このコマンドを実行すると、自動的に必要な設定ファイルが追加され、Storybookを利用できる状態になります。

3. Storybookの起動方法

インストール後、次のコマンドでStorybookを起動できます。


npm run storybook

（ブラウザで http://localhost:6006 が開き、Storybookの画面が表示されます）

左側にコンポーネントの一覧が表示され、選択すると右側にプレビューが出てきます。これでUIをひとつずつ確認しながら開発できるようになります。

4. Storyファイルの作り方

Storybookでは、コンポーネントを表示するために「Storyファイル」を作ります。例えば、ボタンコンポーネントを登録するには次のように書きます。


import React from "react";
import { Button } from "./Button";

export default {
  title: "Example/Button",
  component: Button,
};

export const Primary = () => <Button label="プライマリーボタン" />;
export const Secondary = () => <Button label="セカンダリーボタン" />;

このように書くと、Storybook上に「Example/Button」というカテゴリーが追加され、PrimaryやSecondaryの状態を切り替えて確認できます。