Feat/pw2vw

[mcdmaster]

👏 解決する issue / Resolved Issues

• SASS / SCSS の割り算の記法 #6346 (Partially)

📝 関連する issue / Related Issues

• Update dependency sass to v1.42.1 #6420
• sassのバージョンを1.32.12に（暫定的処置） #6417
• [Draft] apply SASS division #6380

⛏ 変更内容 / Details of Changes

• Modify assets/monitoringItemsTableCommon.scss (割り算方法の変更を含む：一部 SASS / SCSS の割り算の記法 #6346 とカブります)
• Modify references (quite few or none)
• Own-coded scss changed to referreing above: components/index/CardsMonitoring/ConfirmedCasesDetails/Table.vue
• Update SASS module and yarn.lock / packages.json accordingly

📸 スクリーンショット / Screenshots

たぶん、変化はありません。為念

[kaizumaki]

いやあ、実に見事です。ご対応ありがとうございます！
#6420 がマージできそうなので、このPRのpackage.jsonからはsassをremoveしてもらえるとよいかと思います！

[kaizumaki]

ご対応ありがとうございます！現在、yarn.lockがいろいろ巻き込んじゃっているみたいなので、いったんこちらで引き取らせてください。

[mcdmaster]

@kaizumaki お手数を掛けます！どうか宜しくお願いいたします。
さすがに conflict を残しておくのは気持ち悪かったので、取ってしまいました

[mcdmaster]

Closed since handover to #6459 is complete. Thank you!

[kaizumaki]

@mcdmaster クローズしてもらったところ、申し訳ないですが、やはりこちらのPRはうまくいっていないようです。mathの div が文字列としてそのまま出力されてしまっています。

おそらく、webpackのloaderあたりがうまく動いていないんじゃないかと思っています。私のほうでも調べてみます。
こちらのPRは念のため再オープンしておきますね。

[kaizumaki]

dart sassの公式のドキュメントによると、math.div はsass 1.33.0からのサポートであり、一方でVuetifyはsassのバージョンを1.32に落とさないとワーニングが止まらなくなってしまうのですよね。なので、実質sassは1.32を使わざるを得なく、よって math.div は使えない、ということのようです。試しに1.25.0からサポートされている math.pow に変えてみたら、ちゃんと動作しました。
すべてはVuetifyの対応を待ってから、というほうがよさそうです。

[mcdmaster]

@kaizumaki もしかしたら効率的な修正じゃないかも…と思いつつ、 assets/monitoringItemsTableCommon.scss へ大幅に手を入れてみました。スクショもつけておきますので、おおよそこんなかんじになるかと

[kaizumaki]

@mcdmaster おお、これはまたすごいですね！math.divを条件分岐する作戦ですね。
プレビューを拝見したところ、どこかがバグってしまっているようです。

• デスクトップサイズ時
  

• モバイルサイズ時
  

そしておそらく、math.divが使用されるためにはsassを1.33.0以上にアップデートしないといけないですよね。その判断もまたVuetifyの対応次第ということになりますが...

[kaizumaki]

@mcdmaster 引き続きフォローいただいているところすみません、 .eslintrc.cjs って必要なのでしょうか...？ .cjs ってサーバーサイドのモジュールだと思うのですが、フロントでは必要なかったりしませんかね？

[mcdmaster]

@kaizumaki 、各位
ダラダラと合間を縫って更新しているため、メールがたくさん飛んでいるかと存じます。
ご迷惑を掛けています。なかなか‘ eslint が通らなくってですね…。

で、ご指摘のように、クライアント主体であれば .eslintrc は要らなくなってくるのでしょう。
ただ、私自身詳しいわけではけしてないので、サーバサイドで lint をせずに済む仕組みに向けたロードマップがどうなるのか、まるでわかりません。
そんな状況下で、サーバ・クライアントの区別に依存しなくても実行できる「構文チェック」ツールとしては、lint の強みは失われていないと思います

[kaizumaki]

@mcdmaster すみません、私がちょっと言葉足らずでした。 .eslintrc.cjs ではなくて .eslintrc.js は必要だと思っています。

[mcdmaster]

@kaizumaki 私の認識は、cjs, mjs といったファイル形式は単にスクリプトとしての Javascript からのモジュール形式への進化のようなものをレペゼン（represent）する、といものでした。
ですので、クライアント用、サーバ用、といった区別をそこでしたことは、私に限って言えばありませんね。
今回においても、.eslintrc.cjs と .eslintrc.js ファイルは併存できないと思います

[mcdmaster]

突然ながら、こちら、取り下げます。理由は、以下によります

• 元々は、SASS のロードマップで今後 / （フォワードスラッシュ）記号を CSS コード中の除算処理に使えなくなるとのリリースが出たため、それへの対処が必要とされたことによる
• 現時点で、SASS のバージョンを固定化することで対処している
• 対処内容は、アプリの側が SASS 推奨の除算記法 math.div(y, x) に未対応の場合、ビルド時に著しく大量に出力されるワーニング・ログ・メッセージの抑制である
• SASS は、アップグレードへの注意を促すために必要だからやっているいることで、ログ出力の抑制方法は提供しないという立ち位置である
• ビルド時は node_modules の中まで走査がされるため、特にそこにある Vuetify の SASS コンポーネントが軒並みワーニング対象となってしまう
• いずれにしても、セキュリティ対応等の観点からは、現行の SASS バージョンにピン（固定化）するのでなく、アップグレードが必要になってくるだろう
• これに合わせ、プラットフォームやコンポーネントの最新化を図るためには、可能な限り包括的、複合的にことを進めた方が効率的に思われる
• じっさい、SASS メッセージの抑制という一見シンプルな要件への対応を試みたところ、影響範囲を考えるとかなりの手間を割くことが判明した
• これでは「割に合わない」ため、いったん顔を洗って出直すこととする

いささか身勝手ではありますけれども、事情をご斟酌いただけますと幸いです。
なお、ごくコンパクトにまとめた、他のアプリへの影響等を一切捨象したミニ・バージョンを、Tips&Tricks と備忘の意味で公開するかもしれません。
そのときは、同じ事情で苦しんでいる海外の開発者からも参照されるよう、可能な限り英文で書いていきます