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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Masaki Koyanagi
July 22, 2019
Programming
0
150
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
3.2k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
1.1k
Pros and Cons で考える Vue 2 Composition API
mascii
4
1.2k
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
600
TypeScript で Optional Chaining を使ってみた
mascii
1
770
不変量
mascii
1
210
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.5k
JavaScriptのバージョンの話
mascii
1
2.3k
あなたのお家に眠るラズパイを救出したい
mascii
4
3.1k
Other Decks in Programming
See All in Programming
オブザーバビリティ駆動開発って実際どうなの?
yohfee
3
830
コーディングルールの鮮度を保ちたい / keep-fresh-go-internal-conventions
handlename
0
200
AI駆動開発の本音 〜Claude Code並列開発で見えたエンジニアの新しい役割〜
hisuzuya
4
510
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
tasukuwatanabe
2
310
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
520
Vuetify 3 → 4 何が変わった?差分と移行ポイント10分まとめ
koukimiura
0
140
「抽象に依存せよ」が分からなかった新卒1年目の私が Goのインターフェースと和解するまで
kurogenki
0
120
Go 1.26でのsliceのメモリアロケーション最適化 / Go 1.26 リリースパーティ #go126party
mazrean
1
390
Claude Codeログ基盤の構築
giginet
PRO
7
3.2k
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
nnaka2992
1
340
CSC307 Lecture 15
javiergs
PRO
0
240
エラーログのマスキングの仕組みづくりに役立ったASTの話
kumoichi
0
220
Featured
See All Featured
Bash Introduction
62gerente
615
210k
YesSQL, Process and Tooling at Scale
rocio
174
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
860
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
4 Signs Your Business is Dying
shpigford
187
22k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
51k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
290
New Earth Scene 8
popppiees
1
1.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.4k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
140
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
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!
ご清聴ありがとうございました