ZOZOTOWNリプレイスにおけるWebフロントエンドのこれから / The future of web frontend in ZOZOTOWN replacement

フロントエンドのこれまでと今後の方針について、説明するものです。

Transcript

1. ZOZOTOWNリプレイスにおける
 Webフロントエンドのこれから
 株式会社ZOZO
 ZOZOTOWN開発本部 ZOZOTOWNWEB部 フロントエンド4ブロック
 武井 勇也
 Copyright © ZOZO, Inc. 2022/02/21 ZOZO Tech Talk #3
2. © ZOZO, Inc. 株式会社ZOZO
 ZOZOTOWN開発本部 ZOZOWEB部
 フロントエンド4ブロック
 武井 勇也
 2020年4月 新卒入社
 ZOZOTOWNのWebフロントエンドの開発を担当
 Zenn : @takewell
 Twitter : @takewell_
 Speaker Deck : takewell
 2
3. © ZOZO, inc. 目次
 • ZOZOTOWNリプレイスのこれまで • フロントエンドのこれまで • フロントエンドリプレイス始動 • リプレイスに取り組むエンジニアにとって大切なこと • まとめ 3
4. © ZOZO, Inc. ZOZOTOWNリプレイスのこれまで
 4
5. © ZOZO, Inc. リプレイス開始前
 5 • 一つのアプリケーションにすべての責務を集 約したモノリシックな構成 • Classic ASP/VBScriptで実現できない機能 は独自ライブラリを作成し対応 • スケールに成功し日本最大級のファッション 通販サイトとして成長 ※ 説明のため簡略化しています
6. © ZOZO, Inc. さらなる成長のための課題
 6 • 技術スタックが時代的に一般的ではなくなってきているため • クラウド化が困難 • OSSやSaaSのSDK導入が困難 • 人材採用が困難 • モノリシックなため • 責務が集中し、ロジックが密結合なため変更コストが高い • 開発組織のスケールが困難
7. © ZOZO, Inc. リプレイスの目的
 7 これを達成できる組織にする

8. © ZOZO, Inc. 現在のリプレイス状況
 8 ※ 説明のため簡略化しています • 達成 • ビジネスロジックをマイクロサービスに移譲 • クラウド化 • 人材採用の加速 • 未着手 • Webサーバーのリプレイス
9. © ZOZO, Inc. リプレイスの詳細を知りたい方は 過去のMeetupの資料や 弊社sonotsの記事をご覧ください。
 9
10. © ZOZO, Inc. フロントエンドのこれまで
 10
11. © ZOZO, Inc. 2019以前のフロントエンド
 11 • 主なビューロジックはWebサーバーのテンプレートエ ンジンのような機能(独自ライブラリ)で実現 • 技術スタック • ES5 • jQuery • メンバー数10名以下、チーム数2
12. © ZOZO, Inc. 現在のフロントエンド
 12 • Webサーバーの技術は変化なし • 新機能を中心に新しい技術スタックや設計を導入 • 技術: TypeScript, React, Webpack, CSS Modules, PostCSS, Stylelint, ESLint, Prettier • 設計: ITCSS, React Container / Presentational Pattern • メンバー数20名以上,チーム数4
13. © ZOZO, Inc. フロントエンドの新技術スタックの導入
 13 • 達成 • TypeScriptのモジュールと型システムで堅牢性を獲得 • Reactを用いて宣言的UI記述とコンポーネントで保守性の向上 • CSS設計にITCSSを用いることで共同開発しやすくなった • 残っている課題 • テンプレートエンジンとReactでビューロジックとUIコンポーネントが二重に存在 • Webpackの設定が複雑になり、メンテナンスコストが高い • ビューロジックのリプレイス先がまだないため、新機能をリプレイス予定のWebサーバー上に開発せざるをえない
14. © ZOZO, Inc. フロントエンドの技術課題を解決するための再設計と Webサーバーのリプレイスを同時に行いたい！ 14
15. © ZOZO, Inc. フロントエンドリプレイス始動！
 15
16. © ZOZO, Inc. フロントエンドリプレイスPhase1概要
 16 • モノリスなWebサーバーの責務移譲先(ビュー・ビジネス)の基盤を作る ためトップページ(zozo.jp)をリプレイス予定 • 開発スピードのアップのため • OpenAPI,MSWを用いたスキーマ駆動開発 • Storybookを用いたコンポーネント駆動開発 • TypeScriptで型駆動開発 • コスト削減のため • クラウド(EKS)化 • CDN(Akamai)でキャッシュ • 人材強化のため • 時代にあった技術スタックを採用 • 新しい技術スタックのノウハウ蓄積 ※ 説明のため簡略化しています
17. © ZOZO, Inc. フロントエンドリプレイス技術スタック
 17 • Next.js (React フレームワーク) • ページ単位でレンダリング手法(SSR/SSG/CSR)を柔軟に切り替えられる • きめ細かいファイル分割など、設定なしで最適なビルドを実現 • フレームワークなのでドキュメントが豊富 • Emotion (CSS in JS) • 現状使っているCSS Modulesはメンテナンスモードのため別のものを検討 • 記法の柔軟性・パフォーマンスを比較し選択
18. © ZOZO, Inc. リプレイスで取り組みたい課題
 18 • ビジネスインパクトの大きな商品詳細ページ・検索結果ページなどのページをリプレイス • メンバーのTypeScript/React/Next.js/Emotionへの習熟サポート・コーディング規約の充実 • マイクロフロントエンドな設計 • パフォーマンス改善 • アクセシビリティー対応強化 • デザインシステム構築 • etc. チャレンジングな課題がたくさんあります！！
19. © ZOZO, Inc. リプレイスに取り組む
 エンジニアにとって大切なこと
 19
20. © ZOZO, Inc. リプレイスの推進に大切だと思うサイクル
 20 ジョン・P・コッターの8ステップを意識 1. 他社の取り組みと比較したり、課題をリストアップ 2. 同じ課題感を持つメンバーと連帯 3. 改善計画を立案し提案 4. 課題を伸び代ととらえ発言 5. 新しい技術を日々検証 6. 新しい技術を小さく使って成果をあげて、テックブ ログの執筆および登壇 7. うまくいったことを他にも展開 8. 7を当たり前の方法に定着 変革を推進する8段階のステップ ジョン・P・コッター (2002) .『企業変革力』日経BP から引用
21. © ZOZO, Inc. リプレイスの推進のための行動
 21 • 既存の技術課題や組織課題への深い理解 のためのインプット • “いままで”へのリスペクトの姿勢 • ノウハウのあるひとに教えを乞う ZOZOではWebフロントエンドのエキスパート
 古川陽介氏を2021年10月より技術顧問として
 お招きしています。

22. © ZOZO, Inc. まとめ
 22 • ZOZOTOWNはさらなる成長のためにリプレイスしている • Webフロントエンドは現状の課題解決するためにNext.jsでリプレ イスする • ソフトウェアのリプレイスにはステップや心構えも大切
23. © ZOZO, Inc. ZOZOTOWNのフロントエンドをさらに躍進させませんか？ 23 • 募集職種名 : ZOZOTOWNフロントエンドエンジニア • 業務内容 • ZOZOTOWNのサイト改善 / 改修におけるUI / インタラクション / LPなどの開発 • 新サービス開発プロジェクトにおけるUI / インタラクション / LPなどの開発 • 備考 • フルフレックス制 • 全国どこでも勤務可能