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

WeJS @ 34th
https://wajs.connpass.com/event/138500/

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. きっかけ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Scoped CSSでは
   

   View Slide

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

    View Slide

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

    View Slide

12. CSS Modules で得られたもの
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. 今後の展望
    

    View Slide

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

    View Slide

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

    View Slide

19. We are
    Cascading Style Sheeters!
    

    View Slide

20. ご清聴ありがとうございました
    

    View Slide