Storybookを導入する際にやるべきこと3選

Storybookがバージョン7がリリースされたため、加筆、修正しております。 またコードジェネレーターとしてhygenを推奨していましたが、追記当時2023/05時点ではPlopを推奨します。 理由は、PlopはESM対応が自然とできるからです。 はじめに フロントエンドエンジニアとして活動するとおそらく耳にするであろうStorybook。 その有用性が語られることもあれば、時に悪名も耳にすることもあるかと思います。 Takepepeさんが以下のような"あえてStorybookを使わない理由はなんですか"というアンケートを取られておりました。 結果は、「面倒・メンテナンスコストが高い」でした。 実際に私も先輩に、メンテナンスコストが想像より辛く、いいものではなかったと言われたことがありました。 ですが、私は担当したプロジェクトでStorybookの導入に踏み切りました。 それは、これから

[syque]

“Storybookのためにディレクトリ構造を作らないこと Storybookは99%自動生成させること Storybookからスナップショットを自動生成させること”

[tadatakuho]

“ その有用性が語られることもあれば、時に悪名も耳にすることもあるかと思います。 Takepepeさんが以下のような"あえてStorybookを使わない理由はなんですか"というアンケートを取られておりました。”

[shingo-sasaki-0529]

コンポーネントとその Story を同じディレクトリに置くの、アプリケーションコードとテストコードが同居するのと同じだから、ディレクトリベースで各種ツールの設定するのが面倒になるのはあるんだよねぇ。