Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ZOZOのショップスタッフ向け 新規サービス「FAANS」における チームの取り組みとWeb技術/ Team Approach And Web Technology Of FAANS
Search
ShoTanaka
February 25, 2022
Programming
0
1.4k
ZOZOのショップスタッフ向け 新規サービス「FAANS」における チームの取り組みとWeb技術/ Team Approach And Web Technology Of FAANS
ShoTanaka
February 25, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
Ruby Function Composition
bkuhlmann
1
330
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
140
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
320
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
"config" ってなんだ? / What is "config"?
okashoi
0
240
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
150
Goのmultiple errorsについて (2024年4月版)
syumai
3
690
Hanami and htmx
bkuhlmann
0
210
今、知っておきたい! 生成AIエージェントの世界
elith
3
360
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Elm 0.19.0 Changes
bkuhlmann
0
490
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Code Review Best Practice
trishagee
55
15k
Ruby is Unlike a Banana
tanoku
96
10k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Product Roadmaps are Hard
iamctodd
44
9.7k
Agile that works and the tools we love
rasmusluckow
325
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Automating Front-end Workflow
addyosmani
1356
200k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Six Lessons from altMBA
skipperchong
21
3k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Transcript
ZOZOのショップスタッフ向け 新規サービス「FAANS」における チームの取り組みとWeb技術 株式会社ZOZO メディア開発本部 FAANS部 フロントエンドブロック 田中 翔 Copyright ©
ZOZO, Inc. ZOZO Tech Talk #4 - Webフロントエンド x 新規事業 (2022/2/25)
© ZOZO, Inc. 株式会社ZOZO メディア開発本部 FAANS部 フロントエンドブロック Web担当 田中 翔 2019年4月新卒入社
WEARのバックエンドとしてリプレイス・新機能開発の経験を経て、 現在は新規サービス「FAANS」のWebのフロントエンドを担当している。 趣味はK-POP鑑賞。 2
© ZOZO, Inc. 3 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3.
Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
© ZOZO, Inc. 4 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3.
Webの技術スタック 4. Webの課題と解決するための取り組み 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)
© 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)
© ZOZO, Inc. 7 1. FAANSとは:機能紹介(コーデ投稿と成果確認画面) ZOZOTOWNやWEARへのコーディネート同時投稿が可能で、 その投稿コーディネート経由の成果機能を開発中 効果測定 投稿
コーディネート画像
© ZOZO, Inc. 8 2022年3月期第2四半期配信の弊社決算説明会資料より (https://d31ex0fa3i203z.cloudfront.net/assets/ja/ir/pdf/J_webup_FY2021_2Q.pdf) 1. FAANSとは:機能紹介(店舗在庫連携機能) ZOZOTOWNで行われた取り置き注文の内容をFAANS上で確認でき、 ショップスタッフは取り置き対応できる。
© ZOZO, Inc. 9 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3.
Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
© ZOZO, Inc. 少数精鋭のチームで構成 • PM • デザイナー • フロントエンド(Web)
• フロントエンド (iOS) • フロントエンド (Android) • バックエンド • 分析 • 他にもQA、SREなど 10 2. FAANSを支える開発チーム(チーム構成)
© ZOZO, Inc. 11 2. FAANSを支える開発チーム(チームの特徴) ZOZO内のスタートアップのようなチーム • 新規サービスなので新しい技術にチャレンジできる。 •
小規模なチームなのでクイックに相談でき、クイックに物事が決まりやすい。
© ZOZO, Inc. 12 2. FAANSを支える開発チーム(チームの特徴) 例えば、、 Webは開発初期はPCとSP両方対応をしていた。 FAANSのWebは管理者(ショップ店長・企業管理者)向けの機能という立ち位置で、 その管理者は基本的にPCを使っている。
そのため、SP対応する必要はないとPMに相談。 検討後、PCのみ対応という判断になった。 SP用にデザインや開発やQAを行っていたが、その工数が削減された。 PCにリソースを割けるようになり、ユーザーにより高い価値を提供できるようになった。
© ZOZO, Inc. 13 2. FAANSを支える開発チーム(チームの取り組み) FAANSのデータ確認会 • 週に1回、各職種合同で FAANSのデータを見る時間をとり、
気づいたことを言い合う。 • Slackのチームチャンネルに FAANSのダッシュボードが定期的に投稿されて、 誰でも確認ができる。
© ZOZO, Inc. 14 2. FAANSを支える開発チーム(チームの取り組み) 新機能確認会 • 週1の頻度で各職種合同で集まって FAANSの新機能をユーザー目線で触ってみる会。
• チームメンバーがより深くFAANSの新機能を理解できる。 • 改善点があれば、Jiraでチケット化され、優先度決めて対応。
© ZOZO, Inc. 15 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3.
Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
© 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の技術スタック
© ZOZO, Inc. 設計について • ロジックと見た目の部分を分けるために、 Container Presenterパターンを採用。 • ContainerからPresenterに必要な値を
注入して表示している。 • コンポーネントをまたいだ値 に関してはContextからとってきている。 17 3. Webの技術スタック User Backend Container API Client Presenter Context Router
© ZOZO, Inc. 18 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3.
Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
© ZOZO, Inc. FAANSのWebの課題 1. PMやデザイナーが各状態ごとの表示を確認するのが大変だった。 (例、APIがエラーを返した場合や権限ごとの画面の表示) 2. デザインの修正をしたときに、修正箇所以外の影響範囲を検知する仕組みがなかった。 19
4. Webの課題と解決するための取り組み 19
© ZOZO, Inc. FAANSのWebの課題 1. PMやデザイナーが各状態ごとの表示を確認するのが大変だった。 (例、APIがエラーを返した場合や権限ごとの画面の表示) 2. デザインの修正をしたときに、修正箇所以外の影響範囲を検知する仕組みがなかった。 20
4. Webの課題と解決するための取り組み 20
© ZOZO, Inc. 21 4. Webの課題と解決するための取り組み 21 右の画像のようにStorybookで各状態ごとのページの画面 を表示させていたが、、、
© ZOZO, Inc. 22 4. Webの課題と解決するための取り組み 22 User Backend Container
API Client Presenter Context Router Containerで定義されている値をすべて用意して、 Presenterに渡さないといけないので大変だった。 mock Storyを表示させるために Containerで定義されている値を 用意しないといけない。
© 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レスポンスを 返すことができるライブラリ。
© ZOZO, Inc. 24 4. Webの課題と解決するための取り組み User Backend Container API
Client Presenter Context Router MSW intercept 導入の結果、 Containerで定義されている値を用意する必要はなくなり、 APIのmockレスポンスだけ用意すれば良くなった。 mock APIのレスポンスをmock してStorybookに表示
© ZOZO, Inc. • 各StoryごとにAPIが返すモックレスポンスを定義できるため、 多様なUI(200や500を返した場合のUI) をStorybook上で一覧表示することができる。 • Storybookの最新機能であるPlay functionを使うと、
表示したページに対して イベントを発火させることができるため、 モーダルを表示した後などのUIを見ることができる。 25 4. Webの課題と解決するための取り組み
© ZOZO, Inc. 26 4. Webの課題と解決するための取り組み 「モーダルを開いた後に表示する一覧取得APIで500を返した場合」 のようにUI上で確認が難しいイベントを確認することも可能に。
© ZOZO, Inc. 27 4. Webの課題と解決するための取り組み その他のメリット • MSWのおかげでバックエンド側にSwaggerだけ用意してもらえれば、 APIが実装されていなくても開発ができる。
課題 • Swaggerからベースのモックレスポンスを自動生成するうまい方法が見つかっていない。 (現状はSwaggerUI上でサンプルのレスポンスが生成されているのでそれを元にレスポンスを定義している。) 27
© ZOZO, Inc. FAANSのWebの課題 1. PMやデザイナーが各状態ごとの表示を確認するのが大変だった。 (例、APIがエラーを返した場合や権限ごとの画面の表示) →Mock Service Workerで解決
2. デザインの修正をしたときに、修正箇所以外の影響範囲を検知する仕組みがなかった。 28 4. Webの課題と解決するための取り組み 28
© ZOZO, Inc. 4. Webの課題と解決するための取り組み Chromatic • 変更前と後のUIのスナップショット を撮影して、差分比較できる。 •
StorybookのHostingの機能やGitHub のようにその差分に対してレビューできる 機能も備わっている。 29
© ZOZO, Inc. 4. Webの課題と解決するための取り組み あるページで検索窓が追加されたので右のような 差分が出ているが。。。 検索窓追加前 検索窓追加後 ヘッダーやモーダル表示後のUIには
影響を与えていないことがわかる。 30
© ZOZO, Inc. FAANSのWebの課題 1. PMやデザイナーが各状態ごとの表示を確認するのが大変だった。 (例、APIがエラーを返した場合や権限ごとの画面の表示) →Mock Service Workerで解決
2. デザインの修正をしたときに、修正箇所以外の影響範囲を検知する仕組みがなかった。 →Chromaticで解決 31 4. Webの課題と解決するための取り組み 31
© ZOZO, Inc. 32 AGENDA 1. FAANSとは 2. FAANSを支える開発チーム 3.
Webの技術スタック 4. Webの課題と解決するための取り組み 5. 終わりに
© ZOZO, Inc. 33 5. 終わりに FAANSについてより詳しく聞きたい方は カジュアル面談を行っておりますので、 気軽にお申し込みください! https://hrmos.co/pages/zozotech/jobs/0000225
None