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
   

   View Slide

2. © ZOZO, Inc.
   株式会社ZOZO

   ZOZOTOWN開発本部 ZOZOWEB部

   フロントエンド4ブロック

   武井 勇也

   2020年4月 新卒入社

   ZOZOTOWNのWebフロントエンドの開発を担当

   Zenn : @takewell

   Twitter : @takewell_

   Speaker Deck : takewell

   2
   

   View Slide

3. © ZOZO, inc.
   目次

   ● ZOZOTOWNリプレイスのこれまで
   ● フロントエンドのこれまで
   ● フロントエンドリプレイス始動
   ● リプレイスに取り組むエンジニアにとって大切なこと
   ● まとめ
   3
   

   View Slide

4. © ZOZO, Inc.
   ZOZOTOWNリプレイスのこれまで

   4
   

   View Slide

5. © ZOZO, Inc.
   リプレイス開始前

   5
   ● 一つのアプリケーションにすべての責務を集
   約したモノリシックな構成
   ● Classic ASP/VBScriptで実現できない機能
   は独自ライブラリを作成し対応
   ● スケールに成功し日本最大級のファッション
   通販サイトとして成長
   ※ 説明のため簡略化しています
   

   View Slide

6. © ZOZO, Inc.
   さらなる成長のための課題

   6
   ● 技術スタックが時代的に一般的ではなくなってきているため
   ● クラウド化が困難
   ● OSSやSaaSのSDK導入が困難
   ● 人材採用が困難
   ● モノリシックなため
   ● 責務が集中し、ロジックが密結合なため変更コストが高い
   ● 開発組織のスケールが困難
   

   View Slide

7. © ZOZO, Inc.
   リプレイスの目的

   7
   これを達成できる組織にする

   

   View Slide

8. © ZOZO, Inc.
   現在のリプレイス状況

   8
   ※ 説明のため簡略化しています
   ● 達成
   ● ビジネスロジックをマイクロサービスに移譲
   ● クラウド化
   ● 人材採用の加速
   ● 未着手
   ● Webサーバーのリプレイス
   

   View Slide

9. © ZOZO, Inc.
   リプレイスの詳細を知りたい方は
   過去のMeetupの資料や
   弊社sonotsの記事をご覧ください。

   9
   

   View Slide

10. © ZOZO, Inc.
    フロントエンドのこれまで

    10
    

    View Slide

11. © ZOZO, Inc.
    2019以前のフロントエンド

    11
    ● 主なビューロジックはWebサーバーのテンプレートエ
    ンジンのような機能(独自ライブラリ)で実現
    ● 技術スタック
    ● ES5
    ● jQuery
    ● メンバー数10名以下、チーム数2
    

    View Slide

12. © ZOZO, Inc.
    現在のフロントエンド

    12
    ● Webサーバーの技術は変化なし
    ● 新機能を中心に新しい技術スタックや設計を導入
    ● 技術: TypeScript, React, Webpack, CSS Modules, PostCSS,
    Stylelint, ESLint, Prettier
    ● 設計: ITCSS, React Container / Presentational Pattern
    ● メンバー数20名以上,チーム数4
    

    View Slide

13. © ZOZO, Inc.
    フロントエンドの新技術スタックの導入

    13
    ● 達成
    ● TypeScriptのモジュールと型システムで堅牢性を獲得
    ● Reactを用いて宣言的UI記述とコンポーネントで保守性の向上
    ● CSS設計にITCSSを用いることで共同開発しやすくなった
    ● 残っている課題
    ● テンプレートエンジンとReactでビューロジックとUIコンポーネントが二重に存在
    ● Webpackの設定が複雑になり、メンテナンスコストが高い
    ● ビューロジックのリプレイス先がまだないため、新機能をリプレイス予定のWebサーバー上に開発せざるをえない
    

    View Slide

14. © ZOZO, Inc.
    フロントエンドの技術課題を解決するための再設計と
    Webサーバーのリプレイスを同時に行いたい！
    14
    

    View Slide

15. © ZOZO, Inc.
    フロントエンドリプレイス始動！

    15
    

    View Slide

