Storybook Driven Development を試している - dev.to/jgs

前々から気になっていた Storybook を試して、プロダクトでも採用してみたので所感を書く。
ちなみに、 Next.js を使っているけれど、

_
.babelrc

の設定とかをやっていれば

_
start-storybook


_
-s ./

オプションで問題なく動いた。

動機
ここ数年、React を使って component ベースでウェブページを設計することを何度かやってきているが、未だにパスタコンポーネントが出来上がってしまう。そしてパスタコンポーネント群は往々にして開発がつらくなっていく...。

Storybook について
Storybook は動的にスタイルガイドを生成できるツールで、React だけではなく Vue や Angular にも対応しているよう。
_
@storybook/react

をインストールして CLI から起動するだけでホットロードしてくれる画面が立ち上がって便利だった。
サンプルは https://storybook.js.org/examples/ でみれる。

アトミックデザインについて
(これが全てだろう)
(有名な図)
Storybook を書いていくときにある程度項目立てをしていった方がいいだろう、と考えた。そこで思い出したのが Atomic Design だった。昔、知った時は分類がややこしそうだと思ったが、一旦従ってみることにした。

開発フロー
まずは小物から Atom として Storybook に書いていく。状態によって変化するコンポーネントは状態を列挙して、Storybook 上で確認できるようにしていく。まずは Atom と Molecules たちが仕上がってくる。
各パーツが仕上がったら API とつなぎ込む必要がある Organisms など、動きをつけていく。ここで役に立つのが recompose である。

recompose について
recompose は Lodash ライクな React (特に HoC)向けのユーティリティベルト。

_

こんな感じで見た目を司るコンポーネントのみを切り出せるように様々な関数が用意されている。
例えば React の Lifecycle 関数だと

_

こんな感じで分離させることができる。
また、これらは

_
compose

関数でこれらを組み合わせることもできる。
_

ゆくゆくは enzyme を使って Storybook 上で挙動の確認などもできるとよいのだけど、一旦 Storybook ではスタイルガイドに徹することにして
_

として、story では

_
import {Counter} from '...'

と読み込み、Pages からは

_
import Counter from '...'

と読み込むことで見た目のみのコンポーネントと、動き込みのコンポーネントに分けることができた。
見た目に関しては Storybook 上でパーフェクトに仕上がってるので、バチッと動くロジックを書けばうまいこと動くようになるので心地よかった。

今後の展望など
Storybook のドキュメントにも書いてある visual regression test をやってみたい。あとは、上にも少し書いた enzyme を使っての動きのテストなど。

まとめ
Atomic Design に従ったコンポーネント群を Storybook を使って見た目を仕上げてから、recompose を使って動きを足していく開発フローを導入してみている。
余談だけど、ざざっと Examples を見たら Wix の wix-style-react はものすごい使いやすいようにカスタムされていてすごかった...。オフィシャルに取り込んでほしいレベル。

#javascript
original: https://dev.to/jgs/storybook-driven-development---37b7
#20180217 #0217

関連ページとランダムに選ばれたページ

筆者について

jigsaw(ジグソウ、1991年6月12日-)は日本のプログラマ、会社代表。本名は小林貴也(こばやし たかや)。主にウェブ、フロントエンド領域で活動している。カミング・スーン合同会社の代表社員。
さらに詳しく

寄附について

面白かったらBTCETHでの寄附をお待ちしております。
寄附のきろく