react-cosmos/react-cosmos

これは何？

主な機能

• 01状態やpropsの組み合わせごとに、コンポーネントのfixtureを分離して表示します。
• 02コンポーネントを一覧表示して操作できるWebベースのプレイグラウンドを提供します。
• 03React Server Components向けのNext.js連携機能を備えています。
• 04さまざまな環境向けのGetting Startedガイドを用意しています。

ユースケース

• アプリ全体を起動せずに、デザインシステムやコンポーネントライブラリを開発する。
• ローディング、エラー、空表示など、エッジケースの状態を手動で確認する。
• デザイナーやチームメンバーとコンポーネントのプレビューを共有し、レビューを受ける。

クイックスタート

1. 1

   reactcosmos.org/docs/getting-started にある「はじめに」ガイドから1つ選んでください

2. 2

   セットアップの詳細については、ドキュメント全文をご覧ください

収録されている特集

トピック

よくある質問

react-cosmos とは？

アプリ全体を起動せずに、React UI コンポーネントを分離して開発・テストできるサンドボックス。 React Cosmosは、アプリケーション全体を起動することなく、UIコンポーネントを分離して開発・テストできるサンドボックスです。さまざまなコンポーネントの状態やpropsを記述したfixtureを用意すると、それぞれが個別のプレビューに表示されるため、エッジケースをすばやく確認できます。

react-cosmos は無料で使えますか？ライセンスは？

react-cosmos は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-cosmos は今もメンテナンスされていますか？

活発にメンテナンス中。react-cosmos の最終コミットは 2026年10月19日 です。

react-cosmos は何に使えますか？

アプリ全体を起動せずに、デザインシステムやコンポーネントライブラリを開発する。 ローディング、エラー、空表示など、エッジケースの状態を手動で確認する。 デザイナーやチームメンバーとコンポーネントのプレビューを共有し、レビューを受ける。

react-cosmos のインストール方法は？

reactcosmos.org/docs/getting-started にある「はじめに」ガイドから1つ選んでください セットアップの詳細については、ドキュメント全文をご覧ください

react-cosmos はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/react-cosmos/react-cosmos