React(Typescript)で実装したボタン(Button)をStoryBookで検証する方法

「Vite + React (TypeScript) プロジェクト」でStorybookを使ってButtonコンポーネントの動作確認をする流れを、初心者にも分かるようにステップごとに説明します。

🎯 ゴール

１．Vite + React (TypeScript) プロジェクトに Storybook を導入
２．Button コンポーネントの Story（動作サンプル）を作成
３．Storybook 上で見た目やクリック動作を確認

🧩 ステップ1：プロジェクトを作成（まだない場合）

# 新規作成
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

🧩 ステップ2：Storybook をセットアップ

Storybook 公式が Vite をサポートしています。

npx storybook@latest init

しばし時間がかかります。

実行すると自動的に Vite + React + TS 用に設定してくれます。
（確認メッセージが出たら基本的に Yes でOK）

🧩 ステップ3：Storybook を起動して確認

npm run storybook

🧩 ステップ4：Shadcn の Button を Storybook に登録

Storybook のstoryファイルを作成します。
（Shadcn のボタンはsrc/components/ui/button.tsxにある想定）

src/components/ui/button.stories.tsx

import type { Meta,StoryObj } from "@storybook/react";
import { Button } from "./button";
import type { ComponentProps } from "react";

type ButtonProps = ComponentProps<typeof Button>;

const meta:Meta<typeof Button> = {
    title:'UI/Button',
    component:Button,
    args:{
        children:'Click me',
    },
    argTypes:{
        variant:{
            control:{type:'select'},
            options:['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
        },
        size:{
            control:{type:'select'},
            options:['default', 'sm', 'lg', 'icon'],
        },
        onClick:{action:'clicked'},
    },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Default:Story = {
    args:{
        variant:'default',
        size:'default',
    },
};

export const Destructive:Story = {
    args:{
       variant:'destructive',
       children:'Delete', 
    },
};

export const Outline:Story = {
    args:{
        variant:'outline',
        children:'Outline',
    },
};

export const WithClickAction:Story = {
    args:{
        children:'Click Action',
    },
}

🧩ステップ5：Storybook を起動

npm run storybook