CSS in JS を何となく知る

CSS in JS を業務で触ったことのない人に向けて社内勉強会をしたときの資料。

Transcript

1. CSS in JS を何となく知る 2022年3月18日 社内勉強会用資料 ZOZOTOWNWEB部 フロントエンド1　菊地 宏之
2. はじめに 想定読者 • JS フレームワーク（React、Vue.js） を利用して開発したことがある人 • これから CSS in JS ライブラリを使う 人 スライド内で取扱わないこと • 詳細なコードの書き方の説明 • CSS設計 • イレギュラーケース
3. アジェンダ • JS フレームワークを採用する理由とは ◦ 命令的UIと宣言的UI • CSS in JS とは ◦ メリット・デメリット • まとめ
4. そもそも JS フレームワーク （React、Vue.js）を採用する 理由とは何か
5. React を始めとする昨今の JS フレームワークには 下記のような特徴がある。 • 宣言的 UI • データバインディング • コンポーネント化 • 仮想 DOM（高効率レンダリング） React や Vue.js が目新しい技術だから利用しているのではなく、 これらが持つコンポーネントや宣言的 UI といった 特徴に価値を見出しているため、JS フレームワークを採用している。
6. 「命令的 UI」 と 「宣言的 UI」 宣言的 UI の誕生以前は、命令的にコードを記述する必要があった。
7. 命令的 UI どのようにして欲しいか定義 していくことを「命令的 UI」 と言う（HOW）
8. 宣言的 UI 何をしたいかを定義していくこ とを「宣言的 UI」と言う （WHAT）
9. 「命令的 UI」 VS 「宣言的 UI」 「命令的 UI が劣っていて、宣言的 UI が優れている」という話ではない。 スケールする設計が求められる大規模開発において、宣言的 UI が有用であ るという話である[^1] 。 そのため、寿命の短いLP や小規模なページの実装をする際に宣言的 UI を採 用することがオーバースペックになりうるケースも当然ある。 ____ [^1]: 大規模開発において、設計論を当てはめられないと技術的負債が生じてしまう。React hooks や宣言的 UI によって、 設計論を当てはめやすくなる。 ↩
10. CSS in JS とは
11. CSS in JS とは CSS in JS とは、外部ファイルでスタイルを定義するのではなく、 JavaScript を用いて CSS を記述するアプローチのことを指す。
12. CSS in JS が解決する課題 CSS in JS ライブラリは、コンポーネントに属する CSS 定義をバンドルする ライブラリである。CSS in JS を利用することで、CSS はコンポーネントに 定義され、外部の CSS ファイルに依存することなく、コンポーネント単体で 独立して動作させることができるようになる。 グローバルな CSS を利用している場合、CSS の定義を変更した際にどこへ 影響があるか分かりづらい。CSS in JS を適切に利用すると、あるコンポー ネントの CSS 定義を変更しても他のコンポーネントへの影響がなくすことが できる。
13. CSS in JS ではない アプローチ これは JavaScript 上でスタ イルを定義しているが、単 なるインラインスタイルで あるため、CSS in JS とは呼 ばれない。
14. CSS in JS ライブラリ • styled-jsx • Styled Components • Emotion • linaria • vanilla-extract ライブラリによって、記法や zero-runtime など特色が異なる。
15. CSS in JS ライブラリ Emotion の使い方
16. Emotion の使い方 Emotion は、以下のような機能を提供している。 • グローバルセレクター • ベンタープレフィックスの自動付与 • セレクターのネスト • メディアクエリー • キャッシュ • アニメーションの組み込み • CSR（Client-Side Rendering）、SSR（Server-Side Rendering） 対応 …などなど。
17. 記法 オブジェクトスタイル記法 タグ付きテンプレートリテラル記法 Emotion の場合、このような記述でスタイル定義ができる。 （他の CSS in JS ライブラリでも同様の記法が多い）
18. スタイリング方法 @emotion/styled : styled-components と 同等の記法が使える @emotion/react: css prop を利用した記法 オブジェクトスタイル記法とタグ付きテンプレートリテラル記法を用いて定義ができる。
19. コードサンプル 実際のコードは、 リポジトリを確認のこと。
20. CSS in JS を利用する メリット・デメリット
21. メリット • カプセル化 ◦ CSS定義はコンポーネントと紐づくため、関心の分離が行われる ◦ ユニークなクラス名が自動生成されるため、定義したスタイルが他のコンポーネントやライブラリに 影響を与えないことが担保される（詳細度） • メンテナンス性 ◦ CSS in JS のスコープ機能によって、ユニークなクラス名が自動生成され、スタイル定義は定義した対 象のコンポーネントにのみ影響するため、他への影響を気にすることなく CSS を修正できる ◦ 細かい CSS 設計（セレクタ階層や命名規則の設計）が不要になる • 動的なスタイリング ◦ CSS の変数や関数よりも、コンテキストに基づいた動的なスタイリングがしやすい
22. メリット - Reactの提唱する「関心の分離」 マークアップとロジックを別々のファイルに書いて人為的に技術を分離する のではなく、React はマークアップとロジックを両方含む疎結合の「コン ポーネント」という単位を用いて関心を分離する。
23. デメリット • 学習コスト ◦ CSS に慣れていても CSS in JS を使いこなすための学習コストは少なからず存在する • パフォーマンス ◦ ランタイム上で実行するとパフォーマンス問題はある （zero-runtime なライブラリを利用したり、SSRで事前にスタイルを生成しておけば良い） • 可読性が低い ◦ 自動生成されるクラス名の可読性が低い（そもそも読むものではない） <div class="sc-kkcKMHgn bWaaQa"></div> • 移植が困難 ◦ CSSの定義の移植は、オブジェクトスタイルを利用していると難しい
24. まとめ
25. まとめ CSS in JS ライブラリを利用する理由は、JSフレームワークが持つ「コンポーネント」 や「宣言的UI」を活かしてより良い開発体験を得るためである。CSS in JS ライブラリ を利用することはデファクトではないので、プロダクトに合わせた選定は必要。 また、CSS も CSS Cascade Layers や CSS Container Queries などの準備が整いつつ あり、CSS設計にパラダイムシフトが近いうちにもたらされることが想像できる。ラ イブラリが担っていた部分を標準仕様がカバーしていく可能性も大いにあるので、効 率的な実装をしていくためにも CSS と CSS in JS ライブラリの動向を追っていく必要 はある。