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