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回/月では足りない可能性があります。
クロスブラウザテスト、アクセシビリティチェック、高度な視覚回帰ツールなどの高度な機能は、無料プランでは利用できません。
メモ
日本語のマニュアルが欲しい。