Vue.js × CSS Modules でコンポーネント設計してみた話

2770423c5f3963718ab8727f9a6f0938?s=47 Sho Ezawa
August 22, 2019

Vue.js × CSS Modules でコンポーネント設計してみた話

2019/08/22 に開催した VisasQ Engineering Meetup #3 での発表資料です。

VisasQ Engineering Meetup #3
https://visasq.connpass.com/event/134479/

2770423c5f3963718ab8727f9a6f0938?s=128

Sho Ezawa

August 22, 2019
Tweet

Transcript

  1. Vue.js × CSS Modules で
 コンポーネント設計してみた話 Presented By @glico800

  2. 自己紹介 glico Sho Ezawa ( ) / @glico800 ビザスク Webチームに所属


    フロントエンドやUIが好き
 妻・リクガメ・シマリスの4人家族 ?
  3. もくじ 1. フロントエンド開発環境を見直した話 2. Vue.js で CSS Modules を選んだ話
 3.

    コンポーネント設計でハマった話
 4. まとめ
  4. 1. フロントエンド開発環境を見直した話

  5. どうして? Atomic Design コンポーネント指向 変化に強い設計 - デザインリニューアルでは を採用
 
 -

    開発環境も に移行して、
 デザインの にしたい

  6. 変化に強い設計にしたい 使っていないCSS 巨大なグローバルCSS バックエンドとの密結合 ...

  7. コンポーネントを作りやすい環境作り 前環境 密結合 No SFC 疎結合 ディレクトリ構成の整理 SFC を使えるように 外からの影響を受けにくく

  8. 2. Vue.js で CSS Modules を選んだ話

  9. 前提 既存のページに作ったコンポーネントを埋め込む  山田 太郎 個人プラン  1 アドバイスする 

    依頼する  案件管理  スポットコンサルの依頼をしたい方は、気になる分野のアドバイザーを 探してみましょう。たくさんのアドバイザーから提案を受け取りたい場合 は、ビザスク上で公募することも可能です。 アドバイザーを探す アドバイザーとして活躍したい方は、 職歴やビジネス経験を記入することで、指名相談が届きます。 プロフィールを編集 ステータス アラート 更新日時 タイプ 金額 相談相手 タイトル 案件一覧 ここがコンポーネント
  10. 実現したかったこと コンポーネント外のスタイルから影響を受けず、
 かつ外へも影響を与えないようにしたい

 .button { } .button { } .button

    { }.button { }
  11. CSS Modules を選んだ理由    外からは影響を受けてしまう
 しっかりカプセル化 コンポーネント外のスタイルから影響を受けず、
 かつ外へも影響を与えないようにしたい

    Scoped

    CSS は外への影響はないが、
    CSS Modules ならコンポーネントの
    スタイルを できる .button { } .button { } .button { } .button { } .button { } .button { }
  12. CSS Modules とは CSS をモジュール化 ローカルスコープになる - CSS Modules は

    して構成する
 ための仕組み
 - 全てのクラス名とアニメーション名がデフォルトで

  13. None
  14. 続きはWebで!

 【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件
 https://qiita.com/mascii/items/3202b9e18fd4a7366ac1

  15. 3. コンポーネント設計でハマった話

  16. コンポーネント間でスタイルの上書きを
 しないことにした話

  17. Alert Button 理想

  18. Alert Button 理想 Alert Button 現実

  19. どうして? 参考:SFC style ordering · Issue #808 · vuejs/vue-loader ·

    GitHub
 https://github.com/vuejs/vue-loader/issues/808
 コンポーネントの依存関係を追従する CSSの実現が困難

 前提:CSS は詳細度が同じなら基本的に後から
    読み込まれたスタイルが優先される


  20. つまり (※あくまでイメージです) こんなイメージ Parent Child We can’t! Must consider about

    below.
  21. コンポーネント間で
 スタイルの上書きをしないことに

  22. バリエーションがあるコンポーネント
 をどう実装するのか問題

  23. - シンプルにまとめやすい
 - コンポーネント外への依存やファイル数が増えやすい 案1:細かくファイル分け

  24. - ファイル数や依存が少なめ
 - 複雑になりやすい 案2:props でスタイル切り替え

  25. - ファイル数や依存が少なめ
 - 複雑になりやすい 案2:props でスタイル切り替え 案2を採用! ファイル数が爆発しない
 依存が少ないのは大事
 -

    バリエーションが増えても - コンポーネント指向なので - 複雑になりやすいのは工夫次第で抑止できそう
 - デザイナーさんも LGTM してくれた
  26. ちょっと工夫 props で切り替えるスタイルは分けて記述

  27. まとめ

  28. まとめ コンポーネントの 
 スタイルを外から完全に切り離せる class名に悩む時間が減る - Vue.js × CSS Modules

    の構成は のが良い
 - 既存環境をコンポーネント指向に移行していく場合
 ので相性◎
 - 完全に1から作るなら Scoped CSS
 でも十分かも
  29. ご清聴ありがとうございました