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
ZOZOTOWNの裏側に迫る! Javaで作られたBFFの開発事例を紹介
Search
Yutaro Ogawa
March 27, 2023
Technology
1
3k
ZOZOTOWNの裏側に迫る! Javaで作られたBFFの開発事例を紹介
Yutaro Ogawa
March 27, 2023
Tweet
Share
Other Decks in Technology
See All in Technology
(Test) ai-meetup slide creation
oikon48
3
470
Escape from Excel方眼紙 ~マークダウンで繋ぐ、人とAIの架け橋~ /nikkei-tech-talk44
nikkei_engineer_recruiting
0
110
中央集権型を脱却した話 分散型をやめて、連邦型にたどり着くまで
sansantech
PRO
1
130
20260321_エンベディングってなに?RAGってなに?エンベディングの説明とGemini Embedding 2 の紹介
tsho
0
130
生成AI活用でQAエンジニアにどのような仕事が生まれるか/Support Required of QA Engineers for Generative AI
goyoki
1
330
バクラク最古参プロダクトで重ねた技術投資を振り返る
ypresto
0
190
1GB RAMのラズピッピで何ができるのか試してみよう / 20260319-rpijam-1gb-rpi-whats-possible
akkiesoft
0
610
The Rise of Browser Automation: AI-Powered Web Interaction in 2026
marcthompson_seo
0
130
visionOS 開発向けの MCP / Skills をつくり続けることで XR の探究と学習を最大化
karad
1
1.1k
Windows ファイル共有(SMB)を再確認する
murachiakira
PRO
0
210
頼れる Agentic AI を支える Datadog のオブザーバビリティ / Powering Reliable Agentic AI with Datadog Observability
aoto
PRO
0
240
Agent ServerはWeb Serverではない。ADKで考えるAgentOps
akiratameto
0
120
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
260
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Chasing Engaging Ingredients in Design
codingconduct
0
150
Site-Speed That Sticks
csswizardry
13
1.1k
The browser strikes back
jonoalderson
0
810
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
250
The World Runs on Bad Software
bkeepers
PRO
72
12k
How to train your dragon (web standard)
notwaldorf
97
6.6k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
How Software Deployment tools have changed in the past 20 years
geshan
0
33k
Into the Great Unknown - MozCon
thekraken
40
2.3k
Transcript
ZOZOTOWNの裏側に迫る! Javaで作られたBFFの開発事例を紹介 2023-03-23 ZOZO Tech Meetup〜Java活用事例紹介〜 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWNWEB部 バックエンド1ブロック
小川 雄太郎 Copyright © ZOZO, Inc. 1
© ZOZO, Inc. 2 小川 雄太郎(ゆうたろう) 経歴 2021年、株式会社ZOZO(旧:株式会社ZOZOテクノロジーズ)に新卒入社し、現在は ZOZOTOWN開発本部ZOZOTOWNWEB部バックエンド1ブロックに在籍中。
近況 VBScriptで書かれた既存のZOZOTOWNの運用・保守を行いつつ、Javaのフレームワークであ るSpringBootを利用した新しいZOZOTOWNへのリプレイスを進行中。 主に、BFFアーキテクチャに基づいて構築されたAPIの開発に着手している。 GitHub Twitter
© ZOZO, Inc. アジェンダ • BFFの概要説明 • BFFのプロジェクトの構成や設計について • 直近での利用例
• まとめ 3
© ZOZO, Inc. 4 BFFの概要説明
© ZOZO, Inc. 5 BFF(Backends for Frontends)とは BFFとは、Backends for Frontendsの略で、UIやユースケースに合わせてデータの加工をおこなう中間層の
こと。WebやモバイルアプリケーションなどのUIと各マイクロサービス間のやりとりを仲介し、UIの要件に合わ せたデータ整形や集約を担当する。
© ZOZO, Inc. リプレイス開始前 • 全てのロジックをWebサーバとストアドで保持 • ClassicASPやVBScript、独自に開発したライブラリなどを利用して開発 • オンプレミス環境でIISを使用して稼働
6 ZOZOTOWNのリプレイス①
© ZOZO, Inc. 7 ZOZOTOWNのリプレイス② リプレイス開始当初 • 一部のストアドで保持していたロジックをAPI化 • クラウド環境でコンテナによってマイクロサービスを実行
• DB内の一部のデータをクラウドに同期
© ZOZO, Inc. 8 ZOZOTOWNのリプレイス③ 現在 • レンダリングを目的とした新たなWebサーバを構築し、一部のフロントエンド領域をリプレイス • データの整形や集約を担当するBFFサーバを構築
• 現在、3つのアーキテクチャが共存している
© ZOZO, Inc. 9 BFF導入によるメリット • クライアントの実装が簡潔になる • クライアント・サーバ間の通信量を削減できる •
マイクロサービス側の変更によるクライアントへの影響が減少する • アプリケーションを分離することで責務が明確になり、開発効率の向上が期待できる
© ZOZO, Inc. 10 BFFのプロジェクトの構成や設計について
© ZOZO, Inc. 11 DDDアーキテクチャの採用とレイヤー分担 ZOZOTOWNにおけるBFFはDDD(Domain-Driven Design)に基づいたアーキテクチャを採用しており、各レイ ヤーの役割分担が明確になっている。
© ZOZO, Inc. 12 • プログラム言語 ◦ Java ◦ Groovy
• フレームワーク ◦ Spring Boot • ライブラリ ◦ Lombok • テストフレームワーク ◦ Spock • ビルドツール ◦ Gradle • API仕様 ◦ OpenAPI • モック用Webサーバ ◦ nginx • ツール ◦ OpenAPI Generator etc. 技術スタック
© ZOZO, Inc. 13 直近での利用例
© ZOZO, Inc. 14 ZOZOTOWN ホーム elove by ZOZO (エラブ
バイ ゾゾ) ページ上部に表示されるバ ナー一覧、およびページ中 央に表示されるパーソナライ ズされたモジュール一覧を BFFを介してデータ取得して いる。 CMSを利用した施策ペー ジ。ページング機能を搭載し た記事一覧のモジュールを BFFを介してデータ取得して いる。 https://zozo.jp/ https://zozo.jp/elove/
© ZOZO, Inc. • 現在ZOZOTOWNでは、VBScriptで実装されたレガシーなアプリケーションをJavaやSpringBootを用いた モダンなアプリケーションへとリプレイスしている。 • BFFの導入により、複数のマイクロサービスから必要なデータを収集し、一つのエンドポイントからレスポ ンスを返すことができるようになった。 •
BFFの導入により、クライアント側の実装が簡素化され、通信量も削減された。また、クライアント側がマ イクロサービス側の変更に影響を受けずにBFF側で修正を完結できるため、今後の開発効率の向上も 見込める。 • BFFへのリプレイスは現在進行中で、まだ一部のみの実施となっている。今後も随時リプレイスを進め、 全体の更新を目指している。 15 まとめ
© ZOZO, Inc. 16 BFFを駆使したZOZOTOWNのバックエンド開発に携わりませんか? 募集職種名 ZOZOTOWN バックエンドエンジニア 業務内容
ファッションEC「ZOZOTOWN」の新規機能から既存機能のバックエンド分野の開発 ◦ Webアプリケーションの設計/開発/運用 ◦ ネイティブアプリ用のAPIの設計/開発/運用 ◦ DBまわりのテーブル設計やチューニング 備考 ◦ フルフレックス制 ◦ 全国どこでも勤務可能
None