ZOZOのショップスタッフ向け 新規サービス「FAANS」における チームの取り組みとWeb技術/ Team Approach And Web Technology Of FAANS

Transcript

1. ZOZOのショップスタッフ向け 新規サービス「FAANS」における チームの取り組みとWeb技術 株式会社ZOZO メディア開発本部 FAANS部 フロントエンドブロック 田中　翔 Copyright © ZOZO, Inc. ZOZO Tech Talk #4 - Webフロントエンド x 新規事業 (2022/2/25)
2. © ZOZO, Inc. 株式会社ZOZO メディア開発本部 FAANS部 フロントエンドブロック Web担当 田中　翔 2019年4月新卒入社 WEARのバックエンドとしてリプレイス・新機能開発の経験を経て、 現在は新規サービス「FAANS」のWebのフロントエンドを担当している。 趣味はK-POP鑑賞。 2
3. © ZOZO, Inc. 3 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3. Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
4. © ZOZO, Inc. 4 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3. Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
5. © ZOZO, Inc. 5 ファッションを「買う」ならZOZOから、 ファッションの「こと」ならZOZOへ。　 を目指している。 そこで、ZOZOTOWNの成長戦略として 「買う」以外のトラフィックを増やす ことを掲げている。 FAANSプロジェクト誕生！！ 1. FAANSとは：FAANS立ち上げの経緯 2021年3月期配信の弊社決算説明会資料より （https://d31ex0fa3i203z.cloudfront.net/assets/ja/ir/pdf/webup_fy20204q_j.pdf）
6. © ZOZO, Inc. • FAANSとは、 Fashion Advisors are Neighborsのことで、 「ショップスタッフの効率的な販売を サポートするショップスタッフ専用ツール」です • Web、iOS、Androidで提供 • Webはショップ店長をはじめとした 管理者向けにサービスを提供 6 1. FAANSとは：概要 2022年3月期第2四半期配信の弊社決算説明資料より （https://d31ex0fa3i203z.cloudfront.net/assets/ja/ir/pdf/J_webup_FY2021_2Q.pdf）
7. © ZOZO, Inc. 7 1. FAANSとは：機能紹介（コーデ投稿と成果確認画面） ZOZOTOWNやWEARへのコーディネート同時投稿が可能で、 その投稿コーディネート経由の成果機能を開発中 効果測定 投稿 コーディネート画像
8. © ZOZO, Inc. 8 2022年3月期第2四半期配信の弊社決算説明会資料より （https://d31ex0fa3i203z.cloudfront.net/assets/ja/ir/pdf/J_webup_FY2021_2Q.pdf） 1. FAANSとは：機能紹介（店舗在庫連携機能） ZOZOTOWNで行われた取り置き注文の内容をFAANS上で確認でき、 ショップスタッフは取り置き対応できる。
9. © ZOZO, Inc. 9 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3. Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
10. © ZOZO, Inc. 少数精鋭のチームで構成 • PM • デザイナー • フロントエンド（Web） • フロントエンド （iOS） • フロントエンド （Android） • バックエンド • 分析 • 他にもQA、SREなど 10 2. FAANSを支える開発チーム（チーム構成）
11. © ZOZO, Inc. 11 2. FAANSを支える開発チーム（チームの特徴） ZOZO内のスタートアップのようなチーム • 新規サービスなので新しい技術にチャレンジできる。 • 小規模なチームなのでクイックに相談でき、クイックに物事が決まりやすい。
12. © ZOZO, Inc. 12 2. FAANSを支える開発チーム（チームの特徴） 例えば、、 Webは開発初期はPCとSP両方対応をしていた。 FAANSのWebは管理者（ショップ店長・企業管理者）向けの機能という立ち位置で、 その管理者は基本的にPCを使っている。 そのため、SP対応する必要はないとPMに相談。 検討後、PCのみ対応という判断になった。 SP用にデザインや開発やQAを行っていたが、その工数が削減された。 PCにリソースを割けるようになり、ユーザーにより高い価値を提供できるようになった。
13. © ZOZO, Inc. 13 2. FAANSを支える開発チーム（チームの取り組み） FAANSのデータ確認会 • 週に1回、各職種合同で FAANSのデータを見る時間をとり、 気づいたことを言い合う。 • Slackのチームチャンネルに FAANSのダッシュボードが定期的に投稿されて、 誰でも確認ができる。
14. © ZOZO, Inc. 14 2. FAANSを支える開発チーム（チームの取り組み） 新機能確認会 • 週1の頻度で各職種合同で集まって FAANSの新機能をユーザー目線で触ってみる会。 • チームメンバーがより深くFAANSの新機能を理解できる。 • 改善点があれば、Jiraでチケット化され、優先度決めて対応。
15. © ZOZO, Inc. 15 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3. Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
16. © ZOZO, Inc. 16 開発言語 ・TypeScript クラウド ・Firebase Hosting / Firebase Authentication CI/CD ・GitHub Actions ツール・ライブラリ ・React / Storybook / Mock Service Worker / Chromatic / Chakura UI / styled-components / Jest / OpenAPI Generator / Sentry 3. Webの技術スタック
17. © ZOZO, Inc. 設計について • ロジックと見た目の部分を分けるために、 Container Presenterパターンを採用。 • ContainerからPresenterに必要な値を 注入して表示している。 • コンポーネントをまたいだ値 に関してはContextからとってきている。 17 3. Webの技術スタック User Backend Container API Client Presenter Context Router
18. © ZOZO, Inc. 18 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3. Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
19. © ZOZO, Inc. FAANSのWebの課題 1. PMやデザイナーが各状態ごとの表示を確認するのが大変だった。 （例、APIがエラーを返した場合や権限ごとの画面の表示） 2. デザインの修正をしたときに、修正箇所以外の影響範囲を検知する仕組みがなかった。 19 4. Webの課題と解決するための取り組み 19
20. © ZOZO, Inc. FAANSのWebの課題 1. PMやデザイナーが各状態ごとの表示を確認するのが大変だった。 （例、APIがエラーを返した場合や権限ごとの画面の表示） 2. デザインの修正をしたときに、修正箇所以外の影響範囲を検知する仕組みがなかった。 20 4. Webの課題と解決するための取り組み 20
21. © ZOZO, Inc. 21 4. Webの課題と解決するための取り組み 21 右の画像のようにStorybookで各状態ごとのページの画面 を表示させていたが、、、
22. © ZOZO, Inc. 22 4. Webの課題と解決するための取り組み 22 User Backend Container API Client Presenter Context Router Containerで定義されている値をすべて用意して、 Presenterに渡さないといけないので大変だった。 mock Storyを表示させるために Containerで定義されている値を 用意しないといけない。
23. © ZOZO, Inc. 23 4. Webの課題と解決するための取り組み User Backend Container API Client Presenter Context Router MSW intercept Mock Service Worker （MSW） ネットワークレベルでAPIリクエストをインターセプトし、mockレス ポンスを返すライブラリ。 MSW Storybook Addon 各Storyごとに自分が返して欲しいmockレスポンスを 返すことができるライブラリ。
24. © ZOZO, Inc. 24 4. Webの課題と解決するための取り組み User Backend Container API Client Presenter Context Router MSW intercept 導入の結果、 Containerで定義されている値を用意する必要はなくなり、 APIのmockレスポンスだけ用意すれば良くなった。 mock APIのレスポンスをmock してStorybookに表示
25. © ZOZO, Inc. • 各StoryごとにAPIが返すモックレスポンスを定義できるため、 多様なUI（200や500を返した場合のUI） をStorybook上で一覧表示することができる。 • Storybookの最新機能であるPlay functionを使うと、 表示したページに対して イベントを発火させることができるため、 モーダルを表示した後などのUIを見ることができる。 25 4. Webの課題と解決するための取り組み
26. © ZOZO, Inc. 26 4. Webの課題と解決するための取り組み 「モーダルを開いた後に表示する一覧取得APIで500を返した場合」 のようにUI上で確認が難しいイベントを確認することも可能に。
27. © ZOZO, Inc. 27 4. Webの課題と解決するための取り組み その他のメリット • MSWのおかげでバックエンド側にSwaggerだけ用意してもらえれば、 APIが実装されていなくても開発ができる。 課題 • Swaggerからベースのモックレスポンスを自動生成するうまい方法が見つかっていない。 （現状はSwaggerUI上でサンプルのレスポンスが生成されているのでそれを元にレスポンスを定義している。） 27
28. © ZOZO, Inc. FAANSのWebの課題 1. PMやデザイナーが各状態ごとの表示を確認するのが大変だった。 （例、APIがエラーを返した場合や権限ごとの画面の表示） →Mock Service Workerで解決 2. デザインの修正をしたときに、修正箇所以外の影響範囲を検知する仕組みがなかった。 28 4. Webの課題と解決するための取り組み 28
29. © ZOZO, Inc. 4. Webの課題と解決するための取り組み Chromatic • 変更前と後のUIのスナップショット を撮影して、差分比較できる。 • StorybookのHostingの機能やGitHub のようにその差分に対してレビューできる 機能も備わっている。 29
30. © ZOZO, Inc. 4. Webの課題と解決するための取り組み あるページで検索窓が追加されたので右のような 差分が出ているが。。。 検索窓追加前 検索窓追加後 ヘッダーやモーダル表示後のUIには 影響を与えていないことがわかる。 30
31. © ZOZO, Inc. FAANSのWebの課題 1. PMやデザイナーが各状態ごとの表示を確認するのが大変だった。 （例、APIがエラーを返した場合や権限ごとの画面の表示） →Mock Service Workerで解決 2. デザインの修正をしたときに、修正箇所以外の影響範囲を検知する仕組みがなかった。 →Chromaticで解決 31 4. Webの課題と解決するための取り組み 31
32. © ZOZO, Inc. 32 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3. Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
33. © ZOZO, Inc. 33 5. 終わりに FAANSについてより詳しく聞きたい方は カジュアル面談を行っておりますので、 気軽にお申し込みください！ https://hrmos.co/pages/zozotech/jobs/0000225