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などの開発 ● 備考 ● フルフレックス制 ● 全国どこでも勤務可能 

No content