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
CSS in JS を何となく知る
Search
hiro
March 18, 2022
Programming
1
490
CSS in JS を何となく知る
CSS in JS を業務で触ったことのない人に向けて社内勉強会をしたときの資料。
hiro
March 18, 2022
Tweet
Share
More Decks by hiro
See All by hiro
ZOZOTOWN に CSS in JS(Emotion)を導入して1年後の状況
hiro0218
7
140k
アクセシビリティを意識して、 画像の代替テキスト(alt)を 決めるときの観点
hiro0218
1
180
Next.jsで開発を始める前に知っておくと良さそうなこと
hiro0218
2
590
ITCSSの良いところ
hiro0218
1
590
Other Decks in Programming
See All in Programming
What is Parser
yui_knk
9
4.1k
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
370
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
970
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
140
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
110
Shinjuku.rb#95:心の技術書紹介
free_world21
1
110
Architecture Decision Record (ADR)
nearme_tech
PRO
1
680
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
760
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
Gamification - CAS2011
davidbonilla
79
5k
Building Applications with DynamoDB
mza
90
6k
Six Lessons from altMBA
skipperchong
26
3.3k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
The Cult of Friendly URLs
andyhume
76
6k
Become a Pro
speakerdeck
PRO
22
4.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
96
Transcript
CSS in JS を何となく知る 2022年3月18日 社内勉強会用資料 ZOZOTOWNWEB部 フロントエンド1 菊地 宏之
はじめに 想定読者 • JS フレームワーク(React、Vue.js) を利用して開発したことがある人 • これから CSS in
JS ライブラリを使う 人 スライド内で取扱わないこと • 詳細なコードの書き方の説明 • CSS設計 • イレギュラーケース
アジェンダ • JS フレームワークを採用する理由とは ◦ 命令的UIと宣言的UI • CSS in JS
とは ◦ メリット・デメリット • まとめ
そもそも JS フレームワーク (React、Vue.js)を採用する 理由とは何か
React を始めとする昨今の JS フレームワークには 下記のような特徴がある。 • 宣言的 UI • データバインディング
• コンポーネント化 • 仮想 DOM(高効率レンダリング) React や Vue.js が目新しい技術だから利用しているのではなく、 これらが持つコンポーネントや宣言的 UI といった 特徴に価値を見出しているため、JS フレームワークを採用している。
「命令的 UI」 と 「宣言的 UI」 宣言的 UI の誕生以前は、命令的にコードを記述する必要があった。
命令的 UI どのようにして欲しいか定義 していくことを「命令的 UI」 と言う(HOW)
宣言的 UI 何をしたいかを定義していくこ とを「宣言的 UI」と言う (WHAT)
「命令的 UI」 VS 「宣言的 UI」 「命令的 UI が劣っていて、宣言的 UI が優れている」という話ではない。
スケールする設計が求められる大規模開発において、宣言的 UI が有用であ るという話である[^1] 。 そのため、寿命の短いLP や小規模なページの実装をする際に宣言的 UI を採 用することがオーバースペックになりうるケースも当然ある。 ____ [^1]: 大規模開発において、設計論を当てはめられないと技術的負債が生じてしまう。React hooks や宣言的 UI によって、 設計論を当てはめやすくなる。 ↩
CSS in JS とは
CSS in JS とは CSS in JS とは、外部ファイルでスタイルを定義するのではなく、 JavaScript を用いて
CSS を記述するアプローチのことを指す。
CSS in JS が解決する課題 CSS in JS ライブラリは、コンポーネントに属する CSS 定義をバンドルする
ライブラリである。CSS in JS を利用することで、CSS はコンポーネントに 定義され、外部の CSS ファイルに依存することなく、コンポーネント単体で 独立して動作させることができるようになる。 グローバルな CSS を利用している場合、CSS の定義を変更した際にどこへ 影響があるか分かりづらい。CSS in JS を適切に利用すると、あるコンポー ネントの CSS 定義を変更しても他のコンポーネントへの影響がなくすことが できる。
CSS in JS ではない アプローチ これは JavaScript 上でスタ イルを定義しているが、単 なるインラインスタイルで
あるため、CSS in JS とは呼 ばれない。
CSS in JS ライブラリ • styled-jsx • Styled Components •
Emotion • linaria • vanilla-extract ライブラリによって、記法や zero-runtime など特色が異なる。
CSS in JS ライブラリ Emotion の使い方
Emotion の使い方 Emotion は、以下のような機能を提供している。 • グローバルセレクター • ベンタープレフィックスの自動付与 • セレクターのネスト
• メディアクエリー • キャッシュ • アニメーションの組み込み • CSR(Client-Side Rendering)、SSR(Server-Side Rendering) 対応 …などなど。
記法 オブジェクトスタイル記法 タグ付きテンプレートリテラル記法 Emotion の場合、このような記述でスタイル定義ができる。 (他の CSS in JS ライブラリでも同様の記法が多い)
スタイリング方法 @emotion/styled : styled-components と 同等の記法が使える @emotion/react: css prop を利用した記法
オブジェクトスタイル記法とタグ付きテンプレートリテラル記法を用いて定義ができる。
コードサンプル 実際のコードは、 リポジトリを確認のこと。
CSS in JS を利用する メリット・デメリット
メリット • カプセル化 ◦ CSS定義はコンポーネントと紐づくため、関心の分離が行われる ◦ ユニークなクラス名が自動生成されるため、定義したスタイルが他のコンポーネントやライブラリに 影響を与えないことが担保される(詳細度) • メンテナンス性
◦ CSS in JS のスコープ機能によって、ユニークなクラス名が自動生成され、スタイル定義は定義した対 象のコンポーネントにのみ影響するため、他への影響を気にすることなく CSS を修正できる ◦ 細かい CSS 設計(セレクタ階層や命名規則の設計)が不要になる • 動的なスタイリング ◦ CSS の変数や関数よりも、コンテキストに基づいた動的なスタイリングがしやすい
メリット - Reactの提唱する「関心の分離」 マークアップとロジックを別々のファイルに書いて人為的に技術を分離する のではなく、React はマークアップとロジックを両方含む疎結合の「コン ポーネント」という単位を用いて関心を分離する。
デメリット • 学習コスト ◦ CSS に慣れていても CSS in JS を使いこなすための学習コストは少なからず存在する
• パフォーマンス ◦ ランタイム上で実行するとパフォーマンス問題はある (zero-runtime なライブラリを利用したり、SSRで事前にスタイルを生成しておけば良い) • 可読性が低い ◦ 自動生成されるクラス名の可読性が低い(そもそも読むものではない) <div class="sc-kkcKMHgn bWaaQa"></div> • 移植が困難 ◦ CSSの定義の移植は、オブジェクトスタイルを利用していると難しい
まとめ
まとめ CSS in JS ライブラリを利用する理由は、JSフレームワークが持つ「コンポーネント」 や「宣言的UI」を活かしてより良い開発体験を得るためである。CSS in JS ライブラリ を利用することはデファクトではないので、プロダクトに合わせた選定は必要。
また、CSS も CSS Cascade Layers や CSS Container Queries などの準備が整いつつ あり、CSS設計にパラダイムシフトが近いうちにもたらされることが想像できる。ラ イブラリが担っていた部分を標準仕様がカバーしていく可能性も大いにあるので、効 率的な実装をしていくためにも CSS と CSS in JS ライブラリの動向を追っていく必要 はある。