PIYO - Tech & Life -

storybook.jsとは何か？何も知らずに触ってみた。

ReactNative JS Storybook

Vue.jsの文脈でStorybookというものを見つけ、ReactやReact Nativeでも使えるらしいことやGitHubスター数が2万超えで半端ないことを知りました。手始めに触ってみることにしました。

Storybook: UI component explorer for frontend developers
Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
storybook.js.org

以下の数ステップで準備が整います

$ react-native init StorybookExample
$ cd StorybookExample
$ npm -g i @storybook/cli
$ getstorybook

 getstorybook - the simplest way to add a storybook to your project.

 • Detecting project type. ✓
 • Adding storybook support to your "React Native" app. ✓
 • Preparing to install dependencies. ✓

...

React Nativeのアプリケーションだということを検知してセットアップをしてくれるようですね。getstorybook後にnpm run storybookせい、という指示があるので実行してみましょう。

$ npm run storybook

すると何やらローカルホストの7007ポートでサーバーが立ち上がった様子。見てみましょう。

よくよく読んでみると、

We’ve added some basic stories inside the storybook/stories directory. A story is a single state of one or more UI components. You can have as many stories as you want. Basically a story is like a visual test case.

とあります。ファイルを追加したみたいです。確かにプロジェクトディレクトリに新しいファイルなどが追加されていました。

storybook
├── addons.js
├── index.android.js
├── index.ios.js
├── index.js
├── stories
│   ├── Button
│   │   ├── index.android.js
│   │   └── index.ios.js
│   ├── CenterView
│   │   ├── index.js
│   │   └── style.js
│   ├── Welcome
│   │   └── index.js
│   └── index.js
└── storybook.js

4 directories, 11 files

実行してくれ、とあるので実行します。

$ react-native run-ios

なんかでた。ブラウザ側を触るとモバイル側も連動してますね。何か連携しているんでしょうか？

なるほど、コンポーネントカタログみたいなやつかな！？

storyを追加してみる

物は試し、stories/index.jsに以下のようなコードで2個ほどコンポーネントを追加してみました。

storiesOf('Components', module)
  .add('背景色があるView', () => {
    return (
      <View style={{ flex: 1, backgroundColor: '#FFAAAA'}}>
      </View>
    )
  })
  .add('アバターとコメント', () => {
    return (
      <CenterView>
        <TouchableOpacity style={{ backgroundColor: '#FFF', width: '100%', flexDirection: 'row', padding: 16, backgroundColor: '#EEE' }}>
          <Image style={{ height: 60, width: 60, marginRight: 16 }} source={{uri: 'https://blog.piyo.tech/images/prof.png'}} />
          <View style={{ backgroundColor: 'transparent', flex: 1, height: 100 }}>
            <Text>
              We've added some basic stories inside the storybook/stories directory. A story is a single state of one or more UI components. You can have as many stories as you want. Basically a story is like a visual test case.
            </Text>
          </View>
        </TouchableOpacity>
      </CenterView>
    )
  });

そしてシミュレータをリロードしてみると、うん、追加されてますね。

なるほど、なんとなくわかってきた。

オワリ

なるほどコンポーネントをたくさん作っておいて、スタイルガイド的に使うのかなー？React Nativeアップデートのときとかに便利かもなーなどと思いました。

だけど一人で開発していることが多いからしばらくはなくても大丈夫そうです。