# はじめに
Storybookは、Reactやその他のフロントエンドフレームワークで使用されるUIコンポーネントを開発、テスト、文書化するためのツールです。
主な目的は、個々のUIコンポーネントを分離して、それらがどのように見えるか、どのように動作するかを視覚的に確認し、テストすることです。
そうすることで、デザイナーとの連携が取りやすくなったり、アプリケーションを起動しなくてもUIコンポーネントの動作確認ができるようになります。


# インストール
今回は、ReactとTypeScriptを使用するので、Reactのプロジェクトを立ち上げます。
![img](/mosaic-code.jpg)

プロジェクトが立ち上がったら、以下のコマンドでStorybookをインストールします。

![img](/mosaic-code.jpg)
以下のようなファイルが作成されます。
初期では、Button, Header, Pageの3つのストーリーが作成されています。
![スクリーンショット 2024-03-07 22.47.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/c185c9d4-35bb-aa97-585d-d6d3f46635df.png)

# Storybookを起動
Storybookがインストールできたら、Storybookを立ち上げてみます。
![img](/mosaic-code.jpg)

すると、以下のような画面が表示されます。
![スクリーンショット 2024-03-07 22.49.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/01983a4b-1f86-34be-a8f6-ef18ba19e533.png)


初期では「Button」「Header」「Page」の3つのストーリーが自動で作成されています。
今回は、Buttonコンポーネントをインポートして、ストーリーを作っていくので、自動で作成された「Storybook」フォルダは削除します。
![スクリーンショット 2024-03-07 22.51.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/3af33613-fe29-72bf-cccd-7eced5af50c7.png)



# ストーリーを作成しよう

ボタンストーリーを作成するために、まずボタンコンポーネントを作成します。このコンポーネントは、次のようになります。
![img](/mosaic-code.jpg)

このコンポーネントは、label（ボタンのテキスト）、primary（プライマリボタンかどうかを示すブール値）、onClick（クリック時のイベントハンドラー）の3つのプロパティを受け取ります。primary プロパティは省略可能で、省略された場合はデフォルトで false が設定されます。ボタンのスタイルはprimary プロパティの値に応じて変更されます。

次に、ストーリーを作成します。ボタンコンポーネントに関するストーリーをまとめるためのモジュールを components/Button.stories.tsx ファイルに作成します。以下のようになります
![img](/mosaic-code.jpg)
それでは、作成したストーリーを見てみましょう。
npm run storybookコマンドを実行し、Storybookを起動します。
すると、以下のように作成した２つのストーリーが表示されます。

![スクリーンショット 2024-03-07 22.58.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/f5b372d9-d4dc-8e64-aaec-8a48ed6233eb.png)

![スクリーンショット 2024-03-07 22.57.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/8b62bdb2-d7f3-f3f3-e87d-d5ebbfed1ef8.png)



# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

# はじめに
Storybookは、Reactやその他のフロントエンドフレームワークで使用されるUIコンポーネントを開発、テスト、文書化するためのツールです。
主な目的は、個々のUIコンポーネントを分離して、それらがどのように見えるか、どのように動作するかを視覚的に確認し、テストすることです。
そうすることで、デザイナーとの連携が取りやすくなったり、アプリケーションを起動しなくてもUIコンポーネントの動作確認ができるようになります。


# インストール
今回は、ReactとTypeScriptを使用するので、Reactのプロジェクトを立ち上げます。
```
npx create-react-app study-storybook --template typescript
```

プロジェクトが立ち上がったら、以下のコマンドでStorybookをインストールします。

```
npx storybook init
```
以下のようなファイルが作成されます。
初期では、Button, Header, Pageの3つのストーリーが作成されています。
![スクリーンショット 2024-03-07 22.47.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/c185c9d4-35bb-aa97-585d-d6d3f46635df.png)

# Storybookを起動
Storybookがインストールできたら、Storybookを立ち上げてみます。
```
 npm run storybook
```

すると、以下のような画面が表示されます。
![スクリーンショット 2024-03-07 22.49.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/01983a4b-1f86-34be-a8f6-ef18ba19e533.png)


初期では「Button」「Header」「Page」の3つのストーリーが自動で作成されています。
今回は、Buttonコンポーネントをインポートして、ストーリーを作っていくので、自動で作成された「Storybook」フォルダは削除します。
![スクリーンショット 2024-03-07 22.51.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/3af33613-fe29-72bf-cccd-7eced5af50c7.png)



# ストーリーを作成しよう

ボタンストーリーを作成するために、まずボタンコンポーネントを作成します。このコンポーネントは、次のようになります。
```components/Button.tsx
import { FC } from "react";

interface ButtonProps {
  label: string;
  primary?: boolean;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, primary, onClick }) => {
  const buttonStyle = primary
    ? { backgroundColor: "red", color: "white" }
    : { backgroundColor: "white", color: "red" };
  return (
    <button style={buttonStyle} onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;
```

このコンポーネントは、label（ボタンのテキスト）、primary（プライマリボタンかどうかを示すブール値）、onClick（クリック時のイベントハンドラー）の3つのプロパティを受け取ります。primary プロパティは省略可能で、省略された場合はデフォルトで false が設定されます。ボタンのスタイルはprimary プロパティの値に応じて変更されます。

次に、ストーリーを作成します。ボタンコンポーネントに関するストーリーをまとめるためのモジュールを components/Button.stories.tsx ファイルに作成します。以下のようになります
```components/Button.stories.tsx
import Button from "./Button";
import type { Meta, StoryObj } from "@storybook/react";

// ストーリーのメタ情報を定義します。
const meta = {
  title: "Button", // ストーリーのタイトル
  component: Button, // ストーリーで使用するコンポーネント
} as Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof Button>;

// Primary ボタンのストーリーを定義します。
export const Primary: Story = {
  args: {
    label: "Primaryボタン",
    primary: true,
  },
};

// Normal ボタンのストーリーを定義します。
export const Normal: Story = {
  args: {
    label: "Normalボタン",
    primary: false,
  },
};
```
それでは、作成したストーリーを見てみましょう。
npm run storybookコマンドを実行し、Storybookを起動します。
すると、以下のように作成した２つのストーリーが表示されます。

![スクリーンショット 2024-03-07 22.58.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/f5b372d9-d4dc-8e64-aaec-8a48ed6233eb.png)

![スクリーンショット 2024-03-07 22.57.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/8b62bdb2-d7f3-f3f3-e87d-d5ebbfed1ef8.png)



# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

続きを読むには単価診断を受けてください 30秒