記事に書いてあること
- 既存の React プロジェクトに Storybook を導入する方法
- コンポーネントを、Storybook に表示させるための最低限の設定
- Tailwind CSS を Storybook で使用する方法
開発環境
以下、事前にインストール、セットアップしてあるものです。
- Vite
- Tailwind CSS
- React
- JavaScript
Storybookとは？
簡単に言うと、見た目に特化したコンポーネントの開発、確認ができます。
React だったら、コンポーネントに分けて開発を行なっていくと思うのですが、それらをカタログのように確認できる楽しく、便利なツールです。
渡された値に応じた見た目の変化を確認できるので、複雑なコンポーネントの開発に便利です。
▼ お天気アプリを作っていて、天気の種類によって表示を変えたかったので、Storybookを用いて効率的に開発を行いました！
目標物
ここからは Storybook を使う方法を学ぶために、最低限必要なファイルや記述について紹介します。
シンプルですが、props で受け取った値を用いて、テキストを表示させたり、背景色が変わるコンポーネントの作成をします。そして、Storybook で複数のパターンを表示させるところまでやっていきます。
では、次のセクションからドキュメントを確認しながらインストール、設定、記述を行っていきます。
Storybookのインストール
Docs: Docs | Storybook
React と Vite を利用しているので、上記のドキュメントを確認しつつ導入します。
In a project without Storybook
Storybookをまだ導入していないプロジェクトへのインストールなので、こちらのコマンドを実行
npx storybook@latest init
そうすると、以下のように Storybook がインストールされ、コンポーネントを確認できるページが立ち上がります。
▼ 開かれた画面
そして、.storybook、src/stories がディレクトリに追加されます。
▼ 緑色の部分
.storybook は設定ファイルで、src/stories はサンプルです。
Storybook の確認（飛ばしてOK）
先ほどのこちらの画面ですが、src/stories の中身が、左サイドバーに反映されています。
Example の Button を確認してみます。
ボタンのコンポーネントが表示されて、その下に、設定できる props が表示されています。
その下に STORIES とあって、そこを確認すると、Primary、Secondary、Large、Small...とあり、コンポーネントが微妙に違うのがわかります。
このように、Button というコンポーネントがあって、props に応じて見た目を変えたものを作成、一覧で表示・確認ができます。
そしてこれらのボタンはなんと1クリックでコンポーネントをコピーし、プロジェクトに反映させることができます。便利ですね。
▼ コンポーネントのコードをコピーできる...！
必要最低限のファイルを作成する
では、コンポーネントを作成し、Storybook で表示させるための最低限のファイルを用意していきます。
まず、src/myStories ディレクトリを作成します。
その中に Text.jsx、Text.stories.jsというファイルを作成します。
Text.jsx は、普段通りの React のコンポーネントを記述するファイル。
Text.stories.js は、Text.jsxを Storybook で確認するために必要な内容を記述するファイルです。
これら 2 つがないと Storybook には表示されません。
src/myStories について
現在のプロジェクのファイルと区別するため、ディレクトリを作成していますが、なくても良いです。
最低限の記述を追加する
export default function Text({ content }) {
return <p>Text: {content}</p>;
}
// Textコンポーネントをインポート
import Text from "./Text";
// デフォルトの表示設定
export default {
// グループ/コンポーネント名
title: "MyStories/Text",
// 使用するコンポーネントを指定
component: Text,
parameters: {
// レイアウト設定項目（Storybook でセンターに配置するか、横幅いっぱいに設定するかなど）
layout: "centered",
},
// コンポーネントの Docs （コンポーネントの一覧や props の一覧などが見れるもの）を自動で生成してくれる
tags: ["autodocs"],
};
// デフォルトのコンポーネントの設定
export const FirstStory = {
args: {
// propsに渡す内容
content: "FirstStory",
},
};
上記を記述すると、以下のようになるはずです。
props に応じて色を変える
いくつかコンポーネントを増やして、props に応じて内容を変更して Storybook に表示してみます。テキストを props に渡すだけのシンプルなものです。
コンポーネントを2つ追加する
import Text from "./Text";
export default {
title: "MyStories/Text",
component: Text,
parameters: {
layout: "centered",
},
tags: ["autodocs"],
};
export const FirstStory = {
args: {
content: "FirstStory",
},
};
+ export const SecondStory = {
+ args: {
+ content: "SecondStory",
+ },
+ };
+ export const ThirdStory = {
+ args: {
+ content: "ThirdStory",
+ },
+ };
▼ ↑を記述すると、Storybook はこのようになっているはずです。
props に応じて、UI を変更する
では次に、props に state で success、error を追加してそれに応じて色を変えてみます。
+ export default function Text({ content, state }) {
+ let css;
+ if (state !== "") {
+ css = state === "success" ? "bg-sky-200" : "bg-red-200";
+ }
+ return <p className={css}>Text: {content}</p>;
+ }
import Text from "./Text";
export default {
title: "MyStories/Text",
component: Text,
parameters: {
layout: "centered",
},
tags: ["autodocs"],
+ args: {
+ state: "",
+ },
};
export const FirstStory = {
args: {
content: "FirstStory",
},
};
export const SecondStory = {
args: {
content: "SecondStory",
+ state: "success",
},
};
export const ThirdStory = {
args: {
content: "ThirdStory",
+ state: "error",
},
};
ここまで記述して Storybook を見るとこのようになっているかと思います。
args の state が追加されたのはいいのですが、見た目の変化は見られません。
これは Tailwind CSS を Storybook で使いますよ、と宣言してないのでスタイルが変わっていません。 なので、Storybook に Tailwind CSS を入れ込みます。
Storybook で Tailwind CSS を 利用できるようにする
Docs: Storybook: Frontend workshop for UI development
色々ドキュメントに書いてありますが、環境が Vite という点を考慮すると、2. Provide Tailwind to stories をすればOKです。
@tailwind base;
@tailwind components;
@tailwind utilities;
import '../src/tailwind.css';
こうすれば、Tailwind CSS が使えるようになって、見た目もきちんと反映されます。
非常にシンプルですが、以上が最低限の Storybook の使い方です。
あとは Storybook をインストールしたときに作成された、src/stories のコンポーネントや設定ファイルを見てみるとふんわり、やんわり何をしているかがわかるかもしれません。
おさらい
ざっと流れを振り返ります。
- Storybook をインストールする
- いつも通りコンポーネントを作成
Text.jsx - Storybook に表示させるための
Text.stories.jsを作成、設定を記述 - Tailwind CSS を使うために、CSSファイルの作成、
preview.jsに記述を追加
以上です。
はじめての Qiita 投稿で、日本語力が低すぎるので誰かの参考になるかはわかりませんが、もしこの記事が Storybook 利用のヒントになれば幸いです。
触り始めてほんの数日なので、間違いなどありましたらご連絡ください。
関係ない話
あと、全然関係ないのですが、Storybook で一番「これすごーい！」と思ったことがありました。
以下のコードの className の書き方が便利でいいな...と。はい、ただそれだけです。
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
style={backgroundColor && { backgroundColor }}
{...props}
>
{label}
</button>