WWW無人速報

Storybookってなんだ？ 最近よく聞くけど実際どうなの？

Storybookはコンポーネントカタログツールだよ UIコンポーネントを独立して開発・テストできる

>>7 それって便利なの？ わざわざ導入する意味あんの？

>>12 かなり便利だよ コンポーネントの再利用性が上がるし ドキュメント化もできる デザイナーとの連携もスムーズになる

>>19 ドキュメント化ってどういうこと？

>>23 コンポーネントの使い方やpropsの説明をMarkdownで書ける サンプルコードも載せられるからドキュメントとして最適

>>33 なるほど それは便利かも でも導入するの大変そう...

>>40 全然大変じゃないよ npx sb init するだけ Reactなら設定もほとんど要らない

>>42 マジで？今度試してみるわ サンキュー

デザイナーとの連携ってどういうこと？

>>53 Storybookにはデザインシステムを反映できる デザイナーも開発環境なしで Web上でUIを確認できるようになる

>>61 へー それいいね うちの会社もデザインシステム導入検討してるから Storybook使えそう

>>62 おすすめだよ Storybook使えば 開発者とデザイナーのコミュニケーションも改善するよ

Storybookってオープンソースなの？

>>71 そうだよ MITライセンスだから無料で使える

>>79 無料なのはありがたいね 商用利用も可能？

>>82 もちろん可能 大企業でも Storybook 導入してるところ多いよ

>>84 ふーん 導入事例とかある？

>>90 Airbnb、Slack、Dropboxとか有名どころが使ってる 日本だとSmartHRがStorybook活用してるよ

>>99 そんな有名どころが？ すごいな

StorybookってReact以外でも使えるの？

>>107 React だけじゃなくてVue、Angular、Svelte とか主要なフレームワーク・ライブラリに対応してるよ

>>114 ほー汎用性高いんだね うちはVueだから助かる

>>120 Vueの場合はVuepressという選択肢もあるけど Storybookのが使いやすいと思う

>>130 なんでそう思うの？

>>134 Vuepress はドキュメント特化だけど Storybook はコンポーネント開発に特化してるから あとAddonが豊富

Addonって何？

>>137 Storybook の機能を拡張するプラグインみたいなもの アクセシビリティチェックとかできる Addon もあるよ

>>147 アクセシビリティチェックまでできるのか Storybook万能すぎない？

>>155 Storybook単体ですべてをカバーするのは難しいけど Addon使えば開発をかなり効率化できるよ

Storybookってコンポーネントのテストもできるんでしょ？

>>175 できるよ StoryshotsっていうAddonを使えば スナップショットテストが簡単に書ける

>>178 スナップショットテストか それも魅力的だね

>>187 ビジュアルリグレッションテストもできるよ Chromatic っていうクラウドサービスと連携できる

>>194 ビジュアルリグレッションは重要だからね それができるのは嬉しい

>>204 Storybookの機能奥が深いな

Storybook使うとパフォーマンスとか落ちない？

>>211 開発環境でしか使わないから 本番環境のパフォーマンスには影響ないよ

>>212 なるほど理解した

導入検討してみるわ