概要

以下の記事でStorybookなんてものが登場して、「なんだろ〜？」と思って試してみました。

Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた

ものすごくざっくりいうと、UIを考えるのに便利なツールって感じのようです。うん、とりあえず気になったので試してみます。

実行環境

macOS Mojave: 10.14.2
node: 10.8.0
npm: 6.2.0
React: ^16.8.0
@storybook/react: ^4.1.11

準備

まず、Reactプロジェクトを簡単に作成できるCLIツールをグローバルにインストールします。すでにインストール済みの場合は不要です。

npm i -g create-react-app

次に、Reactプロジェクトを作成します。先ほどインストールしたcreate-react-appを使用します。

create-react-app storybook-sample

プロジェクトの作成には少しだけ時間がかかります。プロジェクトの準備ができたら、Storybookを導入していきましょう。

Storybookの導入

公式サイトによる導入手順

上記の手順通りにやったらできました。手順通りなので、コードなんかは完全コピペです。本記事で解説はしません。

プロジェクト内でStorybookをインストールします。

cd storybook-sample
npm i --save-dev @storybook/react

他にbabel等もインストールします。

npm i --save-dev @babel/core
npm i --save-dev babel-loader

package.jsonのscriptsの箇所に以下のコードを追記します。

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

プロジェクト直下の.storybookディレクトリにconfig.jsを作成します。.storybookディレクトリがない場合は作成しましょう。

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

function loadStories() {
  require('../stories/index.js');
  // You can require as many stories as you need.
}

configure(loadStories, module);

プロジェクト直下の.storiesディレクトリにindex.jsを作成します。先ほどと同様に、.storiesディレクトリがない場合は作成しましょう。

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo';

storiesOf('Button', module)
  .add('with text', () => (
    <Button>Hello Button</Button>
  ))
  .add('with some emoji', () => (
    <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
  ));

次に、Storybookを実行します。どきどき。

npm run storybook

実行したら自動でブラウザが開き、無事に表示されましたー！！

自動で開かない場合は、localhost:9001にアクセスしてみてくださいね。

次は使い方を学んでいきたいところですね。公式サイトを見た感じ、React NativeやAngularなんかにも導入できそうです。使い勝手に期待！！

ここまで読んでくださりありがとうございました。

オタクプログラマーの趣味ブログ

オタクでありプログラマーである私の完全なる趣味のブログです。いろんなことに中途半端に手を出すので内容は浅め。

ReactでStorybookを使ってみる（1）

概要

実行環境

準備

Storybookの導入