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
Vue.jsでCSS Modulesを使ってみた
Search
Masaki Koyanagi
July 22, 2019
Programming
0
140
Vue.jsでCSS Modulesを使ってみた
WeJS @ 34th
https://wajs.connpass.com/event/138500/
Masaki Koyanagi
July 22, 2019
Tweet
Share
More Decks by Masaki Koyanagi
See All by Masaki Koyanagi
Vitestを使った型テストの始め方
mascii
6
2.9k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
1k
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
550
TypeScript で Optional Chaining を使ってみた
mascii
1
730
不変量
mascii
1
180
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.4k
JavaScriptのバージョンの話
mascii
1
2.3k
あなたのお家に眠るラズパイを救出したい
mascii
4
3k
Other Decks in Programming
See All in Programming
WindowInsetsだってテストしたい
ryunen344
1
220
Benchmark
sysong
0
280
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
技術同人誌をMCP Serverにしてみた
74th
1
530
エンジニア向け採用ピッチ資料
inusan
0
180
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
380
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Building an army of robots
kneath
306
45k
Faster Mobile Websites
deanohume
307
31k
GitHub's CSS Performance
jonrohan
1031
460k
Building Adaptive Systems
keathley
43
2.6k
Transcript
Vue.jsで CSS Modulesを 使ってみた @mascii_k WeJS 34th @RAKSUL
自己紹介 • 小柳 昌生(Masaki Koyanagi) • ビザスク エンジニア • Twitter:
@mascii_k
お話ししたいこと • Vue.js で CSS Modules 使ってみたら、デザイ ナーとエンジニアの分担がうまくいった話
きっかけ
デザイン事情 • すでにVue.jsを導入しているプロダクトでグロー バルCSSにしたところ、デザインが壊れた • CSSに関する規約はデザイナー任せになっていた ◦ CSSはエンジニアが手をつけにくい存在に
デザインを守りたい • 今度こそデザインもコンポーネント指向にして、 スタイルをカプセル化する • エンジニアがCSSの規約を決める ◦ エンジニアも手をつけやすい状態にする
どうやってカプセル化するか?
Scoped CSSか? Vue.jsなのでScoped CSSで良いと思っていたが... • 既存CSSと同居させる方針のため、Scoped CSSで は予期せぬスタイルが当たる可能性があった • 親コンポーネントと子コンポーネントで同じ
class名を用いると予期せぬスタイルが当たるこ とがあることも判明した
Scoped CSSでは
CSS Modulesでは • .title のようなセレクタが .HogeComponent_title_1UHoE に変換される • 既存CSSとの同居はCSS Modulesの方がしやすい
• :class="$style.title" がちょっとだけきもい?
詳しい比較・注意点はQiitaで! https://qiita.com/mascii/items/3202b9e18fd4a7366ac1
CSS Modules で得られたもの
デザイナーとの分担がしやすく • エンジニアが仮枠のコン ポーネントを用意 • デザイナーが仮枠にマーク アップとスタイルを組む • エンジニアがコンポーネン トを分解する
コンポーネントを分解 • スタイルについてコンポーネントの外への影響が ないことと、外からの影響受けてないかが明瞭に • コンポーネントをスタイルが崩れることなく機能 単位に分割できた
ネーミングルールに頭使わなくなった • グローバルCSS, Scoped CSSのようにclass名の ネーミングルールを意識しなくて良くなった • デザイナーも「CSS Modules好き」とのこと! •
エンジニアもclass名の変更を積極的にできるよ うになった
今後の展望
より協業しやすくしたい • デザイナーが想定したコンポーネントの分け方 と、エンジニアが想定した分け方は少しずれる ◦ 認識合わせのために Storybook を入れてコン ポーネントを管理したい
まとめ • Vue.jsを使っていてデザイナーがスタイルを組ん でいるならCSS Modulesは良さそう! • スタイルを組めないエンジニアでも、デザインを 守るために考えて行動することができる!
We are Cascading Style Sheeters!
ご清聴ありがとうございました