React NativeでStorybookを使ってUIコンポーネントを管理

React NativeでのStorybookの使い方です。

StorybookはReacやVueなどのUIコンポーネントの管理を簡単にしてくれるツールです。ざっくり言うと、コンポーネントを表示・確認するデバッグルームのようなものを用意します。ここでUIコンポーネントの表示の確認・調整・管理を行います。

ロジック・データとデザインを分離して表示することで、UI表示のみに注目した状態で監理できるようにしておきます。このことにより、仮想環境の用意やデバッグツールの利用などに苦戦してしまうエンジニア以外の人にも、表示の確認や調整がしやすくなります。デザイナーやテスター、ディレクターやクライアントなども含まれるでしょう。

React Nativeでも利用することが出来ますので、今回はそちらを紹介します。Storybook for React Nativeを使って、アプリにUIコンポーネント管理ツールを用意する方法の紹介です。Storybookをアプリ内に設置する方法と、別でstorybook serverを用意する方法の2つが有りました。

ただ、React NativeでStorybook for React Nativeを使う方法は、あまり使いやすい環境とは言えないと感じました。どうやら、React Native for Web と React版のStorybookを使うのが良さそうです。今度やってみたら別で記事にします。

概要

ドキュメント
インストール
エントリーファイルを用意
アドオン定義ファイルを作成
ストーリーブックにアクセス
ストーリーを記述
Storybook サーバーによる起動

ドキュメント

https://storybook.js.org/docs/guides/guide-react-native/

インストール

いつもどおりです。npmやyarnを使ってインストールしましょう。

npm install --save-dev @storybook/react-native

エントリーファイルを用意

ますはstorybookディレクトリをプロジェクトに作成します。ここにStorybook用のファイルをまとめて作成しれば管理しやすくなります。

つぎにエントリーファイルとなるstorybook/index.jsを作成します。内容は以下です。

import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';

import './rn-addons';

// import stories
configure(() => {
  require('./stories');
}, module);

// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

// If you are using React Native vanilla write your app name here.
// If you use Expo you can safely remove this line.
AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);

export default StorybookUIRoot;

このファイルでは必要なモジュールのインポートを行います。そのうえで、利用するアドオンを定義したファイルrn-addonsのインポート。ストーリーを定義したファイルのインポートをstoriesディレクトリから行います。

アドオン定義ファイルを作成

storybook/rn-addons.jsを作成します。このファイルにStorybookで利用するアドオンを定義します。アドオンはブラウザ等にあるものと同じで追加機能みたいなものです。ログ機能だったり、メモ機能だったり色々です。

例えば以下のようにします。React Nativeの場合はWebで利用するときとは別で用意されたAddonになるので注意しましょう。

import '@storybook/addon-ondevice-knobs/register';
import '@storybook/addon-ondevice-notes/register';

ストーリーブックにアクセス

React Nativeで利用する際は、Storybookを表示するスクリーンを用意します。デバッグルームみたいなものをアプリ内に用意する必要があります。Devモードなら表示するとか、開発中は設置しておいてビルドするときに削除するとかしたらいいのでしょうか。ちょっと製品のソースコードに混ざってしまうのはイマイチですね。

任意の画面を用意して以下のようにstorybookのエントリーポイントを表示します。 StorybookのエントリーポイントはViewコンポーネントと同じように利用できます。

export default from './storybook';

ストーリーを記述

いよいよStorybookで管理するためのストーリーファイルを作成します。エントリーポイントに定義したようにstoriesディレクトリに定義します。

storybook/stories/index.jsに以下のファイルを作成します。ここに任意のコンポーネントをimportして、表示するようにすればStorybookにリストされます。

Storybookの画面からアクセスして、表示・管理ができるようになりました。こんな感じで各コンポーネントのストーリを定義していくことで、管理ができるようになります。

Storybook for ReactNativeではまだstoriesOfによる定義しかできないようです。ゆくゆくはクラスによるストーリーの定義方法などもサポートされるようです。

import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { View, Text } from 'react-native';

const style = {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
};

const CenteredView = ({ children }) => <View style={style}>{children}</View>;

storiesOf('CenteredView', module).add('default view', () => (
  <CenteredView>
      <Text>Hello Storybook</Text>
  </CenteredView>
));

Storybook サーバーによる起動

アプリ内にスクリーンを用意する以外にも、専用のサーバを立ち上げてそちらを端末で起動する方法も有ります。storyBook-serverをインストールして使います。

使ってみましたが、storybook-serverだけではストーリーの確認はできず、並列でアプリケーションを実行する必要が有ります。 storybook-serverとdevelopment-serverを同時に動かしておく必要が有り、ちょっと大げさだなと感じました。

拡張子やディレクトリなどの条件で、storybook-serverにストーリを定義したファイルを渡すことができます。そのため、アプリのソースコードにstorybook用スクリーンやリンクを設置しないですみます。ソースコードは汚れませんが、都度サーバを2つ立ち上げるのが手間に感じました。わりと用意するハードルが高いと感じました。