Storybook駆動開発はいいぞ

Storybook駆動開発はいいぞ:

はじめに

＊こちらはオプトテクノロジーズの社内勉強会LT資料になります
LT資料ってあえて書いたのは資料が短いので許してねという前置きです

---

Storybookとは

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

公式doc より引用

---

結局なによ

ReactなどのViewライブラリで作成したコンポーネントを単独で描画して、見た目をカタログちっくに見れる画面作成のためのライブラリ。

コンポーネントにわたす状態を固定値で入れたりして見た目のコントロールを自由に出来るため、異常系など含めたいろいろなUIパターンを検証するのに非常に効果的。

ローカルで開発する時にサーバー（モック含む）に意図したデータを返させるようにするのは大変！という開発中の悩みが解決！最高！

---

コンポーネントライブラリでstorybookを公開してるものもあるので参考までに。
http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

---

どういいのか

• 導入は簡単
• 使うのも簡単
• コンポーネントの異常系の状態を簡単に表現しながら開発できる
  
  
  • コンポーネントのデータ量が多いときにどうなるかとか
  • バリデーションエラーの状態とか
  • ローディングとか
• 見た目の実装と状態管理やAPIリクエストなどのロジックの実装を完全に分業しやすい
  
  
  • 今まではロジックがないと作りにくい部分が多かったと思うが、データを自分で簡単に入れながら作れるので協業がめっちゃしやすい
• 開発中に「あのコンポーネント使いまわそうかな」と思った時に簡単に取り込める
  
  
  • コンポーネントの使い方まで含めてコードで表現されることになるので、他の画面から「コピペしなきゃ・・・」みたいなのがなくなる
  • 使い方も統一される
• visual testと相性がよく、見た目のリグレッションテストを簡単に導入できる
  
  
  • 
    reg-suit + zisuiがめっちゃ捗る
  • プルリク出したらコンポーネントの見た目をmasterブランチのものと比較してその差分を通知してくれる
  • サンプルのプルリク： https://github.com/sisisin-sandbox/try-visual-testing/pull/2
    

---

デモ

（時間があれば）

---

さいごに

悪いことは言わん、Storybookを入れろ！