Vue.jsでCSS Modulesを使ってみた

Slide 1

Slide 1 text

Vue.jsで CSS Modulesを使ってみた @mascii_k WeJS 34th @RAKSUL

Slide 2

Slide 2 text

自己紹介 ● 小柳昌生(Masaki Koyanagi) ● ビザスクエンジニア ● Twitter: @mascii_k

Slide 3

Slide 3 text

お話ししたいこと ● Vue.js で CSS Modules 使ってみたら、デザイナーとエンジニアの分担がうまくいった話

Slide 4

Slide 4 text

きっかけ

Slide 5

Slide 5 text

デザイン事情 ● すでにVue.jsを導入しているプロダクトでグローバルCSSにしたところ、デザインが壊れた ● CSSに関する規約はデザイナー任せになっていた ○ CSSはエンジニアが手をつけにくい存在に

Slide 6

Slide 6 text

デザインを守りたい ● 今度こそデザインもコンポーネント指向にして、スタイルをカプセル化する ● エンジニアがCSSの規約を決める ○ エンジニアも手をつけやすい状態にする

Slide 7

Slide 7 text

どうやってカプセル化するか？

Slide 8

Slide 8 text

Scoped CSSか? Vue.jsなのでScoped CSSで良いと思っていたが... ● 既存CSSと同居させる方針のため、Scoped CSSでは予期せぬスタイルが当たる可能性があった ● 親コンポーネントと子コンポーネントで同じ class名を用いると予期せぬスタイルが当たることがあることも判明した

Slide 9

Slide 9 text

Scoped CSSでは

Slide 10

Slide 10 text

CSS Modulesでは ● .title のようなセレクタが .HogeComponent_title_1UHoE に変換される ● 既存CSSとの同居はCSS Modulesの方がしやすい ● :class="$style.title" がちょっとだけきもい?

Slide 11

Slide 11 text

詳しい比較・注意点はQiitaで！ https://qiita.com/mascii/items/3202b9e18fd4a7366ac1

Slide 12

Slide 12 text

CSS Modules で得られたもの

Slide 13

Slide 13 text

デザイナーとの分担がしやすく ● エンジニアが仮枠のコンポーネントを用意 ● デザイナーが仮枠にマークアップとスタイルを組む ● エンジニアがコンポーネントを分解する

Slide 14

Slide 14 text

コンポーネントを分解 ● スタイルについてコンポーネントの外への影響がないことと、外からの影響受けてないかが明瞭に ● コンポーネントをスタイルが崩れることなく機能単位に分割できた

Slide 15

Slide 15 text

ネーミングルールに頭使わなくなった ● グローバルCSS, Scoped CSSのようにclass名のネーミングルールを意識しなくて良くなった ● デザイナーも「CSS Modules好き」とのこと！ ● エンジニアもclass名の変更を積極的にできるようになった

Slide 16

Slide 16 text

今後の展望

Slide 17

Slide 17 text

より協業しやすくしたい ● デザイナーが想定したコンポーネントの分け方と、エンジニアが想定した分け方は少しずれる ○ 認識合わせのために Storybook を入れてコンポーネントを管理したい

Slide 18

Slide 18 text

まとめ ● Vue.jsを使っていてデザイナーがスタイルを組んでいるならCSS Modulesは良さそう！ ● スタイルを組めないエンジニアでも、デザインを守るために考えて行動することができる！