Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ZOZOTOWN に CSS in JS(Emotion)を導入して1年後の状況
Search
hiro
November 07, 2023
Programming
7
140k
ZOZOTOWN に CSS in JS(Emotion)を導入して1年後の状況
「ZOZO Tech Meetup - Webフロントエンド」での発表資料です。
https://zozotech-inc.connpass.com/event/297226/
hiro
November 07, 2023
Tweet
Share
More Decks by hiro
See All by hiro
アクセシビリティを意識して、 画像の代替テキスト(alt)を 決めるときの観点
hiro0218
1
180
Next.jsで開発を始める前に知っておくと良さそうなこと
hiro0218
2
590
CSS in JS を何となく知る
hiro0218
1
490
ITCSSの良いところ
hiro0218
1
590
Other Decks in Programming
See All in Programming
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
900
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
540
実践!難読化ガイド
mitchan
0
160
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
オートマトン学習しろ / Do automata learning
makenowjust
3
130
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Some more adventure of Happy Eyeballs
coe401_
2
180
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
270
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Rubyのobject_id
qnighy
6
1.3k
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
130
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
85
5.6k
GraphQLとの向き合い方2022年版
quramy
43
13k
What the flash - Photography Introduction
edds
67
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Six Lessons from altMBA
skipperchong
26
3.3k
Scaling GitHub
holman
458
140k
What's new in Ruby 2.0
geeforr
340
31k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Docker and Python
trallard
39
3k
Transcript
ZOZOTOWN に CSS in JS(Emotion) を導入して1年後の状況 2023/11/06 ZOZO Tech Meetup
- Webフロントエンド 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN開発2部 WEBフロントエンドブロック 菊地 宏之 Copyright © ZOZO, Inc. 1
© ZOZO, Inc. 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN開発2部 WEBフロントエンドブロック 菊地 宏之 2020年
子会社の M&A に伴い入社 BtoB事業(Fulfillment by ZOZO)で開発従事したのち、 同年 ZOZOTOWN 開発本部へ異動し、現在に至る 2
© ZOZO, Inc. https://zozo.jp/ 3 • ファッションEC • 1,500以上のショップ、8,900以上のブランドの取り扱い •
常時95万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品を掲載(2023年6月末時点) • ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、靴の専門モール 「ZOZOSHOES」、ラグジュアリー&デザイナーズゾーン 「ZOZOVILLA」を展開 • 即日配送サービス • ギフトラッピングサービス • ツケ払い など
© ZOZO, Inc. 4 本日話すこと • CSS in JS 導入の背景
◦ どういう運用をしているのか • CSS in JS 使い心地アンケート ◦ アンケートの振り返り • 今後の展望 • まとめ
© ZOZO, Inc. 5 CSS in JS 導入の背景
© ZOZO, Inc. 6 CSS in JS 導入の背景 昨年、「ZOZOTOWN Webフロントエンドリプレイスにおける
CSS in JS の技術選定で Emotion を選定 した話」というタイトルの記事を執筆しました。
© ZOZO, Inc. 7 CSS in JS 導入の背景 • スコープ管理
◦ ユニークなクラス名が自動生成されることにより、 カスケード管理のための CSS 設計や命名規則に則る手間が大幅に削減されるため • コンポーネント指向 ◦ スタイルをコンポーネントレベルでカプセル化して、 品質(再利用性・メンテナンス性・可読性)を上げられるため • 動的スタイリング ◦ インタラクティブな UI が多く存在しており、 動的スタイリング機能によって管理がしやすくなるため • テーマ機能 ◦ ブランドによってテーマ性のあるページがあり、スタイルの切り替えが容易になるため
© 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' });
© 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 の指定になる。
© ZOZO, Inc. 10 どういう運用をしているのか ZOZOTOWN の開発には多数のメンバーが携わっており、さらに外部の業務委託のメンバーも含まれて いる。 開発環境に関するオンボーディングや問い合わせ対応にはコストが掛かるため、なるべくコードの記述 にブレでない仕組みづくりをしており、これはコードレビューを効率的に行うことやメンテナンスをす
る上でも有益であった。
© ZOZO, Inc. 11 CSS in JS 使い心地アンケート
© 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. その他、ご意見ご感想があれば記入してください。
© ZOZO, Inc. 13 CSS in JS 使い心地アンケート > CSS
in JS に変わったことで、作業効率はどの程度変わりましたか? 大いに向上した 28.6% やや向上した 57.1% 変わらない 14.3% やや低下した 0% 大いに低下した 0%
© ZOZO, Inc. 14 CSS in JS 使い心地アンケート > CSS
in JS 導入による全体的な満足度を評価してください。 非常に満足 14.3% やや満足 71.4% 普通 14.3% やや不満 0% 非常に不満 0%
© ZOZO, Inc. 15 CSS in JS 使い心地アンケート > CSS
in JS は ZOZOTOWN に適してると思いますか? 非常に適している 28.6% やや適している 28.6% 普通 42.9% やや適していない 0% 全く適していない 0%
© ZOZO, Inc. 16 CSS in JS 使い心地アンケート > CSS
in JS を利用して新規に実装されたスタイルの品質はどうですか? 非常に高い 14.3% やや高い 57.1% 普通 28.6% やや低い 0% 非常に低い 0%
© ZOZO, Inc. 17 CSS in JS 使い心地アンケート > 社内ドキュメントやインターネット上の情報を利用して開発が滞りなく進められていますか?
非常に満足 42.9% やや満足 28.6% 普通 28.6% やや不満 0% 非常に不満 0%
© ZOZO, Inc. 18 CSS in JS 使い心地アンケート > CSS
in JS(Emotion)の API の使い勝手はどうですか? 非常に使いやすい 14.3% やや使いやすい 71.4% 普通 14.3% やや使いづらい 0% 非常に使いづらい 0%
© ZOZO, Inc. > その他、ご意見ご感想があれば記入してください。 • 旧環境に比べて初期設定が簡単になり、スタイルの記述までの作業が減ったと感じている • 全体的に使い勝手は非常に良く、特に CSS
in JS に不慣れなメンバーでも参入が容易であるという 点と CSS in JS を利用することでクラス名管理の問題などが解消された ただし、日本語の解説が少なく、高度な使用例(例:ThemeProvider における Theme のマージ)に関す る情報が不足していると感じたため、今後はそのような知見を社内で蓄積し、ドキュメントを作成 する必要がある 19 CSS in JS 使い心地アンケート
© ZOZO, Inc. 20 アンケートの結果と分析 • 全体的にポジティブな回答が得られている ◦ 導入した CSS
in JS ライブラリ(Emotion)が高機能なため、開発上の問題点が少ない • ドキュメントの充実化 ◦ 社内ドキュメントとして、 CSS in JS の書き方や簡単なコーディング規約(mixinの利用)は 既に用意できているが、開発から得られた知見はこれからもドキュメントに反映していく必 要がある • CSS in JS を利用した実装経験者がまだ多くはなく、今後その数が増えると更なるフィードバック が得られると考えられる
© ZOZO, Inc. 21 今後の展望
© ZOZO, Inc. 22 • 昨今の CSS in JS の動向は注視している
◦ パフォーマンスの問題や Next.js の App Router との相性 ▪ Runtime CSS in JS にはパフォーマンス上の懸念がある ▪ ただし現在はリプレイスされた範囲がまだ局所的なため、パフォーマンスの影響は顕在 化していない • Zero Runtime CSS in JS や他の手段に置き換えるかどうか ◦ 現時点では検討してはいないが、検討の余地はある ▪ 技術選定当時と現在では携わるメンバーも変わってきつつある 今後の展望
© ZOZO, Inc. 23 まとめ
© ZOZO, Inc. 24 まとめ • CSS in JS を導入して
1 年が経過したが、開発メンバーからは大きな不満や問題なさそうだった ◦ 分かりやすい構成にしたことが要因だと思われるが、まだまだ社内の開発者全員が深く関わ れていないため、今後顕在化する問題はあるかもしれない • 引き続き、開発メンバーの意見を汲み取りつつ、昨今のスタイリングの動向を追いながらアーキテ クチャの再評価をしていきたい
None