実施条件
- macOS（本記事では macOS Sequoia 15.4 を使用）
- Node.js
- npm または yarn
- React プロジェクトがすでに作成済みであること
- GitHubにpush可能な状態であること
環境
| ツール | バージョン |
|---|---|
| Node.js | 22.5.1 |
| npm | 10.8.2 |
| React | 19.1.0 |
| TypeScript | 5.x.x |
| Storybook | 最新安定版（9.0 時点） |
概要
- macOS環境において、React + TypeScriptプロジェクトにStorybookを導入する手順を記載
導入手順A: プロジェクトから作成する
1. プロジェクトの準備
# 任意のReact + TypeScriptプロジェクトを作成（未作成の場合）
npx create-react-app react-storybook-poc
cd react-storybook-poc
or
# 任意のNextプロジェクトを作成（未作成の場合）
npx create-next-app react-storybook-poc
# ✔ Would you like to use TypeScript with this project? … No / Yes
# ✔ Would you like to use ESLint with this project? … No / Yes
# ✔ Would you like to use Tailwind CSS with this project? … No / Yes
# に答える
cd react-storybook-poc
2. Storybook の初期化
# Storybookを初期化（必要な依存を自動インストール）
npx storybook@latest init
# What configuration should we install?
# に答える
-
下記コマンドが流れ、storybookが起動する
Running Storybook > poc-v7@0.1.0 storybook > storybook dev -p 6006 --quiet storybook v9.0.12 info => Serving static files from ././public at / info => Loading Webpack configuration from `node_modules/react-scripts` info => Removing existing JavaScript and TypeScript rules. info => Modifying Create React App rules. info Addon-docs: using MDX3 info => Using default Webpack5 setup <i> [webpack-dev-middleware] wait until bundle finished -
インストール完了後、以下のディレクトリが追加されます
.storybook/ src/stories/ -
storybookの起動、
.storybook/のインストールが確認できたら、storybookを終了するCtrl + C
3. Storybook 起動確認
npm run storybook
導入手順B: テンプレートを使用する
1. プロジェクトの準備
# 任意のReact + TypeScriptプロジェクトを作成（未作成の場合）
npx degit chromaui/intro-storybook-react-template react-storybook-poc
cd react-storybook-poc
2. Storybook 起動確認
npm run storybook
Storybookが立ち上がらない場合
- エラーに出てくるパッケージをインストールする（依存パッケージがうまくインストールできていない可能性があるため）
npm install --save-dev @storybook/react @storybook/cli
localhostで起動する
1. ビルドする
ビルド成果物（dist/ or .next/ファイル群）を作成する
npm run build
2. アプリを起動する
npm run dev
起動後、http://localhost:3000にアクセスしてWebアプリUIを確認します。
3. storybookを終了する
終了（コマンドモードに戻す）
Ctrl + C
TypeScript対応の確認
.storybook/main.ts が作成されているはずです。以下のような形式になっていればOKです。
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
framework: {
name: "@storybook/react-vite",
options: {},
},
};
export default config;
コンポーネントのStory作成
src/components/Button.tsx があると仮定した例：
// src/components/Button.tsx
import React from "react";
type Props = {
label: string;
};
export const Button: React.FC<Props> = ({ label }) => {
return <button>{label}</button>;
};
// src/components/Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";
const meta: Meta<typeof Button> = {
title: "Components/Button",
component: Button,
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Default: Story = {
args: {
label: "クリック",
},
};
GitHub へプルリクエストする
1. 新しいブランチを作成
git checkout -b feature/add-storybook
2. Storybook 関連ファイルをコミット
git add .
git commit -m "Install and configure Storybook with example story"
3. GitHub へプッシュ
git push origin feature/add-storybook
4. GitHub 上で PR（Pull Request）を作成
- GitHub リポジトリにアクセス
-
feature/add-storybookブランチからmainまたはdevelopに向けたPRを作成 - タイトル例:
Add Storybook for UI development - レビュー依頼を行い、マージを待つ