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
3k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
1.1k
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.1k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
570
TypeScript で Optional Chaining を使ってみた
mascii
1
740
不変量
mascii
1
200
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.4k
JavaScriptのバージョンの話
mascii
1
2.3k
あなたのお家に眠るラズパイを救出したい
mascii
4
3.1k
Other Decks in Programming
See All in Programming
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
XP, Testing and ninja testing ZOZ5
m_seki
2
300
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
450
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.2k
クラシルを支える技術と組織
rakutek
0
190
Advance Your Career with Open Source
ivargrimstad
0
340
CSC509 Lecture 04
javiergs
PRO
0
300
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Side Projects
sachag
455
43k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Six Lessons from altMBA
skipperchong
28
4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
RailsConf 2023
tenderlove
30
1.2k
Navigating Team Friction
lara
189
15k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Designing for Performance
lara
610
69k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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!
ご清聴ありがとうございました