はじめに 筆者が今携わっているプロジェクトでは Vue.js(以後は Vue)が使われています。 そのプロジェクトで一度 「Storybook」 というツールを導入しようとしたことがありました。結局導入は見送ることになりましたが、その時に Storybook に良い手応えを感じたため、あらためて簡単なプロジェクトを作り Storybook を試してみました。 下記がデモです。 デモ 1(プロジェクト) デモ 2(プロジェクトの Storybook) Storybook 自体まだまだ新しいプロジェクトのため、ネット上にも情報は多くありません。この記事を読み Storybook に興味を持ってくれる人が増え、ネット上に Storybook の情報が増えていけばいいな、と思います。 この記事の対象読者 Vue を使って開発をしている人 / する予定のある人 / 興味のある人 Vue のプロジェク
まさあき(@masaaakikunsan)です。 最近よく、「Storybookを導入しよう」「Storybookがいい」と言う話は聞きますが、意外となぜ必要なのか、どう使うのか、という記事がみつからなかったので、基本的な使い方をサンプルと共に紹介します。 TL;DR StorybookでUIコンポーネントのカタログを作ることができる カタログのおかげでデザイナーと認識の齟齬が生まれなくなる アドオンを追加するとStorybookがかなり便利アイテムになる Storybookとは ざっくり言うとコンポーネントのカタログです。 コンポーネントライブラリの参照ができ、各コンポーネントの様々な状態の表示などができるものとなります。 また、アプリ外で実行されるため、UIコンポーネントを単独で開発でき、コンポネの再利用、テストの容易性、開発スピードを向上させることができるのが魅力です。
Storybook is the best way to develop modern component-based UI’s in React, React Native, and now Vue. It helps engineers and designers efficiently and interactively build, browse, review, and test user interfaces. With over 12,000 stars on GitHub, 400k/mo downloads on NPM, and used by industry leaders such as Airbnb, Slack, Squarespace, and NY Times, it’s the world’s favorite open-source UI develo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く