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 Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
Search
mizdra
April 19, 2024
Programming
7
1.6k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。
mizdra
April 19, 2024
Tweet
Share
More Decks by mizdra
See All by mizdra
大量の ESLint エラーに対処する技術 / The technology to fight with many ESLint's errors
mizdra
0
2.4k
Vue Language Server から生まれた Volar.js と、それが秘める可能性
mizdra
13
6.7k
マルチテナントで GraphQL を使う際の工夫
mizdra
0
2.2k
Webフロントエンドの秩序を維持する体制を作る
mizdra
9
25k
個人開発の裏側
mizdra
0
240
祝う2
mizdra
0
610
Other Decks in Programming
See All in Programming
小さな開発会社を作った理由
polidog
0
1.9k
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
20240706_CDKConf
takuyay0ne
0
1.2k
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
CSC307 Lecture 08
javiergs
PRO
0
330
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Featured
See All Featured
Leading Effective Engineering Teams 2024
addyosmani
3
300
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Building an army of robots
kneath
301
42k
Faster Mobile Websites
deanohume
303
30k
Design by the Numbers
sachag
277
18k
A designer walks into a library…
pauljervisheath
201
24k
A better future with KSS
kneath
231
17k
Web development in the modern age
philhawksworth
203
10k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Transcript
はてなにおける CSS Modules、 及び CSS Modules に足りないもの id:mizdra 2024/04/19 BARフロントえんどう#2
1 2024/04/19 BARフロントえんどう#2
自己紹介 • mizdra (みずどら) • 株式会社はてな ◦ Webアプリケーションエンジニア ◦ フロントエンドエキスパート
2
本日のテーマ: CSS Modules • 趣味でも、業務でも利用 • なんで使ってるの? / どう使ってるの? /
実際どうよ? ◦ とか色々話せれば 3
CSS Modules とは • CSS をローカルスコープ化する仕組み • CSS はグローバルスコープ ◦
.foo { .. } はページ内全ての .foo に適用される • CSS Modules を使うと... ◦ 特定のコンポーネントの .foo にだけ適用できる 4
例: Article コンポーネントで CSS Modules 5
ビルドすると、以下のように変換される 6
7 はてなにおける CSS Modules
はてなのフロントエンド 8 • 社内の一般的な技術スタック ◦ View ライブラリ: React ◦ CSS
フレームワーク: CSS Modules • 最近は CSS-in-JS / Utility-first が流行りだけど... ◦ はてな社内では、CSS Modules を使ってる
なぜ CSS Modules? 9 • 大きな理由は2つ • 理由1: 導入が簡単 ◦
xxx.module.css を作成 & import するだけ ◦ CSS-in-JS などと違い、ビルドツール組み込みでサポート ▪ ビルドツールの設定を書かなくて OK
なぜ CSS Modules? 10 • 理由2: 生の CSS に近い感覚で書ける ◦
fontSize じゃなくて font-size で OK ◦ Media Queries 使える ◦ .foo, .bar, .baz:hover { .. } も OK • はてなではデザイナーが CSS 書いてる ◦ コーディング経験無い方もいて、入社してから覚えてもらう ◦ CSS Modules なら、取っつきやすい
あまり支配的な理由ではないけれど... 11 • パフォーマンス上の懸念がない、という理由もある ◦ コンポーネントレンダリング時に <style> を挿入、みたいなこ とはしてない ◦
実行時のオーバーヘッド無し • パフォーマンスの心配をせずに使える
12 導入して 困ったこと
導入して困ったこと 13 1. 未使用の CSS 宣言が bundle に含まれる 2. style.unknown
と書いてもビルドが通る 3. コードジャンプできない
1. 未使用の CSS 宣言が bundle に含まれる 14 (プロジェクトの構成にもよるが、Next.js だと...) •
未使用の CSS 宣言は成果物に含まれる *1 • ユーザから隠したつもりが... ◦ devtools で .css を読むと書いてある *1: https://github.com/mizdra/next-unused-css/tree/main/.next/static/css
未使用の CSS 宣言が bundle に含まれる様子 15
解決策 16 • Bundler 側が対応してくれないと、どうにもならない ◦ Webpack, Turbopack, Vite, …
• ユーザ側でどうにかするしかない ◦ 未使用の CSS 宣言は消す or コメントアウト • 不便だけど、気をつければ OK ◦ 書き方によって bundle に含まれたり、含まれなかったりしない ◦ 良いように捉えると、制御しやすい
2. style.unknown と書いてもビルドが通る 17 (プロジェクトの構成にもよるが、Next.js だと...) • 以下のようなコードを書いても、ビルドが通る!!! ◦ tsc
の型チェックに pass し、ビルドできてしまう
解決策 18 • typed-css-modules ◦ .module.css を解析して、.module.css.d.ts を生成 ◦ tsc
がそれを見て、型チェック ◦ => 存在しないクラスの参照があったら、tsc がエラーを吐く
型エラーになる様子 19
typed-css-modules の制限 20 • Scss, Less はサポートしてない ◦ はてなでは、Scss, Less
どちらも使ってて困った • 調べたところ... ◦ typed-scss-modules, typed-less-modules を発見 ◦ => はてなではこれを導入
3. コードジャンプできない 21 • .tsx の側から、.css の定義元にジャンプしたい ◦ style.foo を
Command + Click で .css にジャンプしたい • しかし実際には... ◦ .module.css.d.ts にジャンプしてしまう
.module.css.d.ts にジャンプしてしまう様子 22
解決策 23 • VS Code 拡張機能を入れる • これでコードジャンプできる
VS Code 拡張の制限 24 • VS Code でしか機能しない (それはそう) •
チームに vimmer が居る ◦ どのエディタでも使える方法が欲しい • けど、そんなものはなかった ◦ なければどうする? ◦ 作ればいいじゃない!
happy-css-modules 25 • typed-css-modules の上位互換(相当)のツール ◦ .module.css.d.ts が生成できる ◦ CSS,
SCSS, LESS 全てサポート
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 を使っていれば、どのエディタでも同じ開発体験が得られる。
コードジャンプの様子 27
28 コードジャンプの仕組み
happy-css-modules 導入の結果 29 • .tsx ⇔ .module.css の行き来がとても楽に • デザイナーさんからも好評
• 作って良かった
30 という感じで、 快適に使ってます
31 けど実際 CSS Modules ってどうよ?
実際 CSS Modules どうよ? 32 • いいけれど... • やっぱり開発体験は他の CSS
フレームワークに劣る ◦ CSS 宣言を利用するコードを探せない (Find all references) ◦ 未使用 CSS 削除できない • JS の中に全てがあることで、できることがある ◦ CSS-in-JS ならではの強み
仕様がメンテナンスされてない問題 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
正直なところ... 34 • CSS Modules じゃなくても良い ◦ デザイナーが CSS 書いてるなら、一考の余地はある
◦ エンジニアが書いてるなら、他の技術で良い
発表を通して伝えたかったこと 35 • メンテナンスされてるのは重要 ◦ 活発じゃなくて良いけど、世の中の変化には追従してほしい ▪ CSS の新機能が登場した時に、それを取り込むとか •
情熱を持った人がいると、変化しやすい ◦ CSS の新機能への追従もそう ◦ 「CSS Modules 良くするために、ツール作ろうぜ!」 ◦ 情熱って大事だね
まとめ 36 • はてなでは CSS Modules 使ってる ◦ デザイナーが CSS
を書く、という業務形態にマッチしてた ◦ 補助ツールを作って、開発体験を向上させた • とはいえ... ◦ 開発体験に多少の難あり ◦ 業務形態が違えば、他の技術がマッチするかも ◦ 世の中の変化に追従できるものだと、なお良い
hatena.co.jp/recruit 37 37