Storybookを導入する

storybook未経験の私が触ってみたところ、思いのほか簡単で、使い勝手も良かったので、皆さんも是非体験してみてください！

Storybookとは？

公式サイトの日本語訳

Storybookは、UI開発のためのツールです。コンポーネントを分離することで、開発をより速く、より簡単にします。これにより、一度に1つのコンポーネントで作業することができます。複雑な開発スタックを立ち上げたり、データベースに特定のデータを強制的に入れたり、アプリケーションを操作したりする必要なく、UI全体を開発することができます。

箇条書きにすると

• UI開発ツール
• 1つのコンポーネントずつUIを確認可能（これによりレイアウトのズレの原因などを素早く特定できる）
• storybook１つで完結するから、既存のアプリを汚すことなくUIコンポーネントを作成可能

ということです。

canvasタブ。ここでコンポーネントのpropsに入れる値をいじれるので簡単にテストできる

Docsタブを選択するとボタンをリストで確認可能

導入方法

これだけです。

npx storybook init

eslintを導入しているとeslintrcを変更してもいいか聞かれるのでyesを選択。
extendsにplugin:storybook/recommendedが追加されます

注意点が2つあります。

• 既存のプロジェクトのルートディレクトリ内で実行すること
• 事前にフレームワークやライブラリでセットアップ済みであること(react, anguler vue, emberなど)

公式のトラブルシューティングはこちら

使用方法

これだけです。

yarn storybook

これで自動でstorybookが立ち上がります。だめだった場合は表示されているurlにアクセスすればok

まとめ

まだまだ奥は深いですが、導入について簡単にまとめました。公式のインストールページではもう少し詳しく書いているので気になる方は見てみてください。
大規模でこそ大きなメリットがあると言われており難しそうに感じますが、導入は超簡単なので是非とりあえず触ってみてください！