Storybook のバージョンアップ手順と新機能まとめ

2025年8月24日

Storybook

Storybook のバージョンアップ手順と新機能まとめ

Storybook 8 が 2024 年 3 月にリリースされ、UI 開発の体験が劇的に向上しました。パフォーマンスが大幅に改善され、新しいテスト機能や洗練されたモバイル UI など、多くの魅力的な機能が追加されています。本記事では、Storybook 8 への移行手順から新機能の詳細まで、実践的な内容を分かりやすく解説いたします。

背景

Storybook の進化と課題

Storybook は UI コンポーネント開発のためのツールとして、長年にわたって開発者に愛用されてきました。しかし、従来のバージョンには以下のような課題がありました。

パフォーマンスの問題が最も深刻でした。Babel を使用したコンパイル処理により、大規模プロジェクトでは起動時間が長くなってしまうことがありました。また、テスト機能についても、複数のパッケージに分散されており、統合性に欠けていました。

さらに、モバイルデバイスでの使い勝手も十分ではなく、現代的な開発ワークフローに対応しきれていない部分がありました。

以下の図は、Storybook 8 リリース前後の開発環境の変化を示しています。

mermaidflowchart TD
    A[Storybook 7以前] --> B[課題]
    B --> C[Babel使用による低速コンパイル]
    B --> D[分散したテストライブラリ]
    B --> E[モバイル対応不足]

    F[Storybook 8] --> G[改善点]
    G --> H[SWC導入で高速化]
    G --> I[統合テストライブラリ]
    G --> J[モバイルUI最適化]

    style F fill:#e1f5fe
    style G fill:#c8e6c9

この図が示すように、Storybook 8 では従来の課題が体系的に解決されています。

技術スタックの変化

Web 開発の技術スタックも大きく進歩しています。TypeScript の採用率向上、React 18 の登場、Webpack 5 の普及など、開発環境は急速に変化しました。

このような背景から、Storybook も時代に合わせた進化が求められていました。特に、開発者の生産性向上とパフォーマンス改善が重要な課題となっていたのです。

課題

従来バージョンの具体的な問題点

Storybook 7 以前では、いくつかの重要な課題が開発者の生産性を阻害していました。

パフォーマンスの課題

最も深刻だったのがコンパイル速度の問題です。Babel を使用した JavaScript/TypeScript の変換処理により、プロジェクトの規模が大きくなるほど起動時間が長くなってしまいました。

中規模の React プロジェクトでも初回起動に 30 秒以上かかることがあり、開発体験を大きく損なっていました。

テストライブラリの分散

テスト機能についても、以下の 2 つのパッケージに分かれていました。

パッケージ名	用途	課題
@storybook/jest	Jest 統合テスト	設定が複雑
@storybook/testing-library	Testing Library 統合	別途インストールが必要

この分散により、設定が複雑になり、学習コストも高くなっていました。

モバイル対応の不備

モバイルデバイスで Storybook を使用する際、以下の問題がありました。

サイドバーが画面を圧迫してキャンバス表示が狭くなる
タッチ操作に最適化されていない UI
レスポンシブデザインの確認が困難

以下の図は、従来の Storybook 使用時の課題構造を表しています。

mermaidstateDiagram-v2
    [*] --> 開発開始
    開発開始 --> Storybook起動
    Storybook起動 --> 待機中: 長時間のコンパイル処理
    待機中 --> テスト実行: パッケージ設定
    テスト実行 --> エラー発生: 設定ミス
    エラー発生 --> 設定修正
    設定修正 --> テスト実行
    テスト実行 --> 完了: 成功時

    state 待機中 {
        [*] --> Babel処理
        Babel処理 --> 変換完了: 30秒以上
    }

この状態遷移図からも分かるように、従来のワークフローでは多くの待機時間と複雑な設定作業が必要でした。

これらの課題により、せっかくの優れた機能を持つ Storybook も、開発者にとって使いにくいツールとなってしまっていたのです。

解決策

Storybook 8 による抜本的改善

Storybook 8 では、これまでの課題を解決するために、アーキテクチャレベルでの大きな変更が行われました。

SWC 導入による高速化

最も重要な改善は、Babel から SWC への移行です。SWC（Speedy Web Compiler）は Rust で記載された高速な JavaScript/TypeScript コンパイラーです。

この変更により、以下の劇的な改善が実現されました。

項目	Storybook 7	Storybook 8	改善率
小規模プロジェクト起動時間	20 秒	16 秒	20%短縮
中規模プロジェクト起動時間	45 秒	22 秒	50%短縮
静的ビルド速度	120 秒	40 秒	3 倍高速化

統合テストライブラリ

分散していたテストライブラリを**@storybook/test**として統合しました。この統合により、以下のメリットが生まれています。

typescript// 従来の設定（複数パッケージが必要）
import { jest } from '@storybook/jest';
import {
  within,
  userEvent,
} from '@storybook/testing-library';

// Storybook 8の設定（単一パッケージ）
import { expect, userEvent, within } from '@storybook/test';

このシンプルな変更により、設定の複雑さが大幅に軽減されました。

以下の図は、Storybook 8 の改善されたアーキテクチャを示しています。

mermaidflowchart LR
    A[ソースコード] --> B[SWCコンパイラ]
    B --> C[高速変換処理]
    C --> D[Webpack5]
    D --> E[Storybook UI]

    F["@storybook/test"] --> G[統合テスト機能]
    G --> H["Jest + Testing Library"]

    I["モバイル最適化UI"] --> J["レスポンシブレイアウト"]
    J --> K["タッチ操作対応"]

    subgraph "パフォーマンス改善"
        B
        C
        D
    end

    subgraph "テスト統合"
        F
        G
        H
    end

    subgraph "UI改善"
        I
        J
        K
    end

    style B fill:#ffeb3b
    style F fill:#4caf50
    style I fill:#2196f3

