Vue.jsの文脈でStorybookというものを見つけ、ReactやReact Nativeでも使えるらしいことやGitHubスター数が2万超えで半端ないことを知りました。手始めに触ってみることにしました。
以下の数ステップで準備が整います
1$ react-native init StorybookExample
2$ cd StorybookExample
3$ npm -g i @storybook/cli
4$ getstorybook
5
6 getstorybook - the simplest way to add a storybook to your project.
7
8 • Detecting project type. ✓
9 • Adding storybook support to your "React Native" app. ✓
10 • Preparing to install dependencies. ✓
11
12...
React Nativeのアプリケーションだということを検知してセットアップをしてくれるようですね。getstorybook後にnpm run storybookせい、という指示があるので実行してみましょう。
1$ 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.
とあります。ファイルを追加したみたいです。確かにプロジェクトディレクトリに新しいファイルなどが追加されていました。
1storybook
2├── addons.js
3├── index.android.js
4├── index.ios.js
5├── index.js
6├── stories
7│ ├── Button
8│ │ ├── index.android.js
9│ │ └── index.ios.js
10│ ├── CenterView
11│ │ ├── index.js
12│ │ └── style.js
13│ ├── Welcome
14│ │ └── index.js
15│ └── index.js
16└── storybook.js
17
184 directories, 11 files
実行してくれ、とあるので実行します。
1$ react-native run-ios
なんかでた。ブラウザ側を触るとモバイル側も連動してますね。何か連携しているんでしょうか？
なるほど、コンポーネントカタログみたいなやつかな！？
storyを追加してみる
物は試し、stories/index.jsに以下のようなコードで2個ほどコンポーネントを追加してみました。
1storiesOf('Components', module)
2 .add('背景色があるView', () => {
3 return (
4 <View style={{ flex: 1, backgroundColor: '#FFAAAA'}}>
5 </View>
6 )
7 })
8 .add('アバターとコメント', () => {
9 return (
10 <CenterView>
11 <TouchableOpacity style={{ backgroundColor: '#FFF', width: '100%', flexDirection: 'row', padding: 16, backgroundColor: '#EEE' }}>
12 <Image style={{ height: 60, width: 60, marginRight: 16 }} source={{uri: 'https://blog.piyo.tech/images/prof.png'}} />
13 <View style={{ backgroundColor: 'transparent', flex: 1, height: 100 }}>
14 <Text>
15 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.
16 </Text>
17 </View>
18 </TouchableOpacity>
19 </CenterView>
20 )
21 });
そしてシミュレータをリロードしてみると、うん、追加されてますね。
なるほど、なんとなくわかってきた。
オワリ
なるほどコンポーネントをたくさん作っておいて、スタイルガイド的に使うのかなー？React Nativeアップデートのときとかに便利かもなーなどと思いました。
だけど一人で開発していることが多いからしばらくはなくても大丈夫そうです。