Storybook でよく使う Addon

こんにちは、Gaji-Labo フロントエンドエンジニアの鈴木です。
Gaji-Labo では React コンポーネント開発時に Storybook を導入するケースが多く、Storybook にはいつもお世話になっています。
今日は、Storybook でよく使う Addon について書いていきます。

Actions

コンポーネントに渡された onClick や onChange などのログを確認できます。
意図した通りに onClick が実行されているかを確認したりするのに使っています。

https://storybook.js.org/docs/react/essentials/actions

Knobs

Knobs を使うとStorybook UI を使ってコンポーネントの props を動的に編集できます。
直接実装を読みにいかなくともコンポーネントの機能や振る舞いがある程度分かるように Knobs を使用しています。
見出しのテキストやボタンラベルなど Chrome DevTools で編集もできますが、Knobs を使うとより簡単にできます。

https://github.com/storybookjs/storybook/tree/next/addons/knobs

Backgrounds

コンポーネントが使用される場所の背景色が複数の場合もあると思います。その状態を Storybook 上で確認したい時に Backgrounds を使用すると便利です。

コンポーネント単体の状態で確認でき、コンポーネントが持つべき背景色の当て忘れなどに気付いたりできます。

https://storybook.js.org/docs/react/essentials/backgrounds

まとめ

今回紹介した Addon はレビュー時にコンポーネントを確認するのにも役立ちますし、エンジニア以外のメンバーがコンポーネントの動作を確認をする際にも有効な Addon です。
他にもドキュメントが書けたり、Viewport を設定できる Addon もあるので、また今度ブログにまとめたいと思います。