React Cosmsを試してみる
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サーバーを建てます。
export default <h1>Hello World!</h1>;
> pnpm cosmos
学習コストが低い
React Cosmosでは分離してレンダリングできるコンポーネントをFixture
という概念を用いて表します。
非常にシンプルにfixture
を書くことができます。
Hello.fxture.tsx
のように、fixture.tsx
という拡張子をつけたファイルでコンポーネントをexport default
すればcosmosサーバーでUIを確認できます。
または、デフォルトのエクスポートをオブジェクトにすることで、フィクスチャモジュールは複数のフィクスチャをエクスポートすることもできます。
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