概要 Atomic Designを用いたフロントエンドの開発を行う中で、 「このコンポーネントって既にあるんだっけ?」と思い、プロジェクトの中を探し回ることがありました。 また、それっぽいファイルを見つけても、このコンポーネントはブラウザ上でどのように表示されるのかはぱっと見わかりません。 現状では、Vue.js devtoolsなどを使ってコンポーネント名を特定して、 実際の.vueまたは.tsxファイル名を照らし合わせる必要があります。 そんな中、Storybookがいいという噂を見かけたので、早速試してみました。 作業環境 Vue.js・・・3.2.45 storybook/vue3・・・6.5.15 etc.. Storybookとは UIコンポーネントとページを分離して構築するためのフロントエンドワークショップです。 今までは、コンポーネントの挙動を確認するには、アプリ全体を起動
![Storybookを触ってみたらとても良かった - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/11f23022d708df753ea47bafcb10c5b5fae128bc/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9U3Rvcnlib29rJUUzJTgyJTkyJUU4JUE3JUE2JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJUUzJTgyJTg5JUUzJTgxJUE4JUUzJTgxJUE2JUUzJTgyJTgyJUU4JTg5JUFGJUUzJTgxJThCJUUzJTgxJUEzJUUzJTgxJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02YzdjNzg5NWYyYjcwNjE5MmZjYmViNmQ5MzEyN2Q0Yw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwa290b2J1a2k1OTkxJTIwaW4lMjBXYW5vJUU2JUEwJUFBJUU1JUJDJThGJUU0JUJDJTlBJUU3JUE0JUJFJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jOWY1NGUyMWYyNWUxYzA1OGY4OTBlYjhjZjJhZDQ1Zg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D1dba974a6b8c1186eaaec098a790285d)