[Storybook][React][TypeScript] Storybookの導入手順

# 実施条件
* macOS（本記事では macOS Sequoia 15.4 を使用）
* Node.js
* npm または yarn
* [React プロジェクトがすでに作成済みであること](https://qiita.com/Jochun/items/b88fc7006bacc43cc6f0)
* 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. プロジェクトの準備
```bash
# 任意のReact + TypeScriptプロジェクトを作成（未作成の場合）
npx create-react-app react-storybook-poc

cd react-storybook-poc
```
or
```bash
# 任意の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 の初期化
```bash
# Storybookを初期化（必要な依存を自動インストール）
npx storybook@latest init

# What configuration should we install?
# に答える
```

- 下記コマンドが流れ、storybookが起動する
    ```bash
    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を終了する
    ```bash
    Ctrl + C
    ```

## 3. （2.で起動しなかった場合）Storybook 起動確認

```bash
npm run storybook
```

# 導入手順B: テンプレートを使用する
## 1. プロジェクトの準備
```bash
# 任意のReact + TypeScriptプロジェクトを作成（未作成の場合）
npx degit chromaui/intro-storybook-react-template  react-storybook-poc

cd react-storybook-poc
```

## 2. Storybookが立ち上がらない場合
### 依存パッケージがうまくインストールできていない場合
- エラーに出てくるパッケージをインストールする
    ```bash
    npm install --save-dev @storybook/react @storybook/cli
    ```
## 3. Storybook 起動確認

```bash
npm run storybook
```


# localhostで確認したい場合
## 1. ビルドする（ビルド成果物（`dist/` or `.next/`ファイル群）を作成する）
```bash
npm run build
```

## 2. アプリを起動する
```bash
npm run dev
```
起動後、`http://localhost:3000`にアクセスしてWebアプリUIを確認します。

## 3. storybookを停止し、コマンドモードに戻す
```bash
Ctrl + C
```

# TypeScript対応の確認

`.storybook/main.ts` が作成されているはずです。以下のような形式になっていればOKです。

```ts
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` があると仮定した例：

```tsx
// src/components/Button.tsx
import React from "react";

type Props = {
  label: string;
};

export const Button: React.FC<Props> = ({ label }) => {
  return <button>{label}</button>;
};
```

```tsx
// 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. 新しいブランチを作成

```bash
git checkout -b feature/add-storybook
```

## 2. Storybook 関連ファイルをコミット

```bash
git add .
git commit -m "Install and configure Storybook with example story"
```

## 3. GitHub へプッシュ

```bash
git push origin feature/add-storybook
```

## 4. GitHub 上で PR（Pull Request）を作成

* GitHub リポジトリにアクセス
* `feature/add-storybook` ブランチから `main` または `develop` に向けたPRを作成
* タイトル例: `Add Storybook for UI development`
* レビュー依頼を行い、マージを待つ


# 補足

* Storybook のビルド用コマンドは以下です：

```bash
npm run build-storybook
```

* これにより、`storybook-static/` ディレクトリが生成され、静的サイトとしてデプロイ可能です（例：GitHub Pages, Vercel, Netlify）


# 参考リンク

* [Intro to Storybook（公式）](https://storybook.js.org/tutorials/intro-to-storybook/react/ja/simple-component/)
* [STMN Tech Blog: Storybook導入記](https://tech.stmn.co.jp/entry/2021/05/17/155842)
* [Impl Blog: Storybook構築](https://ramble.impl.co.jp/3008/#toc4)
* []()