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
480
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
4.5k
アクセシビリティを意識して、 画像の代替テキスト(alt)を 決めるときの観点
hiro0218
1
140
Next.jsで開発を始める前に知っておくと良さそうなこと
hiro0218
2
590
ITCSSの良いところ
hiro0218
1
570
Other Decks in Programming
See All in Programming
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
Trial
cairolibrary720
1
130
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Featured
See All Featured
Designing Experiences People Love
moore
136
23k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Design by the Numbers
sachag
277
18k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Thoughts on Productivity
jonyablonski
64
4.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Making Projects Easy
brettharned
111
5.7k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
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 ライブラリの動向を追っていく必要 はある。