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

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

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

1. Vue.js × CSS Modules で
 コンポーネント設計してみた話 Presented By @glico800
2. 自己紹介 glico Sho Ezawa ( ) / @glico800 ビザスク Webチームに所属
 フロントエンドやUIが好き
 妻・リクガメ・シマリスの４人家族 ?
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 は して構成する
 ための仕組み
 - 全てのクラス名とアニメーション名がデフォルトで

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. - シンプルにまとめやすい
 - コンポーネント外への依存やファイル数が増えやすい 案１：細かくファイル分け
24. - ファイル数や依存が少なめ
 - 複雑になりやすい 案２：props でスタイル切り替え
25. - ファイル数や依存が少なめ
 - 複雑になりやすい 案２：props でスタイル切り替え 案２を採用！ ファイル数が爆発しない
 依存が少ないのは大事
 - バリエーションが増えても - コンポーネント指向なので - 複雑になりやすいのは工夫次第で抑止できそう
 - デザイナーさんも LGTM してくれた
26. ちょっと工夫 props で切り替えるスタイルは分けて記述
27. まとめ
28. まとめ コンポーネントの 
 スタイルを外から完全に切り離せる class名に悩む時間が減る - Vue.js × CSS Modules の構成は のが良い
 - 既存環境をコンポーネント指向に移行していく場合
 ので相性◎
 - 完全に１から作るなら Scoped CSS
 でも十分かも
29. ご清聴ありがとうございました