フロントエンジニアなら知らないとヤバイ‼︎StoryBookの導入(Next.js)

# この記事の構成
前半で新規でアプリを作成してStoryBookを導入します。
後半では、既存のアプリに導入した時のやり方を紹介します。

# StoryBookとは
***UIのカタログ***です。UIをブラウザ上でカタログ化して、ブラウザで可視化できるものです。


以下のサイトからどんな感じか確認してください。

https://storybook.polaris.shopify.com/?path=/story/playground--details-page

# 参考動画

https://www.youtube.com/watch?v=D52gjW9T3YM

# どんなメリットがあるのか？
Webエンジニア(フロントエンジニア)とWebデザイナー同士で、フロント部分の開発をする際に、お互いに、コンポーネントなどで相違がないかを確認し、共有できます。

StoryBookのおかげで、デザイナーとフロントエンジニアとのコミュニケーションコストを抑えることができ、デザインと実装の間での反復がスムーズになり、プロジェクト全体の効率が向上します。

- 視覚的な共有
- デザインの統一
- ドキュメントの機能
- コンポーネントの再利用性

など

### StoryBookはNext.js以外でも導入可能
今回の記事はNext.jsでやりますが、Vue.js、Nuxt.js、Reactなどでも利用は可能です。

# StoryBook導入(新規)
今回は***Next.jsでStoryBookを導入します。この後既存アプリで実装したのを紹介***します。

まずはNext.jsで導入します。Next.jsで新規作成をし、TailWindCSSを入れます。
- Next.js
```
npx create-next-app story-book
```
- TailwindCSS
```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```


```tailwind.config.js
content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
```

```stylesglobals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
上の記述以外は消します。

https://tailwindcss.com/docs/guides/nextjs


これでTailwindCSSが導入されました。

確認で以下のディレクトリを変更して確認します。

```pages/index.tsx
import Image from "next/image";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  return (
    <h1 className="text-5xl text-blue-600">StoryBookをやるぞー</h1>
  );
}
```
```
npm run dev
```
でサーバーを確認します。

![スクリーンショット 2024-07-21 2.34.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/9ac41ef6-4098-5e48-edfa-8b4a3a782412.png)

これでTailWindCSSの導入が確認できました。


# StoryBook導入
StoryBookの導入をしていきます。
```
npx story init
```

すると以下の変更がありました。story_bookのディレクトリが作成されます。

```.story_book/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",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  staticDirs: ["../public"],
};
export default config;
```

```preview.ts
import type { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;
```

```package.json
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006", #追記
    "build-storybook": "storybook build" #追記
  },
```

これ以外のも```src/storiesディレクトリ```が作成されていたりします。
他にも***package-lock.json***、***.gitignore***、***.eslintrc.json***も新しく変更されています。


### StoryBook起動
以下のコマンドを実行します。
```
npm run storybook
```
こんな感じで出てきます。

![スクリーンショット 2024-07-24 13.11.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/19ce6e6d-71c8-9eb5-4e59-b8f89e177663.png)

実際に触りながらソースコードと見比べて見てください。


# カタログの作成
ここでは、Circleを作成します。
storiesディレクトリに以下のファイルを作成します。
```stories/Circle.tsx
import React from 'react'

const Circle = () => {
    return <div className='bg-orange-500 w-14 h-14 p-2 rounded-full'></div>
}

export default Circle
```


```src/stories/Circle.stories.ts
import { Meta } from "@storybook/react";
import Circle from "./Circle";

const meta: Meta<typeof Circle> = {
    component: Circle,
    title:"Circle",
};

export default meta;

export const BaseCircle = {};
```
- 注意
globals.cssのインポートも忘れずに‼︎


# 続き
導入の記事なので、続きは上記の参考動画でお願いします。
個人でも学習したのでGitHubを載せておきます。

https://github.com/Hashimoto-Noriaki/next-Storybook

# StoryBook導入(既存アプリ)
もうすでにプロジェクトが立ち上がっている場合は以下のコマンドを使用します。
```
npx storybook@latest init
```



# Udemy
この参考動画の方はUdemyの講師の方なので、StoryBookの詳細もあります。
よかったら購入してみてください。

https://www.udemy.com/course/storybook-tutorial-with-react/?couponCode=ST3MT72524

Udemyで常に値段がお得に学べるURLがYoutubeの概要欄にあったので、
そちらも確認してみてください。
この方は、学習のコミュニティも運営されているみたいです‼︎

# 有益資料

https://storybook.js.org/addons

https://zenn.dev/moneyforward/articles/2d7f3ece1a1b93


# その他資料

https://storybook.js.org/tutorials/intro-to-storybook/react/ja/get-started/

https://zenn.dev/fullyou/articles/853b77a3ce9144

https://qiita.com/naka_maria/items/368b02c3df178d4e0472