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
540
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
150k
アクセシビリティを意識して、 画像の代替テキスト(alt)を 決めるときの観点
hiro0218
1
240
Next.jsで開発を始める前に知っておくと良さそうなこと
hiro0218
2
620
ITCSSの良いところ
hiro0218
1
630
Other Decks in Programming
See All in Programming
Azure AI Foundryのご紹介
qt_luigi
1
190
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
140
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
200
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
950
AHC041解説
terryu16
0
380
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
130
情報漏洩させないための設計
kubotak
5
1.3k
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.4k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
0
100
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
420
Amazon Nova Reelの可能性
hideg
0
200
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7.1k
Faster Mobile Websites
deanohume
305
30k
A better future with KSS
kneath
238
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Building Applications with DynamoDB
mza
93
6.2k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Why Our Code Smells
bkeepers
PRO
335
57k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
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 ライブラリの動向を追っていく必要 はある。