Next.jsとStorybookでUIコンポーネントを試してみましょう。

この記事では、Next.jsとStorybookを組み合わせて、UIコンポーネントの開発と表示を行う方法について説明します。

// components/Button.js

import React from 'react'

const Button = ({ children, onClick, variant }) => {
  const getVariantStyle = () => {
    switch (variant) {
      case 'primary':
        return 'bg-blue-600 text-white'
      case 'secondary':
        return 'bg-gray-600 text-white'
      default:
        return 'bg-gray-300 text-black'
    }
  }

  return (
    <button
      className={`py-2 px-6 rounded-md ${getVariantStyle()}`}
      onClick={onClick}
    >
      {children}
    </button>
  )
}

export default Button

4. ストーリーの作成

storiesディレクトリにButton.stories.jsファイルを作成し、Buttonコンポーネントのストーリーを定義します。

// stories/Button.stories.js

import React from 'react'
import { action } from '@storybook/addon-actions'
import Button from '../components/Button'

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    variant: {
      control: {
        type: 'select',
        options: ['default', 'primary', 'secondary'],
      },
    },
  },
}

const Template = (args) => <Button onClick={action('button-click')} {...args} />

export const Default = Template.bind({})
Default.args = {
  children: 'Default',
  variant: 'default',
}

export const Primary = Template.bind({})
Primary.args = {
  children: 'Primary',
  variant: 'primary',
}

export const Secondary = Template.bind({})
Secondary.args = {
  children: 'Secondary',
  variant: 'secondary',
}

5. Storybookで確認

Storybookを立ち上げて、UIコンポーネントとストーリーを確認します。

npm run storybook

ブラウザでhttp://localhost:6006にアクセスすると、Storybookが表示されます。作成したButtonコンポーネントとそのバリエーションを確認できます。

6. デプロイ

作成したStorybookをデプロイして、他の開発者と共有しましょう。VercelやGitHub Pages、Netlifyなど、好みのプラットフォームを利用してデプロイできます。下記は、gh-pagesパッケージを使用したGitHub Pagesへのデプロイ例です。

まず、gh-pagesパッケージをインストールします。

npm install gh-pages -D

次に、package.jsonにデプロイ用のスクリプトを追加します。

// package.json

{
  "scripts": {
    "deploy-storybook": "storybook-to-ghpages"
  }
}

最後に、デプロイコマンドを実行します。

npm run deploy-storybook

これで、Next.jsとStorybookを利用して、UIコンポーネントの開発と表示を行う方法について学びました。今回作成したButtonコンポーネントは単純な例ですが、より複雑なUIコンポーネントの開発や組み合わせにもStorybookは有効です。Storybookで効率的なコンポーネント開発を楽しみましょう！

AIko Code Symphony

Next.jsとStorybookでUIコンポーネントを試してみましょう。

目次

1. プロジェクトの準備

2. Storybookのインストールとセットアップ

3. UIコンポーネントの作成

4. ストーリーの作成

5. Storybookで確認

6. デプロイ