記事に書いてあること

既存の React プロジェクトに Storybook を導入する方法
コンポーネントを、Storybook に表示させるための最低限の設定
Tailwind CSS を Storybook で使用する方法

開発環境

以下、事前にインストール、セットアップしてあるものです。

Vite
Tailwind CSS
React
JavaScript

Storybookとは？

簡単に言うと、見た目に特化したコンポーネントの開発、確認ができます。

React だったら、コンポーネントに分けて開発を行なっていくと思うのですが、それらをカタログのように確認できる楽しく、便利なツールです。

渡された値に応じた見た目の変化を確認できるので、複雑なコンポーネントの開発に便利です。

▼ お天気アプリを作っていて、天気の種類によって表示を変えたかったので、Storybookを用いて効率的に開発を行いました！

目標物

ここからは Storybook を使う方法を学ぶために、最低限必要なファイルや記述について紹介します。

シンプルですが、props で受け取った値を用いて、テキストを表示させたり、背景色が変わるコンポーネントの作成をします。そして、Storybook で複数のパターンを表示させるところまでやっていきます。

では、次のセクションからドキュメントを確認しながらインストール、設定、記述を行っていきます。

Storybookのインストール

Docs: Docs | Storybook

React と Vite を利用しているので、上記のドキュメントを確認しつつ導入します。

In a project without Storybook

Storybookをまだ導入していないプロジェクトへのインストールなので、こちらのコマンドを実行

npx storybook@latest init

そうすると、以下のように Storybook がインストールされ、コンポーネントを確認できるページが立ち上がります。

▼ 開かれた画面

そして、.storybook、src/stories がディレクトリに追加されます。

▼ 緑色の部分

.storybook は設定ファイルで、src/stories はサンプルです。

Storybook の確認（飛ばしてOK）

先ほどのこちらの画面ですが、src/stories の中身が、左サイドバーに反映されています。

Example の Button を確認してみます。

ボタンのコンポーネントが表示されて、その下に、設定できる props が表示されています。

その下に STORIES とあって、そこを確認すると、Primary、Secondary、Large、Small...とあり、コンポーネントが微妙に違うのがわかります。

このように、Button というコンポーネントがあって、props に応じて見た目を変えたものを作成、一覧で表示・確認ができます。

そしてこれらのボタンはなんと1クリックでコンポーネントをコピーし、プロジェクトに反映させることができます。便利ですね。

▼ コンポーネントのコードをコピーできる...！

必要最低限のファイルを作成する

では、コンポーネントを作成し、Storybook で表示させるための最低限のファイルを用意していきます。

まず、src/myStories ディレクトリを作成します。

その中に Text.jsx、Text.stories.jsというファイルを作成します。

Text.jsx は、普段通りの React のコンポーネントを記述するファイル。
Text.stories.js は、Text.jsxを Storybook で確認するために必要な内容を記述するファイルです。

これら 2 つがないと Storybook には表示されません。

src/myStories について
現在のプロジェクのファイルと区別するため、ディレクトリを作成していますが、なくても良いです。

最低限の記述を追加する

Text.jsx

export default function Text({ content }) {
  return <p>Text: {content}</p>;
}

Text.stories.js

// Textコンポーネントをインポート
import Text from "./Text";

// デフォルトの表示設定
export default {
  // グループ/コンポーネント名
  title: "MyStories/Text",
  // 使用するコンポーネントを指定
  component: Text,
  parameters: {
    // レイアウト設定項目（Storybook でセンターに配置するか、横幅いっぱいに設定するかなど）
    layout: "centered",
  },
  // コンポーネントの Docs （コンポーネントの一覧や props の一覧などが見れるもの）を自動で生成してくれる
  tags: ["autodocs"],
};

// デフォルトのコンポーネントの設定
export const FirstStory = {
  args: {
    // propsに渡す内容
    content: "FirstStory",
  },
};

上記を記述すると、以下のようになるはずです。

props に応じて色を変える

いくつかコンポーネントを増やして、props に応じて内容を変更して Storybook に表示してみます。テキストを props に渡すだけのシンプルなものです。

コンポーネントを2つ追加する

Text.stories.js

    import Text from "./Text";
    
    export default {
      title: "MyStories/Text",
      component: Text,
      parameters: {
        layout: "centered",
      },
      tags: ["autodocs"],
    };
    
    export const FirstStory = {
      args: {
        content: "FirstStory",
      },
    };
    
+   export const SecondStory = {
+     args: {
+       content: "SecondStory",
+     },
+   };
    
+   export const ThirdStory = {
+     args: {
+       content: "ThirdStory",
+     },
+   };

▼ ↑を記述すると、Storybook はこのようになっているはずです。

props に応じて、UI を変更する

では次に、props に state で success、error を追加してそれに応じて色を変えてみます。

Text.jsx

+   export default function Text({ content, state }) {
+     let css;
+     if (state !== "") {
+       css = state === "success" ? "bg-sky-200" : "bg-red-200";
+     }
+     return <p className={css}>Text: {content}</p>;
+   }

Text.stories.js

    import Text from "./Text";
    
    export default {
      title: "MyStories/Text",
      component: Text,
      parameters: {
        layout: "centered",
      },
      tags: ["autodocs"],
+     args: {
+       state: "",
+     },
    };
    
    export const FirstStory = {
      args: {
        content: "FirstStory",
      },
    };
    
    export const SecondStory = {
      args: {
        content: "SecondStory",
+       state: "success",
      },
    };
    
    export const ThirdStory = {
      args: {
        content: "ThirdStory",
+       state: "error",
      },
    };

ここまで記述して Storybook を見るとこのようになっているかと思います。

args の state が追加されたのはいいのですが、見た目の変化は見られません。

これは Tailwind CSS を Storybook で使いますよ、と宣言してないのでスタイルが変わっていません。 なので、Storybook に Tailwind CSS を入れ込みます。

Storybook で Tailwind CSS を利用できるようにする

Docs: Storybook: Frontend workshop for UI development

色々ドキュメントに書いてありますが、環境が Vite という点を考慮すると、2. Provide Tailwind to stories をすればOKです。

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.storybook/preview.js

import '../src/tailwind.css';

こうすれば、Tailwind CSS が使えるようになって、見た目もきちんと反映されます。

非常にシンプルですが、以上が最低限の Storybook の使い方です。

あとは Storybook をインストールしたときに作成された、src/stories のコンポーネントや設定ファイルを見てみるとふんわり、やんわり何をしているかがわかるかもしれません。

おさらい

ざっと流れを振り返ります。

Storybook をインストールする
いつも通りコンポーネントを作成 Text.jsx
Storybook に表示させるための Text.stories.js を作成、設定を記述
Tailwind CSS を使うために、CSSファイルの作成、preview.js に記述を追加

以上です。

はじめての Qiita 投稿で、日本語力が低すぎるので誰かの参考になるかはわかりませんが、もしこの記事が Storybook 利用のヒントになれば幸いです。

触り始めてほんの数日なので、間違いなどありましたらご連絡ください。

関係ない話

あと、全然関係ないのですが、Storybook で一番「これすごーい！」と思ったことがありました。

以下のコードの className の書き方が便利でいいな...と。はい、ただそれだけです。

<button
  type="button"
  className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
  style={backgroundColor && { backgroundColor }}
  {...props}
>
  {label}
</button>