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
2.6k
ZOZOTOWNの裏側に迫る! Javaで作られたBFFの開発事例を紹介
Yutaro Ogawa
March 27, 2023
Tweet
Share
Other Decks in Technology
See All in Technology
20251027_findyさん_音声エージェントLT
almondo_event
2
430
Building a cloud native business on open source
lizrice
0
180
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
130
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
110
Retrospectiveを振り返ろう
nakasho
0
100
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
0
110
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
320
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
430
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
470
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
140
Kubernetes self-healing of your workload
hwchiu
0
530
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Six Lessons from altMBA
skipperchong
29
4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Code Reviewing Like a Champion
maltzj
526
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Typedesign – Prime Four
hannesfritz
42
2.8k
Being A Developer After 40
akosma
91
590k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
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