昨年末に転職し、Webフロントエンドの開発に携わることになりました。
Webフロントエンドなチームでの開発が初めてだったのですが、使用しているツールの中にStorybookがあります。

Storybookに対しては、Web制作をおこなっていた頃に触っていたスタイルガイドジェネレータの類だと思っていたので、1人で開発する上では別に要らんよねと思ってスルーしていたのですが、あらためて調べてさわってみました。

Storybook

UIコンポーネントを作っていく時のプレビューからドキュメントテストまでを作成・実施・共有できるツールというイメージになりました。

開発していく中で、各種コンポーネントを作ってみるものの、実際のアプリケーションに入れるまでは挙動の確認が出来なかったり、意図した挙動のチェックをするのが難しかったりします。そこでStorybookを使うとコンポーネントを切り出して試しながら開発していけるようになりました。

どう触っていったか

公式サイトに色んなチュートリアルが載っていたので、Intro to StorybookのReactのものを触ってみました。

TodoListを作りながらStorybookの導入からコンポーネント単体だったり複数組み合わせた場合のStoryの組み方、テストの仕方など色んな事を試しながらStorybookに慣れていける内容でした。

終わってからは、仕事のプロダクトの中で触っていくのは勿論ですが、プライベートでは自分のプロダクトに導入して少しずつStoryを入れていってます。

複雑なコンポーネントや大きめのコンポーネントは少しやり辛いのかなと思っていて、とりあえずAtomic DesignでいうところのAtomsのレイヤーから導入して試していくのがいいのかなと思っています。慣れれば少しずつ組み合わせた場合のStoryを作るような感じです。

入れておいた方が良さそうなアドオン

sb init で自動的に入るものもありますが、サッといくつか見て入れておいた方が良さそうなものを自分のために書き出しておきます。

• essentials
  これを書いてる途中で見つけたアドオン。Storybookの公式が推奨している6つの基礎アドオンが全部入ってるらしい。中でも良さそうなのはこれ。
  • Controls
    Storybookの画面からコンポーネントに渡している値を書き換えてどういう挙動になるかを確認できるタブが追加される。非エンジニア職と認識合わせするのに便利
  • Actions
    ボタン押下時などイベント発火時に走っているメソッドなど確認できるっぽい
  • Viewport
    Storybook上でPC/Tablet/SPなどViewportを変更できるようにする
• storyshots
  StorybookのStoryなんかを使って、スナップショットテストを自動生成して実行できる (自動生成は有り難いけど、Puppeteerが入るっぽくてデカくなりそうなのでちょっと考えもの)

触ってみて改めて思うこと

開発時に他の人(職種問わない)と目線を合わせるというのは大事なので、こういうツールは大事だなとあらためて思いました。

また、この時の他の人って他人だけじゃなく自分、未来の自分も含まれるかなと。作ってる瞬間はコンポーネントの挙動はなんとなく把握していますが、よくいうnヶ月先の自分は他人論みたいな感じで、未来の自分も把握できるかというとそういうわけではないので、1人で開発してようと入れておいて損は無いツールだなと思いました。