🌸

React Cosmsを試してみる

2025/01/30に公開

https://reactcosmos.org

React Cosmosとは

React Cosmosは、UIコンポーネントを分離して開発およびテストするための強力なツールです。 一度に1つのコンポーネントに集中することができ、より迅速なイテレーションと高品質なコンポーネントを実現します。
https://reactcosmos.org/docs#what-is-react-cosmos

コンポーネントのUIカタログを作成して、1つのコンポーネントを独立させて開発・テストすることができるようになります。
Storybookのようなライブラリです。
サーバーの立ち上がりが早く軽量で、さくさく開発に専念することができます。

使用感

導入コストが低い

React Cosmos は 名前に 『React』とついていることから、React で使うことができるツールです。なので、StorybookであればReact用のaddonなどを入れて設定をするところを省いて、簡単に導入できます。
以下は、React / Vite / TypeScript 環境で React Cosmos を最低限動かすのに必要な設定です。

> pnpm add -D react-cosmos react-cosmos-plugin-vite
> echo '{ "plugins": ["react-cosmos-plugin-vite"] }' > cosmos.config.json

fixtureファイルを作成し、 CLIからcosmos コマンドを実行し、cosmosサーバーを建てます。

Hello.fixture.tsx
export default <h1>Hello World!</h1>;
> pnpm cosmos

学習コストが低い

React Cosmosでは分離してレンダリングできるコンポーネントをFixtureという概念を用いて表します。

非常にシンプルにfixtureを書くことができます。
Hello.fxture.tsxのように、fixture.tsxという拡張子をつけたファイルでコンポーネントをexport defaultすればcosmosサーバーでUIを確認できます。

または、デフォルトのエクスポートをオブジェクトにすることで、フィクスチャモジュールは複数のフィクスチャをエクスポートすることもできます。

Button.fixture.tsx
export default {
  "red-button": <CustomButton color="red" />,
  "yellow-button": <CustomButton color="yellow" />,
  "blue-button": <CustomButton color="blue" />
}

物足りないと感じる点

できることが限られている

Storybookと比較して拡張性は足りなく、addonなどで保管していることをReact Cosmosではできず、できることが限られているように感じます。
StorybookではSnapshot TestやVisual Testができますが、React Cosmosでは現状難しいようです。そのため、Storybookから完全に移行するのは現状難しいと感じます。

その分、UIカタログとしてはReact Cosmosで事足りると思います。そのライブラリの領分以上も以下もしないライブラリが好きなので好感触です。

さいごに

軽い・速い・簡単に設定できて書き味もシンプルなので積極的に使っていきたいです。

Discussion