kubell Creator's Note

ビジネスチャット「Chatwork」のエンジニアのブログです。

ビジネスチャット「Chatwork」のエンジニアのブログです。

読者になる

チーム内の開発とデザインレビューについて

Storybook Frontend

認証チームの山下です。 こちらはkubell Advent Calendar 2024 19日目の記事になります。
認証チームではAuth0を活用した認証機能の提供に加え、アカウント管理系の機能も担当しており、具体的にはアカウント設定機能の開発・運用を行っています。
例えば、次のような機能が含まれます

  • ユーザーが自身の情報を確認・変更できる機能（例: メールアドレスやパスワードの変更）

これらの機能では、エッジケースを含めた動作確認が求められます。また、アカウント関連の設定は 一度変更すると戻すのが面倒 という課題もあります。
例えば、パスワード変更のデザインレビューを行うために実際にパスワード変更→元に戻す、といった作業は手間です。
この記事ではStorybook 1と MSW (Mock Service Worker) 2 を活用してこうした デザインレビューの手間をどのように軽減したか について紹介します。

認証チームにおける開発とデザインのプロセス

認証チームでは、PM（プロダクトマネージャー）とエンジニアが定例のミーティングを通じて、次の施策や高優先度のタスクについて話し合っています。この場では以下のような内容が共有・議論されています

  • 新しい機能や改善点の要件整理
  • 仕様や優先順位のすり合わせ
  • 必要に応じたデザイナーフィードバックや意見交換

詳細にどのような動きをされているかは、DEV発で「POチーム」をやろうとしたら、デュアル・トラック・アジャイルになっていた でご紹介されているので、ご興味のある方はぜひそちらをご覧ください。
仕様が固まり始めたり、UI/UX視点での調整が必要になった際には、デザイナーに共有・相談します。
MiroやFigmaを活用しながら整理していき、最終的に出来上がったFigmaを元に実装を進めていきます。

StorybookとMSWを使った開発の流れ

開発の流れの一例は以下のようなものです

1. OpenAPIを活用した型の自動生成
APIの型情報を自動生成し、Storybookでも活用しています。これにより、モックデータの整合性を保ちながら型の不一致を防ぐことができます。
2. 生成した型情報を用いて、MSWによるモックを作成します
MSWを使ってAPIの挙動をモック化します

  • 例: ユーザー情報取得APIの正常系と異常系のモック化
  • 例: メールアドレス変更APIの正常系の異常系のモック化

3. 作成したAPIモックを用いて、Storybookでユーザーのインタラクションを作成します
APIモックを活用し、Storybook上でコンポーネントを独立して動作させます。これにより、他の機能に影響されず、挙動やデザインの確認が可能です。

図で表すと以下のようになっています

開発の流れ

デザインレビューまでの流れ

開発した機能のデザインレビューは以下の手順で行います

1. レビュー対象PRをGitHub Actionsを用いてStorybookをビルドし、S3に保存
コミットハッシュをパスにしてS3へビルドの成果物を保存します
2. 保存したS3へのパスをレビュアーに共有し、レビュー依頼
S3とCloudFrontを活用し、Storybookを各プルリクエスト単位でデプロイしています。デプロイされたリンクを共有することで、レビュアーは簡単に動作確認ができます。

なぜChromaticを使用しなかったのか？

Chromatic 3を利用すれば、StorybookのデプロイやUIコンポーネントの差分チェックが自動化され、開発効率がさらに向上します。
しかし、現状のチームのワークフローでは、比較的シンプルな仕組みで十分カバーできており、Chromaticの豊富な機能に対して費用対効果が見合わないと判断しました。

デザインレビューまでの流れ

導入後に得られた効果

StorybookとMSWを導入することで、次のような効果が得られました

1. 効率的な状態再現
MSWを利用することで、APIのレスポンスを柔軟にモック化し、異常系やエッジケースも含めた動作確認を短時間で行えるようになりました。
例えば、ユーザーのメールアドレス変更時の成功・失敗のケースをStorybookで用意しておくことで各パターンを簡単に確認することができるようになりました
2. スピーディなレビューサイクル
各プルリクエストごとにStorybookをデプロイし、リモートでも動作確認を可能にしたことで、デザイナーやPMが早期にフィードバックできるようになりました
3. デザインと実装のギャップ解消
デザイナーがFigmaで作成したデザインをStorybook上で確認するプロセスを定着させたことで、デザインと実装の差異を早期に発見できるようになりました

まとめ

認証チームでは、StorybookとMSWを活用し、デザインレビューの手間を軽減しつつ、開発プロセス全体の効率化と品質向上を実現しています。
今後もツールやプロセスを活用し、より良いユーザー体験を提供する機能開発に取り組んでいきます。

  1. Storybook: Frontend workshop for UI development↩
  2. Mock Service Worker - API mocking library for browser and Node.js↩
  3. Visual testing & review for web user interfaces • Chromatic↩