React Storybook - Reactアプリのコンポーネント開発にお供に！
Reactの開発ではデータの状態が大事で、保存しておかなければリロードすると元に戻ってしまいます。これでは状態が遷移していく中で開発していると何かと厄介です。かといって、そのためにデータを変更するのも面倒です。 そこで使ってみたいのがReact Storybookです。ストーリーという単位を使ってデータの状態を分けて管理できるようになります。
React Storybookの使い方
デモのTodoアプリです。
データを追加すると、それがロガーに表示されます。
左側のメニューから選択するとデータが表示されている版が選択できました。
さらに未完了タスクの表示を選択しました。
こちらは2つのタスク、ステータスによるフィルタリング機能がついた画面です。
消し込みがかかった版です。
React Storybookを使うことで、UIコンポーネントを分割してその結果を確認しながら開発できるようになります。さらにデータの状態によってUIがどのように変化するかをクリック一つで見られるようになります。Reactアプリ開発のお供に良さそうです。
React StorybookはReact/JavaScript製のオープンソース・ソフトウェア（MIT License）です。