Next.jsプロジェクトにStorybookを導入する

# 経緯
Next.jsプロジェクトを作ったときにStorybookを導入した手順を備忘録として残しました。

### 参考
https://storybook.js.org/docs/get-started/frameworks/nextjs

https://github.com/storybookjs/storybook

# 環境
windows11
WSL2
yarn 4.3.1
react 18.3.1
TypeScript 5.6.3
Storybook 8.3.6
Next.js 14.2.4
# 手順
### 導入
プロジェクトのルートディレクトリで以下を実行します。
```
yarn dlx storybook@latest init
```
すると/.storybookディレクトリができ、中にmain.tsとpreview.tsファイルができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713431/3af769b9-bca9-6b9f-c43c-d99b76368c9f.png)
.tsxに変えることも可能。今回はpreviewファイルのみ.tsxに変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713431/900088af-6e27-7448-5281-73504bf245b8.png)

### storybookのアドオンをインストールする
アドオンとは、機能を拡張するためのプラグインです。アドオンを利用することで、UIコンポーネントの開発やテストの効率を向上させることができます。



試しに、`addon-actions`を追加します。
`addon-actions`とは、ボタンのクリックなどのアクションが発生した際、引数として受信したデータを表示するアドオンです。

まず以下のコマンドを実行します。↓
```
yarn add -D "@storybook/addon-actions"
```
コマンド実行後、.storybook/main.tsを開いて追加したアドオンをaddons:[]に記載します。最初から記載されているアドオンもあるようです。

```ts:main.ts
import type { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-onboarding",//この辺のデフォルトアドオンは消しても良い
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "@storybook/addon-actions",//このように追加したいアドオンを記載する
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  staticDirs: ["..\\public"],
};
export default config;

```

そしてstorybookを開きます。下のコマンドを打った後に、localhost:6006(他で使用されている場合は6007など)を開きます。
```
yarn storybook
```
Storybookの画面が開きます。
試しに左の一覧から、EXANPLE/Botton/Scondaryをクリックすると、下のような白いボタンが表示されると思います。
また、画面下部のActionsタブを開いてボタンを押すと、Actionsが見れます。
ボタンをクリックすると、クリックアクションを検知してActionsの中にイベントの詳細が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713431/50c22df0-fb14-397f-dd69-f2f98c9f4130.png)

#### 自分が追加した中でおすすめのアドオン
| アドオン名 | 内容 | 公式ドキュメント |
|:-:|:-:|:-:|
|  addon-actions | ユーザーのアクション（イベント）の発生状況を確認する  |https://storybook.js.org/docs/essentials/actions
| addon-controls  | コンポーネントの属性(Props)を操作し、リアルタイムに変化を確認する |https://storybook.js.org/docs/essentials/controls
| addon-docs | コンポーネントの内容を要約したドキュメントを自動生成する |https://storybook.js.org/docs/writing-docs
| addon-viewport | レスポンシブ対応向けに、様々な画面サイズでコンポーネントをプレビューする |https://storybook.js.org/docs/essentials/viewport



↓main.ts内に全て記述すれば、`yarn add [アドオン名]`で一気に追加できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713431/d921590e-858b-2f60-16dc-839d4c65faab.png)
```
 yarn add -D @storybook/addon-essentials @storybook/addon-actions @storybook/addon-controls @storybook/addon-docs @storybook/addon-viewport @storybook/addon-a11y @storybook/addon-storysource @storybook/addon-backgrounds
```

#### 以下のQiitaリンクにわかりやすくまとまっています。参考にしてみてください。

https://qiita.com/kichion/items/93ffe1ba773d26c20ff6


***

### コンポーネントを作成してstorybookに表示してみる

試しにsrc/components/配下に「SampleComponent.tsx」と「SampleComponent.stories.tsx」というファイルを作ってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713431/1eb39770-8f24-cf87-dc79-dcc1e5d78294.png)

`SampleComponent.tsx`はh1タグで文字を表示するコンポーネントです。
```tsx:SampleComponent.tsx
import React from "react";

export const SampleText = () => {
  return <h1>これはStorybookのサンプルです</h1>;
};

```
このコンポーネントをStorybookで表示できるようにするのが`SampleComponent.stories.tsx`です。ファイル名は`.tsx`の前に`.stories`をつけます。
```tsx:SampleComponent.stories.tsx
import { StoryFn } from "@storybook/react";
import React from "react";

import { SampleText } from "./SampleComponent";


const Default = {
  component: SampleText,//ここでimportしたコンポーネント名を指定
  title: "components/SampleText",//Storybook上での階層と名前の設定
  args: {},//コンポーネントに引数がある場合はここで設定
  tags: ["autodocs"],
  parameters: {
    docs: {//Autodocsの表示
      description: {
        component: "これはサンプルテキストのコンポーネントです。",//Autodocsに表示される説明文
      },
    },
  },
};
export default Default;

export const Template: StoryFn<typeof SampleText> = () => <SampleText />;
```

↓こんな感じで表示されます。
![スクリーンショット 2024-12-18 15.59.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713431/58c52ac3-3af9-7b97-1889-eb52b59b30d5.png)

↓左側を拡大した図です。作成したコンポーネントが、`title`で設定した名前で表示されます。「Template」は`SampleComponent.stories.tsx`でexportしたときの名前です。
![スクリーンショット 2024-12-18 15.54.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713431/196411c9-57c7-a7fc-86ed-be7c5ad8e0f9.png)



↓`tags: ["autodocs"]`と記載すれば、Autodocs(自動で生成される簡単な要約)も見れます。
![スクリーンショット 2024-12-18 16.00.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3713431/0246fcde-9054-2947-6ca9-48b895e05987.png)





## まとめ
Storybookは一度導入すると、以降は`.stories.tsx`ファイルを同様に作成していくだけですので非常に簡単です。個人的には、UIの調整が必要な時や引数がどのようにコンポーネントに影響するのかが見たい時に便利だと感じました。フロントエンドの開発が効率的になりますので、ぜひ導入してみてください！