Storybookを導入する際にやるべきこと3選
Storybookがバージョン7がリリースされたため、加筆、修正しております。 またコードジェネレーターとしてhygenを推奨していましたが、追記当時2023/05時点ではPlopを推奨します。 理由は、PlopはESM対応が自然とできるからです。 はじめに フロントエンドエンジニアとして活動するとおそらく耳にするであろうStorybook。 その有用性が語られることもあれば、時に悪名も耳にすることもあるかと思います。 Takepepeさんが以下のような"あえてStorybookを使わない理由はなんですか"というアンケートを取られておりました。 結果は、「面倒・メンテナンスコストが高い」でした。 実際に私も先輩に、メンテナンスコストが想像より辛く、いいものではなかったと言われたことがありました。 ですが、私は担当したプロジェクトでStorybookの導入に踏み切りました。 それは、これから
Storybook First な開発のススメ
Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
