目次
概要
某プロジェクトにおいてStorybookからReact Cosmosに移行しました。この記事ではReact Cosmosの基本的な紹介と、Storybookから移行した背景・移行して良かった点をご紹介します。
React Cosmosについて
① React CosmosはUIコンポーネントの管理・テストをすることができるオープンソースツールです。
ReactCosmosはコンポーネントをカタログ化できるツールです。アプリケーションを起動しなくてもコンポーネント単体の動作確認ができます。
実際にReact Cosmosを起動してみると、下記添付のような画面が表示されます。
画面の左側の赤枠はCosmosに登録されているコンポーネントのリストが表示されます。
画面の右側の水色枠はComponentに渡したProps一覧とPropsの値を変更できるエリアになります。
Mobileの画面幅にも任意のデバイス幅にも変更できます。
実際のComponentの構造をCosmos上では下記のような表示になります。
② Propsの値をReact CosmosのUI上から操作できる機能が標準で備わっている
React CosmosではControl Panelという機能があります。
Propsの値をReact CosmosのUI上から視覚的に操作できる機能になり、こちらの機能が標準で備わっています。Propsの値をCosmosのUI上で操作することによって、Componentの挙動確認に役立てられます。(https://github.com/react-cosmos/react-cosmos/tree/main/docs#control-panel)
それに対して、Storybookだと標準機能ではなく、knobsやControlなどのアドオン機能を追加しないと利用できません。
下記の添付画像がReact CosmosのControl Panel機能になります。UI上からPropsの値を変更して、Componentの挙動を確認できます。
③ webpackの特別な設定をしなくてもデフォルトで動く
React Cosmosのアプリケーション内にwebpackがあります。カスタムのwebpack設定等していない場合はReact Cosmosのアプリケーション内にあるwebpackが読み込まれ、React Cosmosが起動する形になります。
カスタムのフォントやCSSを別途読み込みしたい場合はwebpackを個別で設定する必要があります。(https://github.com/react-cosmos/react-cosmos/tree/main/docs#webpack)
④ Storybookと比較して、機能性・拡張性が劣る
Storybookにはアドオンがありますが、React Cosmosにはアドオンがありません。例えばStoryShotsみたいな機能をReactCosmosで実装となると、Puppeteerやplaywrightなどのヘッドレスブラウザと連携して一からの実装になります。Storybookより機能追加が手間であり、拡張性に関してもStorybookより劣ります。
したがって、React Cosmosをゆくゆくは拡張したいと視野に入れているアプリケーションには不向きかもしれません。
⑤ 現状Reactしか対応していない
公式documentの説明にある通り、現状Reactしか対応しておらず、VueやAngular等には対応しておりません。
⑥ バンドラーはwebpackしか対応していない
公式documentの説明ではwebpackのみ記載があり、Viteや他のバンドラーの説明に関しての記載がありません。
StorybookからReact Cosmosに移行した背景
某プロジェクトにはStorybookがすでに導入されてました。
当時のStorybookにはコンポーネントのカタログ機能とは他に、Visual Regression Testing(以下、VRT)が導入されてました。VRTの導入に伴い、Storybook周りのファイル構成がかなり複雑になっていました。次第に、Storybookの起動に時間がかかったり、Storybookのストーリーの管理が大変になっていき、最終的にはStorybook自体が保守されなくなってきました。
そこでStorybookとは違い、コンポーネントのカタログ機能がシンプルなツールはないか模索することになりました。その時に調査して選択肢として挙がったのがReact Cosmosになり、実験的にReact Cosmosを導入することにしました。
実験的に導入した結果、React Cosmosはテストの拡張性が低いものの、コンポーネントのカタログ機能の使い勝手がよかったのでReact Cosmosに移行となリました。
現在のReact CosmosとStorybookの棲み分け
現在では、React Cosmosはコンポーネントのカタログ機能がStorybookと比べてシンプルで使い勝手がいいことから、コンポーネントのカタログ機能を利用することにしました。
一方、Storybookではコンポーネントのカタログ機能とは他に、スナップショットテストやVRTなどのテストの導入がしやすく、テストの拡張性が高いです。
そのため、Storybookに導入されていたVRTはReact Cosmosに移行せず、Storybookのままとなりました。
移行してよかった点
- コンポーネントのカタログとして機能が標準で備わっている機能で十分に成り立つ点
標準で備わっている機能でコンポーネントのカタログとして機能が十分に成り立つため、使い勝手が良いです。
標準で備わっている機能の中でよかった点を例に挙げると、下記3点になります。
・Control Panel機能である、Propsの値をReact CosmosのUI上から視覚的に操作できる機能
・UI上でReact Cosmos登録されているコンポーネント一覧を確認できる
・ViewportもCustomできる点
- Fixtureファイルの書き方がReactで書ける
Fixtureファイルとは React Cosmosに登録するコンポーネントのファイルのことを指します。
Storybookで言うところのストーリーに当たります。
FixtureファイルはReactで書くことができ、Fixture内でReactのHooksも使用可能になります。
詳しくはURLを参照(https://github.com/react-cosmos/react-cosmos/blob/main/docs/README.md#component-fixtures)
それに対して、Storybookのストーリーの書き方はCSF(Component Story Format)方式もしくはStories Of APIを使用する方式(非推奨)のどちらかで書く必要があり、どちらもStorybookならではの書き方になります。そのため、スートリーの書き方に慣れる必要があり、初期の学習コストが高くなります。
ゆえに、StorybookよりReact Cosmosの方が初期の学習コストが低いと言えるため、この点も移行して良かった点になります。
移行するにあたって、想定していなかった問題
React Cosmosに関する記事がとても少ない印象でした。
参考にする記事としてもReact Cosmos公式documentぐらいしかなく、React Cosmosを導入するか否かの判断材料が少なかったことを記憶しています。
またReact Cosmosに関する技術情報の記事が少ない影響で、導入時・導入後のエラー解決方法も二つしか方法がありませんでした。その二つが下記の2点になり、移行・導入に四苦八苦したのが想定していなかった問題でした。
・React Cosmos公式のdocumentを参考
・React CosmosのGitHubのissueを見て、同じエラーが報告されていないかを確認
おわりに
StorybookからReact Cosmosに移行した話を紹介しました。
React Cosmosの導入を考えている方のご参考になれば幸いです。