この図が示すように、Storybook 8 では各コンポーネントが効率的に連携し、開発者により良い体験を提供します。

Visual Testing Addon の導入

新しく追加されたVisual Testing Addonにより、ビジュアル回帰テストが簡単に実行できるようになりました。

この機能では、Chromatic 連携により以下のことが可能です。

コミット前のビジュアル差分チェック
Storybook 内での結果確認
詳細なデバッグツールの利用

具体例

バージョンアップ手順の実践

それでは、実際のプロジェクトで Storybook 8 にアップグレードする手順を詳しく見ていきましょう。

事前準備

まず、プロジェクトのバックアップを取ることが重要です。

bash# 作業用ブランチの作成
git checkout -b storybook-8-upgrade
git add .
git commit -m "アップグレード前のバックアップ"

このコマンドにより、何か問題が発生した場合にも安全に元の状態に戻せます。

依存関係の確認

Storybook 8 では、以下の要件があります。

項目	最小バージョン
Node.js	18.0.0
React	16.8.0
Vue	3.0.0
Angular	15.0.0
Svelte	4.0.0

現在のバージョンを確認しましょう。

bash# Node.jsバージョンの確認
node --version

# パッケージのバージョン確認
yarn list react

これらのコマンドで、アップグレードの前提条件が満たされているかを確認できます。

自動アップグレードの実行

Storybook 8 では、自動アップグレードコマンドが提供されています。

bash# Storybook 8への自動アップグレード
npx storybook@latest upgrade

このコマンドは以下の処理を自動で行います。

依存関係のアップデート
設定ファイルの変換
互換性のない設定の修正
新機能の適用

実行中に表示される進捗メッセージの例：

bash┌ Storybook upgrade ─────────────────────────────────────┐
│                                                       │
│ • Detecting project type                              │
│ • Updating dependencies                               │
│ • Running automigrations                              │
│ • Configuring SWC compiler                           │
│                                                       │
└───────────────────────────────────────────────────────┘

設定の確認と調整

アップグレード完了後、以下のファイルを確認してください。

javascript// .storybook/main.js の確認
export default {
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      // SWCが自動的に設定される
      compiler: 'swc',
    },
  },
  // 他の設定...
};

このファイルでは、新しいフレームワーク設定と SWC コンパイラーの設定が自動的に適用されています。

SWC Addon の追加

より高いパフォーマンスを得るために、SWC Addon を追加しましょう。

bash# SWC Addonのインストール
npx storybook@latest add @storybook/addon-webpack5-compiler-swc

このアドオンにより、コンパイル速度がさらに向上します。設定ファイルに自動的に以下が追加されます。

javascript// .storybook/main.js への自動追加
export default {
  addons: [
    // 他のアドオン...
    '@storybook/addon-webpack5-compiler-swc',
  ],
};

テストライブラリの移行

従来のテストコードを新しい統合ライブラリに移行しましょう。

typescript// 旧バージョンのテストコード
import {
  ComponentStory,
  ComponentMeta,
} from '@storybook/react';
import {
  within,
  userEvent,
} from '@storybook/testing-library';
import { expect } from '@storybook/jest';

// 新バージョンのテストコード
import { Meta, StoryObj } from '@storybook/react';
import { within, userEvent, expect } from '@storybook/test';

const meta: Meta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
};

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

この変更により、インポート文がシンプルになり、型安全性も向上します。

動作確認

すべての設定が完了したら、Storybook を起動して動作確認を行います。

bash# 開発モードでの起動
yarn storybook

# ビルドテストの実行
yarn build-storybook

起動時間の改善を実感できるはずです。コンソールに表示される起動時間を確認してみてください。

以下の図は、アップグレードプロセス全体の流れを示しています。

mermaidsequenceDiagram
    participant Dev as 開発者
    participant CLI as Storybook CLI
    participant Proj as プロジェクト
    participant SWC as SWCコンパイラ

    Dev->>+CLI: npx storybook@latest upgrade
    CLI->>+Proj: 依存関係の解析
    Proj-->>-CLI: 現在の設定情報
    CLI->>+Proj: package.json更新
    CLI->>+Proj: 設定ファイル変換
    CLI->>+SWC: コンパイラ設定
    SWC-->>-CLI: 設定完了
    Proj-->>-CLI: アップグレード完了
    CLI-->>-Dev: 成功メッセージ

    Dev->>+Proj: yarn storybook
    Proj->>+SWC: 高速コンパイル実行
    SWC-->>-Proj: コンパイル完了
    Proj-->>-Dev: Storybook起動（高速化）

このシーケンス図からも分かるように、アップグレードプロセスは段階的かつ自動的に実行され、最終的に高速化された Storybook が利用できるようになります。

新機能の活用方法

Visual Testing Addon の実装

新しい Visual Testing Addon を使ってビジュアル回帰テストを実装してみましょう。

bash# Visual Testing Addonの追加
npx storybook@latest add @storybook/addon-visual-tests

このアドオンをインストールすると、以下の設定が自動的に追加されます。

javascript// .storybook/main.js
export default {
  addons: ['@storybook/addon-visual-tests'],
};

ストーリーファイルでビジュアルテストを定義します。

typescript// Button.stories.tsx
export const VisualTest: Story = {
  args: {
    primary: true,
    label: 'ビジュアルテスト用ボタン',
  },
  parameters: {
    // ビジュアルテストのオプション
    visualTest: {
      threshold: 0.2, // 差分の許容値
      delay: 1000, // スクリーンショット前の待機時間
    },
  },
};