Storybookのストーリー数の数え方

背景

• 運用中のStorybookのストーリー数が知りたかった。
• でもGoogleで検索したりChatGPTに聞いたりしても、知る方法を見つけられなかった。
  • (ChatGPTは近いことを教えてくれましたが、Storybook6系以前の方法となっていたため断念)
• 対象は100件以上が存在するため、自分で数えるのは難しい。そこで自作プログラムを書いてみることにした。

※ ここでの"ストーリー"とは*.stories.jsにexport const Primary = {}のように書いている記述のことです。

注意書き

• 正攻法ではありません。「役立ったらラッキー」くらいでお願いします。

動作確認した環境

記事を投稿した時点の最新バージョンです。

• Node: 22.9.0
• storybook: 8.3.5 (恐らく7〜8系なら動きます)

手順

1. Storybookの静的ファイルを生成する
2. 生成されたindex.jsonに記述されている"type": "story"を数える

1. Storybookの静的ファイルを生成する

以下を実行するとstorybook-staticに静的ファイルが生成されます。
(Storybookのマニュアル通りにセットアップしてある場合)

• npmの場合: npm run build-storybook
• yarnの場合: yarn build-storybook

2. 生成されたindex.jsonの"type": "story"を数える

ここでは生成されたstorybook-static/index.json というファイルを使用します。
このファイルには全てのストーリーやドキュメントなどの情報が記述されています。ここから"type": "story"と書かれている記述を数えていきます。

以下のJavaScriptを実行するとストーリー数を取得することができます。
ここではnode -e '${JavaScriptのコード}'によって実行していますが、JavaScriptの実行方法は任意です。

bash

node -e '
const jsonData = require("./storybook-static/index.json");
let storyCount = 0

if (jsonData.v !== 5) {
  console.log("動作確認していないバージョンです。動作しない可能性があります。");
}

for (const key in jsonData.entries) {
  if (jsonData.entries[key].type === "story") {
    storyCount++;
  }
}

console.log(`ストーリー数: ${storyCount}`);
'

# (実行結果)
# ストーリー数: 8

index.jsonの内容

ちなみにindex.jsonの中身は以下のようになっています。

storybook-static/index.json

storybook-static/index.json

{
  "v": 5,
  "entries": {
    "atoms-button--docs": {
      "id": "atoms-button--docs",
      "title": "Atoms/Button",
      "name": "Docs",
      "importPath": "./src/components/atoms/Button/Button.stories.ts",
      "type": "docs",
      "tags": ["dev", "test", "autodocs"],
      "storiesImports": []
    },
    "atoms-button--primary": {
      "type": "story",
      "id": "atoms-button--primary",
      "name": "Primary",
      "title": "Atoms/Button",
      "importPath": "./src/components/atoms/Button/Button.stories.ts",
      "componentPath": "./src/components/atoms/Button/Button.tsx",
      "tags": ["dev", "test", "autodocs"]
    },
    "atoms-button--secondary": {
      "type": "story",
      "id": "atoms-button--secondary",
      "name": "Secondary",
      "title": "Atoms/Button",
      "importPath": "./src/components/atoms/Button/Button.stories.ts",
      "componentPath": "./src/components/atoms/Button/Button.tsx",
      "tags": ["dev", "test", "autodocs"]
    }
  }
}

(余談) なぜストーリー数が必要になったのか

Chromaticの導入検討にあたって、ストーリー数(＝1回のビルドで撮影されるスナップショット数)を使用して月額費用を試算したかったためでした。