できるようになること

• 前半
  • Storybookに作成したComponentを表示する
  • Storybookのaddonの使い方を掴む
  • Storybook上でのグローバルなCSSを対応させる
  • 画像ファイルをStorybookに反映させる
• 後半
  • styled-componentsでStorybookを使う
  • TypeScriptでComponentsを作る
  • Next.jsでStorybookを使う
  • 作ったComponentを公開する

こんな感じで,実際にコンポーネントを作りながらStorybookで確認していくハンズオン形式にしようかと思っています.こちらの本は前半の内容になります.

- Premise - （準備や前提知識）

• Reactの基礎知識は大体OK（コンポーネント思考がわかっていれば👍）
• Reactでアプリを作ったことがある
• npmとyarnがインストール済み

Storybookとは

アプリが動くLocal環境とは別の環境でsb専用のページを開き,コンポーネントごとにデザインや動作を確認することができます.アドオンを駆使することで,レスポンシブデザインやFigmaやXDの原案を表示（CSS propertyは表示されない）したり,コンポーネントのpropertiesやThemeの切り替えができたり,onClick時の動作確認もできます.さらにsbでコンポーネントを確認するページはデプロイすることも可能で,そのページを通してデザインの確認を行うこともできます.本当にいろいろできるので,この機能は必須級で便利だよとかいうのがあれば教えて下さい！

Storybookの始め方

create-react-appのReactのアプリで始める

今回はcreate-react-appで作成したアプリケーションで遊んでいきます.

	npx create-react-app storybook-lesson

これで,storybook-lessonというReactのフォルダができたと思います.

それでは,sbを導入していきましょう.

Storybookを導入

このコマンド一つで必要なファイルやサンプルを用意してくれます.最高かよ.

npx sb init

勝手にCRAのプロジェクトであることを検知していい感じに設定ファイルを作成してくれます🙆‍♂️

Storybookの簡単な仕様

仕組みがわからないと挫折しやすいので,簡単に説明します！

まず,拡張子がstories.jsxやstories.tsxのsb用のファイル（以下sbファイル）を作成するとそのsbファイルを読みこんでsbに表示してくれます.表示する手順はyarn srorybookのコマンドによってsbをビルドすればあとは自動で,http://localhost:6006にsbのページが表示されます！こんなの.

左には用意したsbファイルのコンポーネントが並びます.そして,右で実際にコーディングしたコンポーネントを確認することができます.

npx sb initのあとにyarn srorybookすれば,サンプルのsbファイルとコンポーネントがstoriesというフォルダがsrc内に作成されるので,そのファイルをsbで確認することもできると思います.

今回は自分でsbファイルを作成するので,サンプルのあるstoriesフォルダはすべて消去します！が,参考になる箇所も多いので,残しておいても構いません.