ZOZOTOWN に CSS in JS（Emotion）を導入して1年後の状況

「ZOZO Tech Meetup - Webフロントエンド」での発表資料です。
https://zozotech-inc.connpass.com/event/297226/

Transcript

1. ZOZOTOWN に CSS in JS（Emotion）
   を導入して1年後の状況
   2023/11/06　
   ZOZO Tech Meetup - Webフロントエンド
   株式会社ZOZO

   ZOZOTOWN開発本部 ZOZOTOWN開発2部 WEBフロントエンドブロック

   菊地 宏之
   Copyright © ZOZO, Inc.
   1
   

   View Slide

2. © ZOZO, Inc.
   株式会社ZOZO
   ZOZOTOWN開発本部 ZOZOTOWN開発2部
   WEBフロントエンドブロック
   菊地 宏之
   2020年 子会社の M&A に伴い入社
   BtoB事業（Fulfillment by ZOZO）で開発従事したのち、
   同年 ZOZOTOWN 開発本部へ異動し、現在に至る
   2
   

   View Slide

3. © ZOZO, Inc.
   https://zozo.jp/
   3
   ● ファッションEC
   ● 1,500以上のショップ、8,900以上のブランドの取り扱い
   ● 常時95万点以上の商品アイテム数と毎日平均2,900点以上の新着
   商品を掲載（2023年6月末時点）
   ● ブランド古着のファッションゾーン「ZOZOUSED」や
   コスメ専門モール「ZOZOCOSME」、靴の専門モール
   「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン
   「ZOZOVILLA」を展開
   ● 即日配送サービス
   ● ギフトラッピングサービス
   ● ツケ払い など
   

   View Slide

4. © ZOZO, Inc.
   4
   本日話すこと
   ● CSS in JS 導入の背景
   ○ どういう運用をしているのか
   ● CSS in JS 使い心地アンケート
   ○ アンケートの振り返り
   ● 今後の展望
   ● まとめ
   

   View Slide

5. © ZOZO, Inc.
   5
   CSS in JS 導入の背景
   

   View Slide

6. © ZOZO, Inc.
   6
   CSS in JS 導入の背景
   昨年、「ZOZOTOWN Webフロントエンドリプレイスにおける CSS in JS の技術選定で Emotion を選定
   した話」というタイトルの記事を執筆しました。
   

   View Slide

7. © ZOZO, Inc.
   7
   CSS in JS 導入の背景
   ● スコープ管理
   ○ ユニークなクラス名が自動生成されることにより、
   カスケード管理のための CSS 設計や命名規則に則る手間が大幅に削減されるため
   ● コンポーネント指向
   ○ スタイルをコンポーネントレベルでカプセル化して、
   品質（再利用性・メンテナンス性・可読性）を上げられるため
   ● 動的スタイリング
   ○ インタラクティブな UI が多く存在しており、
   動的スタイリング機能によって管理がしやすくなるため
   ● テーマ機能
   ○ ブランドによってテーマ性のあるページがあり、スタイルの切り替えが容易になるため
   

   View Slide

8. © ZOZO, Inc.
   8
   どういう運用をしているのか
   「タグ付きテンプレートリテラル記法」を推奨している。
   ● 従来の CSS の記述方法である
   ○ 初めて CSS in JS を利用するメンバーも多く、書き慣れた従来の CSS の記述にしたかった
   ○ オブジェクトスタイル記法に比べ、リプレイス前の CSS が移行しやすい利点があった
   ● リプレイス前の環境と共通設定の Stylelint のルールが利用でき一貫性を保てる
   properties-order 系のプラグインなどオブジェクトスタイル記法だと一部動かないものがある
   // タグ付きテンプレートリテラル記法
   const Section = styled.section`
   background-color: #333;
   color: #fff;
   `
   // オブジェクトスタイル記法
   const Section = styled.section({
   backgroundColor: '#333',
   color: '#fff'
   });
   

   View Slide

9. © ZOZO, Inc.
   9
   どういう運用をしているのか
   ThemeProvider のコンテキストに端末の判定情報や Sass の @mixin や @function に相当する関数を渡
   しており、各コンポーネントごとに呼び出さず styled 内からアクセスできるようにしている。
   const Text = styled.span`
   font-weight: ${({ theme }) => theme.function.fontWeight('bold')};
   `
   ※ iOS の Hiragino Sans のウェイトには W3, W6, W8 が含まれるが、 font-weight: bold を指定すると 700
   (W7) と同義になり意図よりも太い表示になる。
   上記の function を利用すると iOS の場合は font-wight: 600 の指定になる。
   

   View Slide

10. © ZOZO, Inc.
    10
    どういう運用をしているのか
    ZOZOTOWN の開発には多数のメンバーが携わっており、さらに外部の業務委託のメンバーも含まれて
    いる。
    開発環境に関するオンボーディングや問い合わせ対応にはコストが掛かるため、なるべくコードの記述
    にブレでない仕組みづくりをしており、これはコードレビューを効率的に行うことやメンテナンスをす
    る上でも有益であった。
    

    View Slide

11. © ZOZO, Inc.
    11
    CSS in JS 使い心地アンケート
    

    View Slide

