Storybook 8のリリース

バージョンアップの報告は2024年3月13日に行われました。

インストール

Storybook 8 を新規インストールするには、次のコマンドを実行します。

npx storybook@latest init

既存の Storybook を Storybook 8 にアップグレードするには、次のコマンドを実行します。

npx storybook@latest upgrade

Storybook 7 から Storybook 8 への移行ガイド
https://storybook.js.org/docs/migration-guide?ref=storybookblog.ghost.io

Storybookの移行(GitHub)
https://github.com/storybookjs/storybook/blob/4780ae31030197488d66b4fba483867f416bdb0a/MIGRATION.md?ref=storybookblog.ghost.io

主なアップデート

📸 ビルトインのビジュアルテスト
⚛ React Server Component のサポート
🎛 アップグレードされた Vue と React コントロールの自動生成
⚡ Vite サポート、Vitest テスト、Vite 5 サポート
🧪の再設計テストビルド
✨が2〜4倍高速デスクトップUI
📲の刷新モバイルUX
🙅 ♀の再構築非 React プロジェクトの React 依存関係を削除

Storybook 8は、テストとドキュメントの機能を大幅に改善し、React、Vue、Angular、web-components、Svelteなどのフレームワークの互換性とユーザーエクスペリエンスを強化しています。

ビジュアルテストの追加: 新しいVisual Testsアドオンにより、UIのバグを以前よりも迅速かつ簡単に検出できます。ChromaticというビジュアルテストクラウドサービスがStorybookに初めて統合されました。
React Server Componentのサポート: React Server Componentsは、コンポーネントがサーバー上でのみレンダリングされるReactの新しいパラダイムです。Storybook 8では、Next.jsとの互換性を持つ実験的なサポートが導入されました。
フレームワーク固有の改善: React、Vue、Angular、Web Components、Svelteなど、さまざまなフレームワークに対する多くの改善が行われています。例えば、Reactには新しいdocgenライブラリが導入され、Vueには公式のVue docgenパッケージがサポートされています。また、Vite 5のサポートや、テストビルドの高速化なども含まれています。
React Storybook の起動時間が最大 50% 速くなりました。
2〜4倍高速なテストビルド
Storybook 8 では、Storybook の静的ビルドを 2-4 倍高速化する新しい「テストモード」が導入されました。
モバイルとデスクトップのUIを更新
StorybookのモバイルUIを全面的に見直しました。これで、ナビゲーションサイドバーとアドオンパネルの両方がページの下部からポップアップし、電話の親指で簡単にトリガーできるようになりました。
Chromaticの導入
これがデフォルトで導入された？この会社の業界標準になってからユーザーを取り込む戦略のようだ。

Chromatic

無料版もあるが、 Chromatic は値段が非常に高い。

プラン	価格	機能
Essentials	無料	すべてのコンポーネント、アプリ、デザインシステムにフロントエンドインフラを提供します。
Starter	$149/月	テストとレビューを開始します。 Chrome 35,000 スナップショットカスタムドメイン動的 IP アドレス + コア機能
Standard	$349/月	確立された UI を持つ経験豊富なチーム。 Chrome、Firefox、Safari、Edge 85,000 スナップショットカスタムドメイン動的 IP アドレス + コア機能
Pro	$649/月	プロフェッショナルな高速度組織。 Chrome、Firefox、Safari、Edge 165,000 スナップショットカスタムドメイン静的 IP アドレス利用可能 + コア機能
Enterprise	カスタム	卓越したチーム向けの産業グレードインフラ。シングルサインオンカスタム Git 統合優先サポート請求書など Pro プランのすべて追加スナップショット：0.006 ドル

FREE
ストーリーブックの制限なし
共同制作者に上限なし
コンポーネントのバージョン管理
チーム向けの安全な CDN アクセス
5,000 件の無料スナップショット/月
Git と CI の統合
FREEはクレジットカードの登録は不要

自動テストで動かしていると、5000回/月では足りない可能性があります。

クロスブラウザテスト、アクセシビリティチェック、高度な視覚回帰ツールなどの高度な機能は、無料プランでは利用できません。

メモ

日本語のマニュアルが欲しい。