Storybookの便利なaddon機能のご紹介 | スペースマーケットブログ

こんにちは、最近バチェラーseason1を見始めたら止まらなくなり気づいたら土日をフルに使って全話見終えていました、フロントエンドエンジニアの荒田です。 スペースマーケットではスタイリングされたコンポーネントを確認するためにStorybookを導入しています。 (Storybookについては以前書いた記事をご参照ください) 今回はそのStorybookの便利なaddon機能について紹介したいと思います。 addonの基本的な導入方法 まず、導入したいaddon機能をインストールします。 （例） npm i -D @storybook/addon-viewport .storybook/addons.jsファイルを作成し、導入したいaddonを読み込みます。 import '@storybook/addon-viewport/register'; どのaddonも導入方法は基本的に同じになり

[uehaj]

デバイスごとのUIを確認することができます。（画像は開発中のもの）