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
2. © ZOZO, Inc. 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN開発2部 WEBフロントエンドブロック 菊地 宏之 2020年 子会社の M&A に伴い入社 BtoB事業（Fulfillment by ZOZO）で開発従事したのち、 同年 ZOZOTOWN 開発本部へ異動し、現在に至る 2
3. © ZOZO, Inc. https://zozo.jp/ 3 • ファッションEC • 1,500以上のショップ、8,900以上のブランドの取り扱い • 常時95万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品を掲載（2023年6月末時点） • ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、靴の専門モール 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 • 即日配送サービス • ギフトラッピングサービス • ツケ払い など
4. © ZOZO, Inc. 4 本日話すこと • CSS in JS 導入の背景 ◦ どういう運用をしているのか • CSS in JS 使い心地アンケート ◦ アンケートの振り返り • 今後の展望 • まとめ
5. © ZOZO, Inc. 5 CSS in JS 導入の背景
6. © ZOZO, Inc. 6 CSS in JS 導入の背景 昨年、「ZOZOTOWN Webフロントエンドリプレイスにおける CSS in JS の技術選定で Emotion を選定 した話」というタイトルの記事を執筆しました。
7. © ZOZO, Inc. 7 CSS in JS 導入の背景 • スコープ管理 ◦ ユニークなクラス名が自動生成されることにより、 カスケード管理のための CSS 設計や命名規則に則る手間が大幅に削減されるため • コンポーネント指向 ◦ スタイルをコンポーネントレベルでカプセル化して、 品質（再利用性・メンテナンス性・可読性）を上げられるため • 動的スタイリング ◦ インタラクティブな UI が多く存在しており、 動的スタイリング機能によって管理がしやすくなるため • テーマ機能 ◦ ブランドによってテーマ性のあるページがあり、スタイルの切り替えが容易になるため
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' });
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 の指定になる。
10. © ZOZO, Inc. 10 どういう運用をしているのか ZOZOTOWN の開発には多数のメンバーが携わっており、さらに外部の業務委託のメンバーも含まれて いる。 開発環境に関するオンボーディングや問い合わせ対応にはコストが掛かるため、なるべくコードの記述 にブレでない仕組みづくりをしており、これはコードレビューを効率的に行うことやメンテナンスをす る上でも有益であった。
11. © ZOZO, Inc. 11 CSS in JS 使い心地アンケート
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. その他、ご意見ご感想があれば記入してください。
13. © ZOZO, Inc. 13 CSS in JS 使い心地アンケート > CSS in JS に変わったことで、作業効率はどの程度変わりましたか？ 大いに向上した 28.6% やや向上した 57.1% 変わらない 14.3% やや低下した 0% 大いに低下した 0%
14. © ZOZO, Inc. 14 CSS in JS 使い心地アンケート > CSS in JS 導入による全体的な満足度を評価してください。 非常に満足 14.3% やや満足 71.4% 普通 14.3% やや不満 0% 非常に不満 0%
15. © ZOZO, Inc. 15 CSS in JS 使い心地アンケート > CSS in JS は ZOZOTOWN に適してると思いますか？ 非常に適している 28.6% やや適している 28.6% 普通 42.9% やや適していない 0% 全く適していない 0%
16. © ZOZO, Inc. 16 CSS in JS 使い心地アンケート > CSS in JS を利用して新規に実装されたスタイルの品質はどうですか？ 非常に高い 14.3% やや高い 57.1% 普通 28.6% やや低い 0% 非常に低い 0%
17. © ZOZO, Inc. 17 CSS in JS 使い心地アンケート > 社内ドキュメントやインターネット上の情報を利用して開発が滞りなく進められていますか？ 非常に満足 42.9% やや満足 28.6% 普通 28.6% やや不満 0% 非常に不満 0%
18. © ZOZO, Inc. 18 CSS in JS 使い心地アンケート > CSS in JS（Emotion）の API の使い勝手はどうですか？ 非常に使いやすい 14.3% やや使いやすい 71.4% 普通 14.3% やや使いづらい 0% 非常に使いづらい 0%
19. © ZOZO, Inc. > その他、ご意見ご感想があれば記入してください。 • 旧環境に比べて初期設定が簡単になり、スタイルの記述までの作業が減ったと感じている • 全体的に使い勝手は非常に良く、特に CSS in JS に不慣れなメンバーでも参入が容易であるという 点と CSS in JS を利用することでクラス名管理の問題などが解消された ただし、日本語の解説が少なく、高度な使用例（例：ThemeProvider における Theme のマージ）に関す る情報が不足していると感じたため、今後はそのような知見を社内で蓄積し、ドキュメントを作成 する必要がある 19 CSS in JS 使い心地アンケート
20. © ZOZO, Inc. 20 アンケートの結果と分析 • 全体的にポジティブな回答が得られている ◦ 導入した CSS in JS ライブラリ（Emotion）が高機能なため、開発上の問題点が少ない • ドキュメントの充実化 ◦ 社内ドキュメントとして、 CSS in JS の書き方や簡単なコーディング規約（mixinの利用）は 既に用意できているが、開発から得られた知見はこれからもドキュメントに反映していく必 要がある • CSS in JS を利用した実装経験者がまだ多くはなく、今後その数が増えると更なるフィードバック が得られると考えられる
21. © ZOZO, Inc. 21 今後の展望
22. © ZOZO, Inc. 22 • 昨今の CSS in JS の動向は注視している ◦ パフォーマンスの問題や Next.js の App Router との相性 ▪ Runtime CSS in JS にはパフォーマンス上の懸念がある ▪ ただし現在はリプレイスされた範囲がまだ局所的なため、パフォーマンスの影響は顕在 化していない • Zero Runtime CSS in JS や他の手段に置き換えるかどうか ◦ 現時点では検討してはいないが、検討の余地はある ▪ 技術選定当時と現在では携わるメンバーも変わってきつつある 今後の展望
23. © ZOZO, Inc. 23 まとめ
24. © ZOZO, Inc. 24 まとめ • CSS in JS を導入して 1 年が経過したが、開発メンバーからは大きな不満や問題なさそうだった ◦ 分かりやすい構成にしたことが要因だと思われるが、まだまだ社内の開発者全員が深く関わ れていないため、今後顕在化する問題はあるかもしれない • 引き続き、開発メンバーの意見を汲み取りつつ、昨今のスタイリングの動向を追いながらアーキテ クチャの再評価をしていきたい