Tweet
Tweet

Slide 1

Slide 1 text

はてなにおける CSS Modules、 及び CSS Modules に足りないもの id:mizdra 2024/04/19 BARフロントえんどう#2 1 2024/04/19 BARフロントえんどう#2

Slide 2

Slide 2 text

自己紹介 ● mizdra (みずどら) ● 株式会社はてな ○ Webアプリケーションエンジニア ○ フロントエンドエキスパート 2

Slide 3

Slide 3 text

本日のテーマ: CSS Modules ● 趣味でも、業務でも利用 ● なんで使ってるの? / どう使ってるの? / 実際どうよ? ○ とか色々話せれば 3

Slide 4

Slide 4 text

CSS Modules とは ● CSS をローカルスコープ化する仕組み ● CSS はグローバルスコープ ○ .foo { .. } はページ内全ての .foo に適用される ● CSS Modules を使うと... ○ 特定のコンポーネントの .foo にだけ適用できる 4

Slide 5

Slide 5 text

例: Article コンポーネントで CSS Modules 5

Slide 6

Slide 6 text

ビルドすると、以下のように変換される 6

Slide 7

Slide 7 text

7 はてなにおける CSS Modules

Slide 8

Slide 8 text

はてなのフロントエンド 8 ● 社内の一般的な技術スタック ○ View ライブラリ: React ○ CSS フレームワーク: CSS Modules ● 最近は CSS-in-JS / Utility-first が流行りだけど... ○ はてな社内では、CSS Modules を使ってる

Slide 9

Slide 9 text

なぜ CSS Modules? 9 ● 大きな理由は2つ ● 理由1: 導入が簡単 ○ xxx.module.css を作成 & import するだけ ○ CSS-in-JS などと違い、ビルドツール組み込みでサポート ■ ビルドツールの設定を書かなくて OK

Slide 10

Slide 10 text

なぜ CSS Modules? 10 ● 理由2: 生の CSS に近い感覚で書ける ○ fontSize じゃなくて font-size で OK ○ Media Queries 使える ○ .foo, .bar, .baz:hover { .. } も OK ● はてなではデザイナーが CSS 書いてる ○ コーディング経験無い方もいて、入社してから覚えてもらう ○ CSS Modules なら、取っつきやすい

Slide 11

Slide 11 text

あまり支配的な理由ではないけれど... 11 ● パフォーマンス上の懸念がない、という理由もある ○ コンポーネントレンダリング時に を挿入、みたいなこ とはしてない ○ 実行時のオーバーヘッド無し ● パフォーマンスの心配をせずに使える

Slide 12

Slide 12 text

12 導入して 困ったこと

Slide 13

Slide 13 text

導入して困ったこと 13 1. 未使用の CSS 宣言が bundle に含まれる 2. style.unknown と書いてもビルドが通る 3. コードジャンプできない

Slide 14

Slide 14 text

1. 未使用の CSS 宣言が bundle に含まれる 14 (プロジェクトの構成にもよるが、Next.js だと...) ● 未使用の CSS 宣言は成果物に含まれる *1 ● ユーザから隠したつもりが... ○ devtools で .css を読むと書いてある *1: https://github.com/mizdra/next-unused-css/tree/main/.next/static/css

Slide 15

Slide 15 text

未使用の CSS 宣言が bundle に含まれる様子 15

Slide 16

Slide 16 text

解決策 16 ● Bundler 側が対応してくれないと、どうにもならない ○ Webpack, Turbopack, Vite, … ● ユーザ側でどうにかするしかない ○ 未使用の CSS 宣言は消す or コメントアウト ● 不便だけど、気をつければ OK ○ 書き方によって bundle に含まれたり、含まれなかったりしない ○ 良いように捉えると、制御しやすい

Slide 17

Slide 17 text

2. style.unknown と書いてもビルドが通る 17 (プロジェクトの構成にもよるが、Next.js だと...) ● 以下のようなコードを書いても、ビルドが通る！！！ ○ tsc の型チェックに pass し、ビルドできてしまう

Slide 18

Slide 18 text

解決策 18 ● typed-css-modules ○ .module.css を解析して、.module.css.d.ts を生成 ○ tsc がそれを見て、型チェック ○ => 存在しないクラスの参照があったら、tsc がエラーを吐く

Slide 19

Slide 19 text

型エラーになる様子 19

Slide 20

Slide 20 text

