Storybookが良い感じだゾ。

最近しんちゃんみたいなタイトルをつけるのがマイブームです。100DaysOfCodeの4日目です。

今日はstorybookを前々から試してみたかったので試してみました！すごく簡単に出来たのでみていきましょう！

Storybookってなんだ

storybookはコンポーネントのカタログのようなものだとよく言われています。デザイナーとのズレをなくすのによいと言われていますが、フロントエンドエンジニア同士にも良いと思います！
僕は普段の開発の時、もう1人コーディングが得意な友達とやりますがその子の作ったコンポーネントがどんな見た目になってるかはやはりコードレビューでは分かりにくいです。そんな時にも有効に使えるツールとなると思います！

導入してみよう！

とりあえず簡単に始めてみます！Reactのアプリケーションはcreate-react-appでサクッと作ったところにstorybookをいれてみます。

やることは全てドキュメントの通りに

$ npm i --save-dev @storybook/react

をして、プロジェクトのルート直下に .storybook と言うディレクトリを作ります。その中にconfig.jsを作ってください。

import { configure } from "@storybook/react";

function loadStories() {
  require("../stories/index.js")
}

configure(loadStories, module)

これでとりあえずプロジェクト直下にstories/ディレクトリを作って、その中に指定したindex.jsを作っていきます。複数ある場合は、このrequireを増やしていけば良さそうです。

import React from "react"import { storiesOf } from "@storybook/react";
import Button from "../src/Button"

storiesOf("Button", module)
.add("with text", () => (
  <Button text="Hello World" />
))
.add("with emoji", () => (
  <Button text="😄😄😄" />
))

これでコンポーネントのButtonは、storybook上で確認できそうですね。

Buttonコンポーネントは、

import React from "react";

const Button = ({ text }) => (
  <button style={{ color: "red" }}>{text}</button>
)
export default Button

のような簡素なSFCになっています。

確認してみよう！

ここまで出来れば確認してみましょう。package.jsonのnpm scriptsに

"storybook": "start-storybook -p 9001 -c .storybook"

この1行を足して、npm run storybookを実行してみましょう！

とても簡単に導入でき、実行まで出来たと思います。
皆さんも是非ドキュメントを豊かにして良い開発ライフを送ってください！

Twitter: @konojunya