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リプレイスにおけるWebフロントエンドのこれから / The future...
Search
yuya takei
February 21, 2022
0
750
ZOZOTOWNリプレイスにおけるWebフロントエンドのこれから / The future of web frontend in ZOZOTOWN replacement
フロントエンドのこれまでと今後の方針について、説明するものです。
yuya takei
February 21, 2022
Tweet
Share
More Decks by yuya takei
See All by yuya takei
Next.js を選定した ZOZOTOWN のフロントエンドリプレイス、その全体像 / zozotown frontend replacement project
takewell
0
2k
コンポーネント化とHeadlessCMSを用いた ECプロモーションの効率化
takewell
0
1.6k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
3
220
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Designing for humans not robots
tammielis
249
25k
Documentation Writing (for coders)
carmenintech
65
4.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
125
18k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
280
BBQ
matthewcrist
85
9.2k
Building an army of robots
kneath
302
42k
How to Think Like a Performance Engineer
csswizardry
16
1k
Design by the Numbers
sachag
278
19k
Transcript
ZOZOTOWNリプレイスにおける Webフロントエンドのこれから 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWNWEB部 フロントエンド4ブロック 武井 勇也 Copyright ©
ZOZO, Inc. 2022/02/21 ZOZO Tech Talk #3
© ZOZO, Inc. 株式会社ZOZO ZOZOTOWN開発本部 ZOZOWEB部 フロントエンド4ブロック 武井 勇也 2020年4月
新卒入社 ZOZOTOWNのWebフロントエンドの開発を担当 Zenn : @takewell Twitter : @takewell_ Speaker Deck : takewell 2
© ZOZO, inc. 目次 • ZOZOTOWNリプレイスのこれまで • フロントエンドのこれまで • フロントエンドリプレイス始動
• リプレイスに取り組むエンジニアにとって大切なこと • まとめ 3
© ZOZO, Inc. ZOZOTOWNリプレイスのこれまで 4
© ZOZO, Inc. リプレイス開始前 5 • 一つのアプリケーションにすべての責務を集 約したモノリシックな構成 • Classic
ASP/VBScriptで実現できない機能 は独自ライブラリを作成し対応 • スケールに成功し日本最大級のファッション 通販サイトとして成長 ※ 説明のため簡略化しています
© ZOZO, Inc. さらなる成長のための課題 6 • 技術スタックが時代的に一般的ではなくなってきているため • クラウド化が困難 •
OSSやSaaSのSDK導入が困難 • 人材採用が困難 • モノリシックなため • 責務が集中し、ロジックが密結合なため変更コストが高い • 開発組織のスケールが困難
© ZOZO, Inc. リプレイスの目的 7 これを達成できる組織にする
© ZOZO, Inc. 現在のリプレイス状況 8 ※ 説明のため簡略化しています • 達成 •
ビジネスロジックをマイクロサービスに移譲 • クラウド化 • 人材採用の加速 • 未着手 • Webサーバーのリプレイス
© ZOZO, Inc. リプレイスの詳細を知りたい方は 過去のMeetupの資料や 弊社sonotsの記事をご覧ください。 9
© ZOZO, Inc. フロントエンドのこれまで 10
© ZOZO, Inc. 2019以前のフロントエンド 11 • 主なビューロジックはWebサーバーのテンプレートエ ンジンのような機能(独自ライブラリ)で実現 • 技術スタック
• ES5 • jQuery • メンバー数10名以下、チーム数2
© ZOZO, Inc. 現在のフロントエンド 12 • Webサーバーの技術は変化なし • 新機能を中心に新しい技術スタックや設計を導入 •
技術: TypeScript, React, Webpack, CSS Modules, PostCSS, Stylelint, ESLint, Prettier • 設計: ITCSS, React Container / Presentational Pattern • メンバー数20名以上,チーム数4
© ZOZO, Inc. フロントエンドの新技術スタックの導入 13 • 達成 • TypeScriptのモジュールと型システムで堅牢性を獲得 •
Reactを用いて宣言的UI記述とコンポーネントで保守性の向上 • CSS設計にITCSSを用いることで共同開発しやすくなった • 残っている課題 • テンプレートエンジンとReactでビューロジックとUIコンポーネントが二重に存在 • Webpackの設定が複雑になり、メンテナンスコストが高い • ビューロジックのリプレイス先がまだないため、新機能をリプレイス予定のWebサーバー上に開発せざるをえない
© ZOZO, Inc. フロントエンドの技術課題を解決するための再設計と Webサーバーのリプレイスを同時に行いたい! 14
© ZOZO, Inc. フロントエンドリプレイス始動! 15
© ZOZO, Inc. フロントエンドリプレイスPhase1概要 16 • モノリスなWebサーバーの責務移譲先(ビュー・ビジネス)の基盤を作る ためトップページ(zozo.jp)をリプレイス予定 • 開発スピードのアップのため
• OpenAPI,MSWを用いたスキーマ駆動開発 • Storybookを用いたコンポーネント駆動開発 • TypeScriptで型駆動開発 • コスト削減のため • クラウド(EKS)化 • CDN(Akamai)でキャッシュ • 人材強化のため • 時代にあった技術スタックを採用 • 新しい技術スタックのノウハウ蓄積 ※ 説明のため簡略化しています
© ZOZO, Inc. フロントエンドリプレイス技術スタック 17 • Next.js (React フレームワーク) •
ページ単位でレンダリング手法(SSR/SSG/CSR)を柔軟に切り替えられる • きめ細かいファイル分割など、設定なしで最適なビルドを実現 • フレームワークなのでドキュメントが豊富 • Emotion (CSS in JS) • 現状使っているCSS Modulesはメンテナンスモードのため別のものを検討 • 記法の柔軟性・パフォーマンスを比較し選択
© ZOZO, Inc. リプレイスで取り組みたい課題 18 • ビジネスインパクトの大きな商品詳細ページ・検索結果ページなどのページをリプレイス • メンバーのTypeScript/React/Next.js/Emotionへの習熟サポート・コーディング規約の充実 •
マイクロフロントエンドな設計 • パフォーマンス改善 • アクセシビリティー対応強化 • デザインシステム構築 • etc. チャレンジングな課題がたくさんあります!!
© ZOZO, Inc. リプレイスに取り組む エンジニアにとって大切なこと 19
© ZOZO, Inc. リプレイスの推進に大切だと思うサイクル 20 ジョン・P・コッターの8ステップを意識 1. 他社の取り組みと比較したり、課題をリストアップ 2. 同じ課題感を持つメンバーと連帯
3. 改善計画を立案し提案 4. 課題を伸び代ととらえ発言 5. 新しい技術を日々検証 6. 新しい技術を小さく使って成果をあげて、テックブ ログの執筆および登壇 7. うまくいったことを他にも展開 8. 7を当たり前の方法に定着 変革を推進する8段階のステップ ジョン・P・コッター (2002) .『企業変革力』日経BP から引用
© ZOZO, Inc. リプレイスの推進のための行動 21 • 既存の技術課題や組織課題への深い理解 のためのインプット • “いままで”へのリスペクトの姿勢
• ノウハウのあるひとに教えを乞う ZOZOではWebフロントエンドのエキスパート 古川陽介氏を2021年10月より技術顧問として お招きしています。
© ZOZO, Inc. まとめ 22 • ZOZOTOWNはさらなる成長のためにリプレイスしている • Webフロントエンドは現状の課題解決するためにNext.jsでリプレ イスする
• ソフトウェアのリプレイスにはステップや心構えも大切
© ZOZO, Inc. ZOZOTOWNのフロントエンドをさらに躍進させませんか? 23 • 募集職種名 : ZOZOTOWNフロントエンドエンジニア •
業務内容 • ZOZOTOWNのサイト改善 / 改修におけるUI / インタラクション / LPなどの開発 • 新サービス開発プロジェクトにおけるUI / インタラクション / LPなどの開発 • 備考 • フルフレックス制 • 全国どこでも勤務可能
None