【Storybook8.1】ワンクリックでStory作成！俺たちはもうStoryを書かなくていいのかもしれない。
これでもろもろのセットアップが完了し、Storybookが立ち上がります。 step2 自動作成されたファイルを削除する。 上記のキャプチャにある<Button/>・<Header/>・<Page/>は自動作成されたExampleなのでそれに関わるファイルを削除しておきましょう。(ノイズだから削除するだけですので、ご自由に！) src/stories/以下のファイルを全て削除します。 一旦エラーが出ますが、表示するStoryがないだけなので無視してOKです。Step3以降でStoryを作成していきましょう。 Step3 対象のコンポーネントとそのStoryファイルを作成する。 お好きなコンポーネントと、そのStoryファイルを手書きしましょう。 (下記のコンポーネントはとても適当です...。) type Props = { children: string; disabled: boole
Storybookを導入する際にやるべきこと3選
Storybookがバージョン7がリリースされたため、加筆、修正しております。 またコードジェネレーターとしてhygenを推奨していましたが、追記当時2023/05時点ではPlopを推奨します。 理由は、PlopはESM対応が自然とできるからです。 はじめに フロントエンドエンジニアとして活動するとおそらく耳にするであろうStorybook。 その有用性が語られることもあれば、時に悪名も耳にすることもあるかと思います。 Takepepeさんが以下のような"あえてStorybookを使わない理由はなんですか"というアンケートを取られておりました。 結果は、「面倒・メンテナンスコストが高い」でした。 実際に私も先輩に、メンテナンスコストが想像より辛く、いいものではなかったと言われたことがありました。 ですが、私は担当したプロジェクトでStorybookの導入に踏み切りました。 それは、これから
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
