Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Masaki Koyanagi

July 22, 2019
Tweet

More Decks by Masaki Koyanagi

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. きっかけ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Scoped CSSでは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. CSS Modules で得られたもの

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 今後の展望

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. We are
    Cascading Style Sheeters!

    View full-size slide

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

    View full-size slide