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

この記事の構成

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

StoryBookとは

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

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

参考動画

どんなメリットがあるのか？

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;

上の記述以外は消します。

これで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

でサーバーを確認します。

これで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

こんな感じで出てきます。

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

カタログの作成

ここでは、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を載せておきます。

StoryBook導入(既存アプリ)

もうすでにプロジェクトが立ち上がっている場合は以下のコマンドを使用します。

npx storybook@latest init

Udemy

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

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

有益資料

その他資料