了解しました。Reactベースで、tRPCを使用しているプロジェクトにおいて、Storybookの代替として軽量で設定が簡単なツールを調査します。主な要件は、APIモックやコンポーネントの状態確認がしやすいことです。ビジュアルリグレッションテストやインタラクションテストは必須ではありません。調査が完了したら、主要な代替ツールの一覧と、それぞれの特徴・メリット・導入コストの比較を含めてご報告します。
Storybook代替ツールの比較
以下に、Storybookの代替となり得る主要なツールを比較します。それぞれ軽量かつ設定が簡単な点で注目されており、Reactプロジェクトでの利用やtRPCとの統合を念頭にまとめています。
| ツール名 | 人気・コミュニティ活動 | React対応 | tRPCモック（APIモック）のしやすさ | 導入の容易さ（設定ファイル・依存） | コンポーネントドキュメント機能 | ビルド速度・パフォーマンス |
|---|---|---|---|---|---|---|
| Ladle | 新興ながら注目度上昇中。Uberチーム発のOSSで約2.7k⭐（GitHub）github.com。開発は個人主体だが活発。 | React専用（他フレームワーク非対応） | MSW内蔵でAPIモックが容易（設定で有効化するだけ）。tRPC呼び出しもMSWハンドラで簡単にモック可能。 | ◎ 単一依存でゼロコンフィグ。Vite＋esbuild採用でWebpack不要。必要に応じ .ladle/config.mjs を少し調整する程度。 | StorybookのCSF形式（Stories）をサポートし、Propsを操作できるControls機能やソース表示、アクセシビリティチェック等を標準装備。 | 高速。ViteベースでHMR対応。内部ベンチではStorybookより4〜25倍速いと報告blog.logrocket.com。大規模プロジェクトでも動作軽快。 |
| React Cosmos | 古参の人気ツールで約8.4k⭐github.com。v6が2024年に登場し機能強化（Next.js 13対応など）。コミュニティも比較的活発。 | React専用（Next.jsやViteとも統合可） | 外部依存をモックし、任意のProps・状態でコンポーネントを単独描画可能。tRPCのクエリ結果もフィクスチャやMSWで簡単に偽装可能。 | ◯ インストール後に自動でプロジェクトをスキャンし設定を生成。ViteプラグインやNext.js統合プラグインあり。設定ファイル（cosmos.config）もシンプル。 | フィクスチャ（コンポーネントの特定状態を定義するコード）により複数状態の作成が可能。プロプスの一覧表示機能はないが、状態ごとの表示確認に特化。ドキュメンテーションより開発・デバッグ重視。 | 高速。デフォルトでVite等モダンバンドラを使用し動作軽快。HMR対応。RSC対応など最新React機能もサポート。 |
| React Styleguidist | 実績豊富で約10k⭐超。長年使われるスタイルガイド生成ツール。最近は更新頻度減もOSSとして維持github.com。 | React専用。Vue版派生も存在。 | APIモック機能は特になく、必要ならMSWを手動導入可能。tRPC呼び出し部分はコンポーネント例内で自前モックが必要。 | ◯ styleguide.config.jsで対象コンポーネントパス等を指定し利用。内部でWebpackを使用react-styleguidist.js.org。既存Reactプロジェクトへの導入も比較的容易。 | 充実。Markdownで記述した例と説明から「生きたスタイルガイド」を生成github.com。PropTypesやTS型からProp一覧を自動表示し、リアルタイムでPropを変更して動作確認可能blog.logrocket.com。 | 普通。Webpackベースのため初回ビルドはやや重め。中〜大型プロジェクトではビルド30秒超との報告もgithub.com。HMRで開発体験は良好だが、Vite系ほどの軽快さはない。 |
| Docz | 約23.7k⭐と非常に高い人気github.comを博したが、現行バージョンは依存の陳腐化で保守停止中。新バージョン開発中だがコミュニティ活動は一時停滞。 | React向けドキュメンテーションサイト生成ツール（他FW非対応）。 | APIモック機能は特に無し。tRPC用のモックも自力でMSW等を組み込む必要あり。 | △ MDXファイルを書くことで利用可能。セットアップ自体は簡単だが、内部でGatsbyを使用しており依存が重い。現行版は更新停止で不具合修正も期待困難。 | MDXベースで美麗なドキュメントサイトを構築可能。内にコンポーネントを配置してライブ表示、タグでProp一覧も表示。デザインシステムの公開に適す。 | 重い。Gatsbyベースのため開発サーバー・ビルド時間とも長め。SEO対応の静的サイト出力が可能な反面、軽量さに欠ける。 |
各ツールの特徴まとめ
Ladle: Storybookとほぼ同等の体験を圧倒的な軽快さで提供する新進ツールです。Vite + ESBuildによる高速HMRが特徴で、StorybookのCSF（Component Story Format）互換のため移行も容易です。設定はゼロコンフィグが基本で、Next.jsやTailwind利用時も最小限の調整で済みますzenn.dev。さらにMock Service Worker（MSW）を内蔵し、簡単な設定追記だけでAPIモックが可能です。tRPCの通信もMSW経由で簡単に偽装でき、ロード中・エラー時など各状態のストーリーを手軽に作成できます。コミュニティは急成長中で、Uber発プロジェクトという信頼感もあります。React Cosmos: コンポーネント開発に特化した老舗ツールです。プロジェクト内のコンポーネントとそのあらゆる状態を自動検出し、組み合わせたフィクスチャで動作を検証できます。外部APIやローカルストレージをモックして状態遷移を観察できるため、tRPCのレスポンスモックにも適しています。最新のv6ではViteやNext.js（App RouterやRSC）とも統合でき、性能面・将来性ともに優れます。Storybookのようなドキュメンテーション機能は弱いものの、開発中のデバッグ用途として非常に強力です。長年の利用実績があり安定している点も魅力です。React Styleguidist: コンポーネントのリビングスタイルガイドを生成する定番ツールです。Markdownで各コンポーネントの使用例や解説を書けば、ホットリロード対応のドキュメントサイトが即座に構築されますgithub.com。PropTypesやTypeScript定義からプロパティ一覧表を自動生成し、UI上で値を変更して挙動を試すことも可能blog.logrocket.com。ドキュメント整備に重きを置くプロジェクトに適しています。ただし内部でWebpackを使用するため、ビルド速度や開発サーバ起動は最新ツール(LadleやCosmos)に比べるとやや低速です。また、APIモックは標準サポート外のため、必要ならMSWを自前設定する手間があります。Docz: 美しいドキュメントサイトを簡単に作れることで注目を集めたツールです。MDX形式で書かれたコンポーネント例から、ライブリロード対応の静的サイトを生成できます。Props表やコードサンドボックス的なPlaygroundも組み込みで提供され、デザインシステムの公開に有用です。しかし現在の公式版は依存ライブラリの陳腐化により更新が止まっており、開発チームも「旧バージョンはバグがある可能性が高い」と警告しています。将来的にAstroベースで再構築予定とされていますが、現時点で選定するのはリスクがあります。
推薦ツールと理由
以上を踏まえ、本プロジェクトには Ladle と React Cosmos のいずれかを特におすすめします。
- Ladle: 最有力の選択肢です。Storybookライクな使い勝手を維持しつつ、導入・動作が圧倒的に軽量高速だからです。追加の設定や依存もほぼ不要で、MSW統合済みのためtRPCのモック環境構築が容易です。コントロールアドオンでプロパティを操作しながらUIを確認でき、開発者体験が洗練されています。実績こそ新しいものの、パフォーマンス改善を重視する最近のフロントエンド事情にマッチしたツールと言えます。
- React Cosmos: コンポーネントの動作検証やモックに重きを置く場合はこちらも有力です。特に様々な状態のコンポーネントを自在にテストできる柔軟性は群を抜いており、tRPCを含む外部依存のモックにも対応しやすい設計です。学習コストは多少ありますが、プロジェクト全体のコンポーネントをスキャンして動作確認できる仕組みは大規模開発で威力を発揮します。最新バージョンでモダンな開発環境とも整合しており、長期的な安心感も得られるでしょう。 以上のツールはいずれもStorybookより軽量で設定も簡単です。それぞれメリットがありますが、特にLadleは移行のしやすさとモック機能の手軽さから、現時点では最もおすすめできる選択肢です。また、より高度なモックや状態管理が求められる場合にはReact Cosmosが確実なサポートとなるでしょう。