Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS in JS を何となく知る

hiro
March 18, 2022

CSS in JS を何となく知る

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

hiro

March 18, 2022
Tweet

More Decks by hiro

Other Decks in Programming

Transcript

  1. CSS in JS を何となく知る
    2022年3月18日 社内勉強会用資料
    ZOZOTOWNWEB部 フロントエンド1 菊地 宏之

    View full-size slide

  2. はじめに
    想定読者
    ● JS フレームワーク(React、Vue.js)
    を利用して開発したことがある人
    ● これから CSS in JS ライブラリを使う

    スライド内で取扱わないこと
    ● 詳細なコードの書き方の説明
    ● CSS設計
    ● イレギュラーケース

    View full-size slide

  3. アジェンダ
    ● JS フレームワークを採用する理由とは
    ○ 命令的UIと宣言的UI
    ● CSS in JS とは
    ○ メリット・デメリット
    ● まとめ

    View full-size slide

  4. そもそも JS フレームワーク
    (React、Vue.js)を採用する
    理由とは何か

    View full-size slide

  5. React を始めとする昨今の JS フレームワークには
    下記のような特徴がある。
    ● 宣言的 UI
    ● データバインディング
    ● コンポーネント化
    ● 仮想 DOM(高効率レンダリング)
    React や Vue.js が目新しい技術だから利用しているのではなく、
    これらが持つコンポーネントや宣言的 UI といった
    特徴に価値を見出しているため、JS フレームワークを採用している。

    View full-size slide

  6. 「命令的 UI」 と 「宣言的 UI」
    宣言的 UI の誕生以前は、命令的にコードを記述する必要があった。

    View full-size slide

  7. 命令的 UI
    どのようにして欲しいか定義
    していくことを「命令的 UI」
    と言う(HOW)

    View full-size slide

  8. 宣言的 UI
    何をしたいかを定義していくこ
    とを「宣言的 UI」と言う
    (WHAT)

    View full-size slide

  9. 「命令的 UI」 VS 「宣言的 UI」
    「命令的 UI が劣っていて、宣言的 UI が優れている」という話ではない。
    スケールする設計が求められる大規模開発において、宣言的 UI が有用であ
    るという話である[^1]

    そのため、寿命の短いLP や小規模なページの実装をする際に宣言的 UI を採
    用することがオーバースペックになりうるケースも当然ある。
    ____
    [^1]: 大規模開発において、設計論を当てはめられないと技術的負債が生じてしまう。React hooks や宣言的 UI によって、
    設計論を当てはめやすくなる。 ↩

    View full-size slide

  10. CSS in JS とは

    View full-size slide

  11. CSS in JS とは
    CSS in JS とは、外部ファイルでスタイルを定義するのではなく、
    JavaScript を用いて CSS を記述するアプローチのことを指す。

    View full-size slide

  12. CSS in JS が解決する課題
    CSS in JS ライブラリは、コンポーネントに属する CSS 定義をバンドルする
    ライブラリである。CSS in JS を利用することで、CSS はコンポーネントに
    定義され、外部の CSS ファイルに依存することなく、コンポーネント単体で
    独立して動作させることができるようになる。
    グローバルな CSS を利用している場合、CSS の定義を変更した際にどこへ
    影響があるか分かりづらい。CSS in JS を適切に利用すると、あるコンポー
    ネントの CSS 定義を変更しても他のコンポーネントへの影響がなくすことが
    できる。

    View full-size slide

  13. CSS in JS ではない
    アプローチ
    これは JavaScript 上でスタ
    イルを定義しているが、単
    なるインラインスタイルで
    あるため、CSS in JS とは呼
    ばれない。

    View full-size slide

  14. CSS in JS ライブラリ
    ● styled-jsx
    ● Styled Components
    ● Emotion
    ● linaria
    ● vanilla-extract
    ライブラリによって、記法や
    zero-runtime など特色が異なる。

    View full-size slide

  15. CSS in JS ライブラリ
    Emotion の使い方

    View full-size slide

  16. Emotion の使い方
    Emotion は、以下のような機能を提供している。
    ● グローバルセレクター
    ● ベンタープレフィックスの自動付与
    ● セレクターのネスト
    ● メディアクエリー
    ● キャッシュ
    ● アニメーションの組み込み
    ● CSR(Client-Side Rendering)、SSR(Server-Side Rendering) 対応
    …などなど。

    View full-size slide

  17. 記法
    オブジェクトスタイル記法 タグ付きテンプレートリテラル記法
    Emotion の場合、このような記述でスタイル定義ができる。
    (他の CSS in JS ライブラリでも同様の記法が多い)

    View full-size slide

  18. スタイリング方法
    @emotion/styled : styled-components と
    同等の記法が使える
    @emotion/react: css prop を利用した記法
    オブジェクトスタイル記法とタグ付きテンプレートリテラル記法を用いて定義ができる。

    View full-size slide

  19. コードサンプル
    実際のコードは、
    リポジトリを確認のこと。

    View full-size slide

  20. CSS in JS を利用する
    メリット・デメリット

    View full-size slide

  21. メリット
    ● カプセル化
    ○ CSS定義はコンポーネントと紐づくため、関心の分離が行われる
    ○ ユニークなクラス名が自動生成されるため、定義したスタイルが他のコンポーネントやライブラリに
    影響を与えないことが担保される(詳細度)
    ● メンテナンス性
    ○ CSS in JS のスコープ機能によって、ユニークなクラス名が自動生成され、スタイル定義は定義した対
    象のコンポーネントにのみ影響するため、他への影響を気にすることなく CSS を修正できる
    ○ 細かい CSS 設計(セレクタ階層や命名規則の設計)が不要になる
    ● 動的なスタイリング
    ○ CSS の変数や関数よりも、コンテキストに基づいた動的なスタイリングがしやすい

    View full-size slide

  22. メリット - Reactの提唱する「関心の分離」
    マークアップとロジックを別々のファイルに書いて人為的に技術を分離する
    のではなく、React はマークアップとロジックを両方含む疎結合の「コン
    ポーネント」という単位を用いて関心を分離する。

    View full-size slide

  23. デメリット
    ● 学習コスト
    ○ CSS に慣れていても CSS in JS を使いこなすための学習コストは少なからず存在する
    ● パフォーマンス
    ○ ランタイム上で実行するとパフォーマンス問題はある
    (zero-runtime なライブラリを利用したり、SSRで事前にスタイルを生成しておけば良い)
    ● 可読性が低い
    ○ 自動生成されるクラス名の可読性が低い(そもそも読むものではない)

    ● 移植が困難
    ○ CSSの定義の移植は、オブジェクトスタイルを利用していると難しい

    View full-size slide

  24. まとめ
    CSS in JS ライブラリを利用する理由は、JSフレームワークが持つ「コンポーネント」
    や「宣言的UI」を活かしてより良い開発体験を得るためである。CSS in JS ライブラリ
    を利用することはデファクトではないので、プロダクトに合わせた選定は必要。
    また、CSS も CSS Cascade Layers や CSS Container Queries などの準備が整いつつ
    あり、CSS設計にパラダイムシフトが近いうちにもたらされることが想像できる。ラ
    イブラリが担っていた部分を標準仕様がカバーしていく可能性も大いにあるので、効
    率的な実装をしていくためにも CSS と CSS in JS ライブラリの動向を追っていく必要
    はある。

    View full-size slide