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

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

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

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

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

2770423c5f3963718ab8727f9a6f0938?s=128

Sho Ezawa

June 05, 2020
Tweet

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 { }
  17. None
  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. ご清聴ありがとうございました