16. © ZOZO, Inc.
    フロントエンドリプレイスPhase1概要

    16
    ● モノリスなWebサーバーの責務移譲先(ビュー・ビジネス)の基盤を作る
    ためトップページ(zozo.jp)をリプレイス予定
    ● 開発スピードのアップのため
    ● OpenAPI,MSWを用いたスキーマ駆動開発
    ● Storybookを用いたコンポーネント駆動開発
    ● TypeScriptで型駆動開発
    ● コスト削減のため
    ● クラウド(EKS)化
    ● CDN(Akamai)でキャッシュ
    ● 人材強化のため
    ● 時代にあった技術スタックを採用
    ● 新しい技術スタックのノウハウ蓄積
    ※ 説明のため簡略化しています
    

    View Slide

17. © ZOZO, Inc.
    フロントエンドリプレイス技術スタック

    17
    ● Next.js (React フレームワーク)
    ● ページ単位でレンダリング手法(SSR/SSG/CSR)を柔軟に切り替えられる
    ● きめ細かいファイル分割など、設定なしで最適なビルドを実現
    ● フレームワークなのでドキュメントが豊富
    ● Emotion (CSS in JS)
    ● 現状使っているCSS Modulesはメンテナンスモードのため別のものを検討
    ● 記法の柔軟性・パフォーマンスを比較し選択
    

    View Slide

18. © ZOZO, Inc.
    リプレイスで取り組みたい課題

    18
    ● ビジネスインパクトの大きな商品詳細ページ・検索結果ページなどのページをリプレイス
    ● メンバーのTypeScript/React/Next.js/Emotionへの習熟サポート・コーディング規約の充実
    ● マイクロフロントエンドな設計
    ● パフォーマンス改善
    ● アクセシビリティー対応強化
    ● デザインシステム構築
    ● etc.
    チャレンジングな課題がたくさんあります！！
    

    View Slide

19. © ZOZO, Inc.
    リプレイスに取り組む

    エンジニアにとって大切なこと

    19
    

    View Slide

20. © ZOZO, Inc.
    リプレイスの推進に大切だと思うサイクル

    20
    ジョン・P・コッターの8ステップを意識
    1. 他社の取り組みと比較したり、課題をリストアップ
    2. 同じ課題感を持つメンバーと連帯
    3. 改善計画を立案し提案
    4. 課題を伸び代ととらえ発言
    5. 新しい技術を日々検証
    6. 新しい技術を小さく使って成果をあげて、テックブ
    ログの執筆および登壇
    7. うまくいったことを他にも展開
    8. 7を当たり前の方法に定着
    変革を推進する8段階のステップ
    ジョン・P・コッター (2002) .『企業変革力』日経BP から引用
    

    View Slide

21. © ZOZO, Inc.
    リプレイスの推進のための行動

    21
    ● 既存の技術課題や組織課題への深い理解
    のためのインプット
    ● “いままで”へのリスペクトの姿勢
    ● ノウハウのあるひとに教えを乞う
    ZOZOではWebフロントエンドのエキスパート

    古川陽介氏を2021年10月より技術顧問として

    お招きしています。

    

    View Slide

22. © ZOZO, Inc.
    まとめ

    22
    ● ZOZOTOWNはさらなる成長のためにリプレイスしている
    ● Webフロントエンドは現状の課題解決するためにNext.jsでリプレ
    イスする
    ● ソフトウェアのリプレイスにはステップや心構えも大切
    

    View Slide

23. © ZOZO, Inc.
    ZOZOTOWNのフロントエンドをさらに躍進させませんか？
    23
    ● 募集職種名 : ZOZOTOWNフロントエンドエンジニア
    ● 業務内容
    ● ZOZOTOWNのサイト改善 / 改修におけるUI / インタラクション / LPなどの開発
    ● 新サービス開発プロジェクトにおけるUI / インタラクション / LPなどの開発
    ● 備考
    ● フルフレックス制
    ● 全国どこでも勤務可能
    

    View Slide

24. View Slide