Storybook でよく使う Addon

suzuki

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

Actions

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

ボタンをクリックすると 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 を使用すると便利です。

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

Backgrounds を使って stories の背景色を変える

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

まとめ

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

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


suzuki

投稿者 suzuki

HTML/CSS のマークアップから始まり、現在は React や TypeScript を使ったコンポーネント実装をすることが多いです。

淡々と実装するだけではなくコミュニケーションを取りながら、チームとしてプロジェクトを前に進めることを意識しています。

最近は会社の成長へのコミットに関心があり、組織・チーム全体で強まるためにはどうするのだろう?ということを考えています。