Storybook + MSWで開発体験を向上させる
StorybookとMock Service Worker（MSW）を導入してみて感じた開発体験を紹介したいと思います。
扱っているフロントエンドはVue.jsになります。
Storybookとは
UIコンポーネントをページとは切り離し、個別にコンポーネント開発することができるオープンソースツールです。
私が感じた主な特徴は
- フロントエンドに閉じてコンポーネント開発が可能になる
- Storyを積み上げることでコンポーネントカタログになる
- Interaction testsやVisual testsを実施することができる
Storybookを入れてみて
バックエンドを気にせずフロントエンドの開発にフォーカス
扱っているプロジェクトの性質上、ユーザの権限によってページの表示/非表示が制御されるため、新しいページを追加するにしてもバックエンドやDB周りを気にする必要があったのですが、Storybookを導入したことでフロントエンドの世界で完結して開発することができるようになりました。
※フロントエンドとバックエンドで開発がキッパリ分かれていて、バックエンド知らないといった話ではないです。細かいことは後に回してゴリっと画面作りたいときあるじゃないですか？
フォーカスしたい領域をクイックに開発していけるのは開発者としてけっこう感動的な体験でした。
また、コンポーネントカタログとしても活用できるため、今どんなコンポーネントが存在するのか視覚的に確認できるのもありがたかったです。
個人的にautodocsするとコンポーネントのPropsとEventを自動的に拾いドキュメントにしてくれたのはスゲー！！！と思いました。
テスト機構としても便利
コンポーネントテストとしての機能も優秀で
- Visual tests
- Accessibility tests
- Interaction tests
- Coverage tests
- Snapshot tests
- End-to-end tests
を備えています。
Interaction testsはコンポーネントに対するアクションを決められたステップで実行してくれるテスト機能になります。
例えば「ボタンをクリックする」「テキストボックスに〇〇と入力する」などです。
これだけだとStorybookを立ち上げた時しか実行できませんが、Test runnerと組み合わせることが可能なので、Interaction testsの結果をVitestのassertionsで確認するといった流れを組むことができます。
他のテスト機能についてはまだ触っていないので追々学習していきたいです。
Mock Service Workerとは
APIへのリクエストをモックしてくれるオープンソースライブラリです。
実際にAPIのプロセスを立ち上げなくてもMSWを入れることでリクエストをインターセプトし、予め決めておいたレスポンスを返してくれます。
そもそも、Service Workerとは
サービスワーカーは、基本的にウェブアプリケーション、ブラウザー、そして（もし繋がっていれば）ネットワークの間に介在するプロキシサーバーのように振る舞います。これは、よりよいオフラインの操作性を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバー上にある資産を更新したりします。また、プッシュ通知やバックグラウンド同期の API 群へのアクセスもできるようになります。
ブラウザに表示されたページとは別に動作しているJavaScriptのようで、それがfetchの動作をリッスンしてプロキシサーバーのような挙動をしてくれるんだとか。
StorybookにMSWを入れてみて
先ほどStorybookはフロントエンドの世界で完結できて嬉しいと言いましたが、実際はAPIのレスポンスをから画面をリアクティブに更新していきますよね。
ダミーデータを準備してコンポーネントに読み込ませるのはイマイチでやりたくないですし。。。
それだとやっぱりAPIとの連携必要じゃないかとなりますが、MSWを入れることでその問題も解決することができました。
APIのIFさえ決まっていれば（別に決まってなくてもいいですが）想定されるレスポンスをMSWのレスポンスとして定義しておき、あとは普通にコンポーネント開発を行えばあたかもAPIと通信しているかのようにコンポーネントを動かすことができるようになります。
DevToolsのネットワークからも通信の状況を確認することが可能です。
なので想定されるパターンを幾つか定義しておき、パターンに沿った挙動を考慮して開発でき、Storyから確認することが可能になりました。
おわり
Storybook + MSWの組み合わせでクイックに開発しつつ、品質にも気を配れるようになってきたと思います。テスト周りはまだまだ学習が必要なのでより良いテストフローを模索していきたいと思います。
Discussion