typed-css-modules の制限 20 ● Scss, Less はサポートしてない ○ はてなでは、Scss, Less どちらも使ってて困った ● 調べたところ... ○ typed-scss-modules, typed-less-modules を発見 ○ => はてなではこれを導入

Slide 21

Slide 21 text

3. コードジャンプできない 21 ● .tsx の側から、.css の定義元にジャンプしたい ○ style.foo を Command + Click で .css にジャンプしたい ● しかし実際には... ○ .module.css.d.ts にジャンプしてしまう

Slide 22

Slide 22 text

.module.css.d.ts にジャンプしてしまう様子 22

Slide 23

Slide 23 text

解決策 23 ● VS Code 拡張機能を入れる ● これでコードジャンプできる

Slide 24

Slide 24 text

VS Code 拡張の制限 24 ● VS Code でしか機能しない (それはそう) ● チームに vimmer が居る ○ どのエディタでも使える方法が欲しい ● けど、そんなものはなかった ○ なければどうする? ○ 作ればいいじゃない！

Slide 25

Slide 25 text

happy-css-modules 25 ● typed-css-modules の上位互換(相当)のツール ○ .module.css.d.ts が生成できる ○ CSS, SCSS, LESS 全てサポート

Slide 26

Slide 26 text

happy-css-modules と Declaration Map 26 ● 加えて .module.css.d.ts.map も生成 ○ Declaration Map というやつ ○ .module.css.d.ts => .module.css の対応関係が記録されてる ● これを Language Server *2 が読んでくれる ○ 通常は .module.css.d.ts にジャンプするはずだが... ○ Declaration Map により、.module.css にジャンプできる！ *2: コードジャンプや補完などの補助機能を提供するプログラムのこと。 エディタとは独立していて、様々なエディタと組み合わせられる。 同じ Language Server を使っていれば、どのエディタでも同じ開発体験が得られる。

Slide 27

Slide 27 text

コードジャンプの様子 27

Slide 28

Slide 28 text

28 コードジャンプの仕組み

Slide 29

Slide 29 text

happy-css-modules 導入の結果 29 ● .tsx ⇔ .module.css の行き来がとても楽に ● デザイナーさんからも好評 ● 作って良かった

Slide 30

Slide 30 text

30 という感じで、 快適に使ってます

Slide 31

Slide 31 text

31 けど実際 CSS Modules ってどうよ?

Slide 32

Slide 32 text

実際 CSS Modules どうよ? 32 ● いいけれど... ● やっぱり開発体験は他の CSS フレームワークに劣る ○ CSS 宣言を利用するコードを探せない (Find all references) ○ 未使用 CSS 削除できない ● JS の中に全てがあることで、できることがある ○ CSS-in-JS ならではの強み

Slide 33

Slide 33 text

仕様がメンテナンスされてない問題 33 ● 2015 年を最後に停滞 *2 ○ CSS Variables のローカルスコープ化の提案などが、進んでない *3 ● @sokra, @geelen, @markdalgleish が仕様策定してた ○ 中でも geelen がよく貢献してた ■ 2016 年から styled-components の開発を開始 ○ 主要なメンテナが、CSS Modules から離れた *2: https://developer.hatenastaff.com/entry/2022/09/01/093000 *3: https://github.com/css-modules/css-modules/issues/303

Slide 34

Slide 34 text

正直なところ... 34 ● CSS Modules じゃなくても良い ○ デザイナーが CSS 書いてるなら、一考の余地はある ○ エンジニアが書いてるなら、他の技術で良い

Slide 35

Slide 35 text

発表を通して伝えたかったこと 35 ● メンテナンスされてるのは重要 ○ 活発じゃなくて良いけど、世の中の変化には追従してほしい ■ CSS の新機能が登場した時に、それを取り込むとか ● 情熱を持った人がいると、変化しやすい ○ CSS の新機能への追従もそう ○ 「CSS Modules 良くするために、ツール作ろうぜ！」 ○ 情熱って大事だね

Slide 36

Slide 36 text

まとめ 36 ● はてなでは CSS Modules 使ってる ○ デザイナーが CSS を書く、という業務形態にマッチしてた ○ 補助ツールを作って、開発体験を向上させた ● とはいえ... ○ 開発体験に多少の難あり ○ 業務形態が違えば、他の技術がマッチするかも ○ 世の中の変化に追従できるものだと、なお良い

Slide 37

Slide 37 text

hatena.co.jp/recruit 37 37