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 に足りないもの / CS...
Search
mizdra
PRO
April 19, 2024
Programming
8
2.8k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。
mizdra
PRO
April 19, 2024
Tweet
Share
More Decks by mizdra
See All by mizdra
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
4.1k
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
4
5.1k
React Server Components の疑問を解き明かす
mizdra
PRO
21
13k
大量の ESLint エラーに対処する技術 / The technology to fight with many ESLint's errors
mizdra
PRO
0
3.1k
Vue Language Server から生まれた Volar.js と、それが秘める可能性
mizdra
PRO
13
8.6k
マルチテナントで GraphQL を使う際の工夫
mizdra
PRO
0
2.5k
Webフロントエンドの秩序を維持する体制を作る
mizdra
PRO
9
25k
個人開発の裏側
mizdra
PRO
0
350
祝う2
mizdra
PRO
0
730
Other Decks in Programming
See All in Programming
テスト駆動Kaggle
isax1015
1
510
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
240
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
240
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
効率的な開発手段として VRTを活用する
ishkawa
0
150
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
310
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
470
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Optimizing for Happiness
mojombo
379
70k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
7
330
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
How to Ace a Technical Interview
jacobian
278
23k
GraphQLとの向き合い方2022年版
quramy
49
14k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
For a Future-Friendly Web
brad_frost
179
9.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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