Storybook First な開発のススメ
Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ
Storybook を使うときに気をつけていること
Gaji-Labo では React コンポーネント開発時に Storybook を導入し Storybook 駆動開発をするケースが多いです。その際に気をつけていることをまとめました。 実際のコンポーネントのディレクトリ構造に合わせるStorybook の階層も実際のディレクトリ構造に合わせて、無秩序に置かないようにしています。 メインで開発しているメンバーだけが見るものとは限らないので、途中参加の開発者やデザイナーなどにも分かりやすいように構築します。 また、Storybook を見て、コンポーネントの全体像がざっくり分かるようにする目的もあります。 Addon Knobs を使ってコンポーネントの持つ props を分かりやすくするAddon Knobs を使用すると、Storybook UI を使ってコンポーネントの props を動的に編集できます。 直接実装を読みにいかなくとも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
