ビザスクliteなVue.jsの使い方

TECH PLAY様主催の下記イベントでの登壇資料です。

改めて考えるフロントエンドライブラリAngular, Vue, React, jQuery etc...
〜何を利用してる？共有LT会〜
https://techplay.jp/event/780231

Transcript

1. ビザスクliteなVue.jsの使い方 株式会社ビザスク
 Sho Ezawa
2. 自己紹介 glico Sho Ezawa ( ) / @glico800 ビザスクlite の フロントエンドエンジニア
 Vue.js、CSS、UIデザインが好き
 リクガメ・シマリス・文鳥・イッヌと暮らしている
3. もくじ 0. プロダクト紹介
 1. フロントエンド開発環境の紹介 2. コンポーネントフレームワークを採用しなかった話 3. CSS Modules を採用した話
 4. まとめ
4. 0. プロダクト紹介 1/2
5. 0. プロダクト紹介 2/2
6. 1. フロントエンド開発環境の紹介
7. ビザスクlite のフロントエンド環境 Vue.js 2.6.10 TypeScript webpack CSS Modules
 Sass ESLint
 Prettier コンポーネント志向
 Atomic Designベース 部分SPA 独自のマウント機構 reactive関数によるStore アダプティブデザイン Vue Composition API
8. 2. コンポーネントフレームワーク
 を採用しなかった話
9. コンポーネントフレームワーク - Vuetify や Element UI が有名
 - 外部で公開されている UI コンポーネントを利用し てリッチな UI を手軽に実現できる
10. 採用しなかった理由 1. 優秀なデザイナーがいるので、 デザインの自由度を重視 2. 依存を極力少なくしてマイグ レーションコストを減らしたい
11. デザインの自由度を重視 - ボタンやチェックボックスなど個々のUIコンポーネ ントをビザスクliteらしいデザインに統一 1. デザインの自由度を重視 ビザスクliteらしいデザインに統一しやすく

12. デザインの自由度を重視 - ボタンやチェックボックスなど個々のUIコンポーネ ントをビザスクliteらしいデザインに統一 2. マイグレーションコストを低減 実際に Vue.js 2.x から 3.0 へのマイグレーション検 証ではコンポーネントフレームワークへの依存が少 ないほどマイグレーションが容易そうという結果に https://tech.visasq.com/can-vuejs-datepicker-be-migrated-to-vue-3/
13. 3. CSS Modules を採用した話
14. 前提 既存のページにVueコンポーネントを埋め込む  山田 太郎 個人プラン  1 アドバイスする  依頼する  案件管理  スポットコンサルの依頼をしたい方は、気になる分野のアドバイザーを 探してみましょう。たくさんのアドバイザーから提案を受け取りたい場合 は、ビザスク上で公募することも可能です。 アドバイザーを探す アドバイザーとして活躍したい方は、 職歴やビジネス経験を記入することで、指名相談が届きます。 プロフィールを編集 ステータス アラート 更新日時 タイプ 金額 相談相手 タイトル 案件一覧 ここが
 Vueコンポーネント
15. 実現したかったこと コンポーネント外のスタイルから影響を受けず、
 かつ外へも影響を与えないようにしたい

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

 .button { } .button { } .button { } .button { } .button { } .button { }
18. ビザスクlite デザイナー @fmngok デザインの他にマークアップ とスタイリングも担当 デザイナーに好評でした 肥大化していくCSSファイルに頭を抱えながらも 仕方なく新機能追加するたびCSS増やしてたん だけど、途中で Vue.js + CSS Modulesに切り 替えてだいぶストレスフリーになった。
19. 結果：デザイナーとの協業がしやすくなった CSSのカプセル化なし
 → CSS肥大化で誰の手にも負えず...

 CSS in JS を採用
 → デザイナーがスタイルを触りづらく

 CSS Modules を採用
 → デザイナーとエンジニアの協業がしやすい
20. 詳しくは下記の記事で。

 【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件
 https://qiita.com/mascii/items/3202b9e18fd4a7366ac1
21. まとめ
22. まとめ マイグレーションコスト を減らす CSS Modules がおすすめ - コンポーネントフレームワークを使わないことでデ ザインの自由度を重視し、 ことが出来る
 - 既存のページにVueコンポーネントを埋め込む場合 は、Scoped CSS より
23. ご清聴ありがとうございました