【Storybook8.1】ワンクリックでStory作成！俺たちはもうStoryを書かなくていいのかもしれない。

こんにちは。
Storybook大好きっ子(32)の筆者です！
普段Storybookを使わない方にも紹介したい面白い機能が追加されたのでそれを紹介したいと思います！
今まで感じていた「めんどくせぇ」が解消されるかもしれない機能です！

機能名は特についていないようですが、
「ワンクリックでStoryを作れるボタン」が実装されました👏

今までのStory作成

まずは今までのStory作成方法をおさらいしたいと思います。(使ったことない人以外は、読み飛ばしてもらってOKですが、以下の環境を前提に説明を進めていきます！)

Storyの作成

step1 Storybookのセットアップ

まずはStorybookのセットアップをします

npx storybook@latest init

これでもろもろのセットアップが完了し、Storybookが立ち上がります。

step2 自動作成されたファイルを削除する。

上記のキャプチャにある<Button/>・<Header/>・<Page/>は自動作成されたExampleなのでそれに関わるファイルを削除しておきましょう。(ノイズだから削除するだけですので、ご自由に！)

• src/stories/以下のファイルを全て削除します。

一旦エラーが出ますが、表示するStoryがないだけなので無視してOKです。Step3以降でStoryを作成していきましょう。

Step3 対象のコンポーネントとそのStoryファイルを作成する。

お好きなコンポーネントと、そのStoryファイルを手書きしましょう。
(下記のコンポーネントはとても適当です...。)

SquareButton.tsx

type Props = {
  children: string;
  disabled: boolean;
};

export const SquareButton = ({ children, disabled }: Props) => {
  return (
    <button
      disabled={disabled}
      style={{
        border: "none",
        backgroundColor: disabled ? "#5a5a5a" : "#343434",
        cursor: disabled ? "default" : "pointer",
        color: "white",
        borderRadius: 2,
        fontSize: 12,
        height: 42,
        width: 120,
        overflow: "hidden",
        whiteSpace: "nowrap",
        textOverflow: "ellipsis",
      }}
    >
      {children}
    </button>
  );
};

上記で作成したコンポーネントをxxxxx.stories.tsxというファイルの中で呼び出します。

SquareButton.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";

import { SquareButton } from "./SquareButton";

const meta: Meta<typeof SquareButton> = {
  component: SquareButton,
};

export default meta;
type Story = StoryObj<typeof SquareButton>;

export const Primary: Story = {
  args: {
    children: "ラベル",
    disabled: false,
  },
};

これで、SquareButtonのStoryが表示されるようになりました！
これが既存のStory作成方法です。

以上！雑な説明終わります！

新しいStory作成

では、本題の新しいStory作成方法を見ていきましょう...!!

Storyパターンを作成する

先ほど作成した<SquareButton/>を例にしたいと思います。

このコンポーネントは、テキストが長いと末尾が「...」と省略表示されるコンポーネントです。
省略されているUIを確認したい場合、Storybook上のコントロールパネルにてchildrenに長いテキストを入力してあげればいいです。

が、「確認したいな」と思う度、毎回インプットから入力するのは面倒です。こんな時のために、各プロパティの初期値を自由に設定したStoryを作成しておく機能があります。

以下これを「Storyパターン」と呼称します(造語です)

もちろん手書きで作成することは可能ですが、それがボタンひとつで実現するようになりました！

つまり、
「既存のStoryファイルに、任意のプロパティがデフォルトとして設定されているStoryパターンをボタンひとつで追加できる」 と言うことです!! Yatta👏!!

追加方法

1. 対象のコンポーネントのStoryのコントロールパネルから、各種プロパティを入力し、Storyパターンとして保存したい状況を作る。
2. コントロールパネル下部の「New」ボタンを押下し、そのStoryパターンの名前を入力
3. 以上！簡単ですね！

ちなみに、「New」ではなく「Save」ボタンを押すと、対象のStoryパターンが更新されます。

Storyファイルを作成する

さて、今回追加された機能は前述の「既存のStoryファイルに、任意のプロパティがデフォルトとして設定されているStoryパターンをボタンひとつで追加できる」機能だけではありません。

「まだ存在しないStoryファイルを、ボタンひとつで追加できる」という機能も追加されています... !!Yatta👏

今まで、コンポーネントを追加する度に、テンプレのコードがそれなりの量必要なStoryファイルを手書きしなければいけませんでした。
筆者は、hygenなどを利用してボイラーテンプレートを作成し、この手間を回避してきていましたがこれからはその手間すら不要になるかもしれません...。

追加方法

0. (Storyファイルを作成したいコンポーネントを実装しておきます、<CircleButton/>というコンポーネントを実装しました。)
1. サイドバー上部の「＋」ボタンを押下し、対象のコンポーネントを検索・選択します。
2. 以上！ほんとに簡単！

さいごに

さて、今回は、ボタンひとつでStoryが作れてしまうという新しい機能について紹介しました。
Storyファイルの作成等毎度面倒なことはたくさんあったため、こういった機能が実装されるのは嬉しいですね...！！
Story作成の「めんどくせぇ」が軽減されました！これを機にStorybookのをあまり使用していなかった人も使ってみてほしいなと思ったり思わなかったりしています！！

読んでいただき、ありがとうございました！

参考・ソース

https://storybook.js.org/docs/get-started/whats-a-story#working-with-stories