Storybook開発コミュニティは2025年10月28日、UIフロントエンド開発環境Storybookの最新バージョンStorybook 10をリリースした。

• Storybook 10 -ESM-only, 29% lighter, module automocking, and more

Storybookはフロンエンド開発におけるUIコンポーネントやページを個別に構築するためのオープンソースの作業環境。Storybookのコードでは、これまでCommonJSとESM（ES Modules）の両方を利用してきたが、Storybook 10ではESMのみを利用する形に変更した。これによりインストールサイズが前バージョンStorybook 9と比較して29％軽量化された。なおESMのみの利用になるため、要件を満たすNode.jsのバージョンが必要となる。

Storybook 10のその他の主な特徴は以下の通り。

テストを容易にするモジュールの自動モッキング

Vitestの協力により、テスト時にモジュールをモックするユーティリティsb.mockを改良し、開発ビルドと静的な本番ビルドの両方で利用できるようになった。

React向けタイプセーフなCSFファクトリーのプレビュー

Component Story Format（CSF）の次期バージョンで、タイプセーフ、エルゴノミクス、自動補完機能を向上させたCSFファクトリー（CSF Factories）をテスト段階からプレビューに昇格。CSFファクトリーは現在Reactのみで利用可能で、10.xでVue、Angular、Web コンポーネントファクトリーがサポートされる予定。

UI編集と共有の最適化

モバイル端末でコンポーネントがどのように表示されるか簡単に確認できるよう、共有メニューにQRコードが表示されアクセスできたり、今編集しているストーリーを右クリックメニューから別のエディタで開いて編集するといった編集、共有機能が強化された。

タグフィルタリングの除外と設定

成熟度の異なる段階にあるコンポーネントや、異なるチームが所有するコンポーネントが混在する大規模なStorybookを管理しやすくするため、ストーリーにタグを追加した。新しい「Exclusion（除外⁠）⁠」タグにより選択したタグに基づいてストーリーを除外できる。また「Configuration（設定⁠）⁠」タグでデフォルトのUIの状況を設定することができる。

新規プロジェクトでStorybook 10を試したい場合はnpm create storybook@latestで導入でき、既存のStorybookプロジェクトでは以下のコマンドから自動移行ウィザードを使用してアップグレードできる。

npx storybook@latest upgrade

詳しくはStorybook 10に移行するためのマイグレーションガイドを参照。