React Native Tech Blog

supported by maricuru (旧maricuru tech blogです)

React NativeにStorybookを導入したらUI開発がめちゃめちゃ捗った話

Storybookとは

StorybookはUI開発用の環境で、アプリ自体を立ち上げずにUIコンポーネント単位でレイアウトや挙動の確認をすることができます。
また、どんなコンポーネントがあるのかを一覧するための、コンポーネント図鑑のようにも使えます。

導入方法は先人が丁寧に書いてくれているので、そちらを参考にしてもらうとして...
今回は、弊社でStorybook導入によって、どんなメリットがあったかをご紹介したいと思います。

f:id:wasan:20180529200046p:plain

Storybook導入のメリット3つ

1. UI開発をデザイナーと分業できる

幸いにもデザイナーが元エンジニアということもあり、デザイナーにもjsファイルを編集してもらっています。

デザイナー:SketchでUIデザイン エンジニア:UIコンポーネントを切り出してざっくり開発 デザイナー:レイアウト調整

といった流れで作業することが多いです。

コンポーネントをどの粒度で切り出すか、などはエンジニアの知見が必要なので、コンポーネントをざっくり作るところまではエンジニアがやります。
慣れてきたら、一からデザイナーがコンポーネントを作ってもいいと思います。

この段階では機能としては動くけど、レイアウトはざっくり、といった完成度です。

それをデザイナーに渡して、きれいにレイアウト調整してもらいます。

作業が分担できることで、エンジニア側は機能開発に注力できるようになりました。

2. コンポーネントが疎結合になっていく

Storybookを使うと上記のような作業分担のメリットがあるので、 エンジニア的にもなるべくStorybookにコンポーネントを載せていこう、というモチベーションが湧きます。

Storybookにコンポーネントを載せる際に、他のコンポーネントと蜜に結合しちゃってると、面倒なことになります。
なので自然とコンポーネントを疎結合にしていこう、というモチベーションが働くようになりました。

3. 変更の確認が爆速に

UIコンポーネントによってはアプリの奥底にあるものもあります。
プロフを開いて→編集を開いて...のような場所のUIの場合、変更の度に奥底まで遷移していくのは手間になります。

StorybookならUIコンポーネント単位で開くことができるので、変更の内容が一発で確認できます。
特にアプリの奥底にあるUIの開発では、効果大でした。

以上になります。
導入には少し手間がかかりますが、その後の効率化を考えると導入のメリットは大きかったな!と感じています。