12. © ZOZO, Inc.
    12
    CSS in JS 使い心地アンケートを実施
    対象
    リプレイス後の環境で CSS in JS を利用して開発を実施した部署内のフロントエンドエンジニア。
    設問（一部抜粋）
    1. CSS in JS に変わったことで、作業効率はどの程度変わりましたか？
    2. CSS in JS 導入による全体的な満足度を評価してください。
    3. CSS in JS は ZOZOTOWN に適してると思いますか？
    4. CSS in JS を利用して新規に実装されたスタイルの品質はどうですか？
    5. 社内ドキュメントやインターネット上の情報を利用して開発が滞りなく進められていますか？
    6. CSS in JS（Emotion）の API の使い勝手はどうですか？
    7. その他、ご意見ご感想があれば記入してください。
    

    View Slide

13. © ZOZO, Inc.
    13
    CSS in JS 使い心地アンケート
    > CSS in JS に変わったことで、作業効率はどの程度変わりましたか？
    大いに向上した 28.6%
    やや向上した 57.1%
    変わらない 14.3%
    やや低下した 0%
    大いに低下した 0%
    

    View Slide

14. © ZOZO, Inc.
    14
    CSS in JS 使い心地アンケート
    > CSS in JS 導入による全体的な満足度を評価してください。
    非常に満足 14.3%
    やや満足 71.4%
    普通 14.3%
    やや不満 0%
    非常に不満 0%
    

    View Slide

15. © ZOZO, Inc.
    15
    CSS in JS 使い心地アンケート
    > CSS in JS は ZOZOTOWN に適してると思いますか？
    非常に適している 28.6%
    やや適している 28.6%
    普通 42.9%
    やや適していない 0%
    全く適していない 0%
    

    View Slide

16. © ZOZO, Inc.
    16
    CSS in JS 使い心地アンケート
    > CSS in JS を利用して新規に実装されたスタイルの品質はどうですか？
    非常に高い 14.3%
    やや高い 57.1%
    普通 28.6%
    やや低い 0%
    非常に低い 0%
    

    View Slide

17. © ZOZO, Inc.
    17
    CSS in JS 使い心地アンケート
    > 社内ドキュメントやインターネット上の情報を利用して開発が滞りなく進められていますか？
    非常に満足 42.9%
    やや満足 28.6%
    普通 28.6%
    やや不満 0%
    非常に不満 0%
    

    View Slide

18. © ZOZO, Inc.
    18
    CSS in JS 使い心地アンケート
    > CSS in JS（Emotion）の API の使い勝手はどうですか？
    非常に使いやすい 14.3%
    やや使いやすい 71.4%
    普通 14.3%
    やや使いづらい 0%
    非常に使いづらい 0%
    

    View Slide

19. © ZOZO, Inc.
    > その他、ご意見ご感想があれば記入してください。
    ● 旧環境に比べて初期設定が簡単になり、スタイルの記述までの作業が減ったと感じている
    ● 全体的に使い勝手は非常に良く、特に CSS in JS に不慣れなメンバーでも参入が容易であるという
    点と CSS in JS を利用することでクラス名管理の問題などが解消された
    ただし、日本語の解説が少なく、高度な使用例（例：ThemeProvider における Theme のマージ）に関す
    る情報が不足していると感じたため、今後はそのような知見を社内で蓄積し、ドキュメントを作成
    する必要がある
    19
    CSS in JS 使い心地アンケート
    

    View Slide

20. © ZOZO, Inc.
    20
    アンケートの結果と分析
    ● 全体的にポジティブな回答が得られている
    ○ 導入した CSS in JS ライブラリ（Emotion）が高機能なため、開発上の問題点が少ない
    ● ドキュメントの充実化
    ○ 社内ドキュメントとして、 CSS in JS の書き方や簡単なコーディング規約（mixinの利用）は
    既に用意できているが、開発から得られた知見はこれからもドキュメントに反映していく必
    要がある
    ● CSS in JS を利用した実装経験者がまだ多くはなく、今後その数が増えると更なるフィードバック
    が得られると考えられる
    

    View Slide

21. © ZOZO, Inc.
    21
    今後の展望
    

    View Slide

22. © ZOZO, Inc.
    22
    ● 昨今の CSS in JS の動向は注視している
    ○ パフォーマンスの問題や Next.js の App Router との相性
    ■ Runtime CSS in JS にはパフォーマンス上の懸念がある
    ■ ただし現在はリプレイスされた範囲がまだ局所的なため、パフォーマンスの影響は顕在
    化していない
    ● Zero Runtime CSS in JS や他の手段に置き換えるかどうか
    ○ 現時点では検討してはいないが、検討の余地はある
    ■ 技術選定当時と現在では携わるメンバーも変わってきつつある
    今後の展望
    

    View Slide

23. © ZOZO, Inc.
    23
    まとめ
    

    View Slide

24. © ZOZO, Inc.
    24
    まとめ
    ● CSS in JS を導入して 1 年が経過したが、開発メンバーからは大きな不満や問題なさそうだった
    ○ 分かりやすい構成にしたことが要因だと思われるが、まだまだ社内の開発者全員が深く関わ
    れていないため、今後顕在化する問題はあるかもしれない
    ● 引き続き、開発メンバーの意見を汲み取りつつ、昨今のスタイリングの動向を追いながらアーキテ
    クチャの再評価をしていきたい
    

    View Slide

25. View Slide