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

経緯

Next.jsプロジェクトを作ったときに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ファイルができます。

.tsxに変えることも可能。今回はpreviewファイルのみ.tsxに変更。

storybookのアドオンをインストールする

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

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

まず以下のコマンドを実行します。↓

yarn add -D "@storybook/addon-actions"

コマンド実行後、.storybook/main.tsを開いて追加したアドオンをaddons:[]に記載します。最初から記載されているアドオンもあるようです。

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の中にイベントの詳細が表示されます。

自分が追加した中でおすすめのアドオン

アドオン名	内容	公式ドキュメント
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 [アドオン名]で一気に追加できます。

 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リンクにわかりやすくまとまっています。参考にしてみてください。

---

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

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

SampleComponent.tsxはh1タグで文字を表示するコンポーネントです。

SampleComponent.tsx

import React from "react";

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

このコンポーネントをStorybookで表示できるようにするのがSampleComponent.stories.tsxです。ファイル名は.tsxの前に.storiesをつけます。

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 />;

↓こんな感じで表示されます。

↓左側を拡大した図です。作成したコンポーネントが、titleで設定した名前で表示されます。「Template」はSampleComponent.stories.tsxでexportしたときの名前です。

↓tags: ["autodocs"]と記載すれば、Autodocs(自動で生成される簡単な要約)も見れます。

まとめ

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