こんにちは、フロントエンドチームの @syo_igarashi です。
今週のフロントエンド定例の内容を記載します。
フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。
以下、今週の内容です。
Datadogダッシュボード
Lintルール増やした Datadogアラートの見方 ビルドファイルのデグレが起こりえるパターン フロントエンド定例 2022/7/22
から引き続きDatadogによるJavaScriptのエラー検知の運用を継続していますが対象のモニタリングの設定（Slack通知）が大変ということもありダッシュボードを波平さんが作成してくれました。
よく閲覧されるページはネットワークエラーなどをJSエラーとして結構な数を出力されている事が多いようです。
Slackの通知のときは1つのチャンネルで見ていたため見逃しがちなとこもありましたがグラフに可視化されたことによりエラーの緊急度など分析がしやすくなった気がします。
とはいえまだエラーの対応を進められていない状況なのでここから改善できたらばと思います。
フロントのQAチームがあればできることなのか？QAチームあったらいいっすね。
Datadogで他にもできそうなこと、Lighthouseの結果をダッシュボード化するとか？
CSSカスタムプロパティによるテーマ適応案
Windows環境のnpm script HTMLサイズの注意 個人のGitHub Pages作り始め フロントエンド定例 2022/8/19
引き続き個人サイトのコードの設計をしています。
https://github.com/igara/igara.github.io
ダークテーマなどスタイルの変更可能なページを作ろうとしていて下記のファイルのようにclassNameを分けてテーマを分ける作りにしています。
https://github.com/igara/igara.github.io/blob/main/packages/ui/src/thema/index.ts
その際、実装側でテーマの色を当てるときはCSSのカスタムプロパティによる変数から参照するようにしています。
プロジェクトのスタイル適応としてはemotionを主としていますが変数適応だけCSS Modulesの適応としています。
SassによるCSS Modulesもありますが変数を当てたいだけなら標準のCSSでも良くてネストとかも欲しいとかあるかもですが、そこまで1つのコンポーネントに対して複雑な依存性あるスタイルを書く事がなく、emotionがあるので複雑なスタイルを書くときはemotionの範囲にしようという独自ルールで作っています。
カスタムプロパティの変数適応を一番親の階層になるDOMに対してclassName指定すればそのDOM配下に対してカスタムプロパティの変数使用が可能になるのでグローバルに変数適応したくない場合にも分けることが可能だったりします。
一番標準なCSS？なのでCSS ModulesじゃなくてもHTMLからのCSSの呼び出しでも使用も可能だったりするので汎用性が高いと思います。
またCSSとしての変数にする恩恵はVSCodeの拡張の話になりますがCSS Variable Autocompleteを使用することによってコードジャンプができるようになったり、インテリセンスが充実するというのがあります。
テーマが複数あって同じ変数名の場合の色の値の表示とかは本当にこの色なのか？となることもあります。異なる変数名ならば問題にならないことですが。
システムの実装上では、色の指定などはstring型のカラーコードで入力することが多いのでエディター上でどういった色なのかをカラーパレット表示されることって地味にありがたいことだったりします。
次回の更新予定は、9/9（金）になります！
前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。