【Next.js】Storybookを導入してTailwind CSSで作成した画面を確認する

はじめに

前回の記事

前回作成したカウントアップのアプリをもとに開発していこうと思います。
今回は以下を目標としたいと思います。

1. Storybookをインストールする。
2. 自分で作成した画面をStorybookで見る。
3. StorybookにTailwind CSSを適応する。

1. Storybookを入れる

以下コマンドでStorybookをインストールします。

npx storybook init

インストールが終わったら以下のコマンドで起動させます。

npm run storybook

そうするとブラウザが立ち上がりStorybookの画面が表示されます。

2. カウントアップの画面をStorybookで見る

さっそく、前回作成したカウントアップの画面をStorybookで見れるようにしていきましょう。

まずは、views/ChannelView/index.tsxと同じ階層にindex.stories.tsxを用意します。

index.stories.tsx

import { Meta, StoryObj } from '@storybook/react'
import { CountView } from '.'

const meta: Meta<typeof CountView> = {
  title: 'views/CountView',
  component: CountView,
  tags: ['autodocs'],
}
export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
  },
  render: function Render() {
    return <CountView />
  },
}

次に立ち上げているstorybookでこの画面を見てみましょう。

storybookの画面に戻ると、新しくVIEWSというものができているはずです。

VIEWSを開き、CountView>Defauktを開いてみると作成したカウントアップの画面が見えていると思います。

しかし、前回作成したTailwind CSSがかかっていないので、次はTailwind CSSをStorybookに適応させていきましょう。

3. StorybookにTailwind CSSを適応する

StorybookにTailwind CSSを適応するのはとても簡単です。

Storybookをインストールしたときにsrcと同じ階層に.storybookというフォルダができていると思います。

その中にあるpreview.tsファイルの中でTailwind CSSを読み込ませるだけです。

具体的には以下のように修正します。

preview.ts

import type { Preview } from '@storybook/react';
import "../src/styles/globals.css";
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
       color: /(background|color)$/i,
       date: /Date$/i,
      },
    },
  },
};

export default preview;

この状態でStorybookを立ち上げると、前回作成したようにボタンが赤くなるのが確認できます。

これでStorybookにTailwind CSSを適応することができました。

さいごに、使わないsrc/storysはフォルダごと削除してしまいましょう。

おわりに

もし、もっといいやり方があるや、間違っている部分があるといったご意見をいただければ幸いです。

今後はStorybookを用いてテストコードを書いていきたいと思っております。

最後までお読みいただきありがとうございました。

参考文献

次の記事